Summary ✨

An app designed to help users quit vaping by tracking progress and fostering community engagement, all while growing a virtual plant. Developed as part of our BCIT UI/UX course, our team of four created a style guide, logo, Figma prototypes, and a mobile-first web demo using Preact. My role involved choosing fonts and typography, designing and prototyping app sections, and building them using Preact. Overcoming challenges in design and learning new tools like Figma and Preact, I gained valuable experience in typography and teamwork while creating a prototype demo.

Details 🔎

Coughie is an app that helps people quit their vaping habit. Users can input, track their progress, join a community, while growing their virtual plant 🌱.

As a part of our BCIT UI/UX course, we designed and developed a prototype demo of Coughie. Collaborating with a team of 4, we created a style guide, designed a logo, made `Figma` prototypes and built a mobile-first web demo using `Preact`.

My role 🫡

As a Designer and Developer, I was responsible for choosing the fonts and typography. I also designed and prototyped parts of the app and built those parts using `Preact`.

Challenges 🥵

Design is not my strong suit, so I had to study and learn a lot about typography. I also had to learn how to use `Preact` and work extensively with `Figma` to create the prototypes in a short amount of time (1 week).

Takeaway 📖

I learned a lot about typography and how to use `Figma` more efficiently. I also learned how to use `Preact` and how to work with a team to create a prototype demo.

Coughie ☕

Coughie is a mobile-first web application designed to help people who want to quit their vaping habit. Users can input, track their progress, join a community, while growing their virtual plant 🌱.

Table of contents

• General info
• Features
• PrototypeFrames
• Technologies
• Setup

General info

Welcome to Coughie, This app was created as an assignment for BCIT. We developed it from the ground up, starting with the idea and then creating a style guide for the logo, font, icons, and color scheme. We then built a mock version of the app using Figma, before using a new framework called prereact to build the actual app, which was a great opportunity for us to become familiar with a different framework.

Features

Share your progress in quitting vaping with others and track your progress with this app. It will be represented as a plant growing - the more you quit, the more the plant will grow. You can also search for products to buy with the money you save, and find communities to join. The bigger the community, the more support you will have. You can also change your profile image, and all data will be saved in your local storage.

Prototype Frames

🏗️ This project only gone as far as a demo that presents the idea.

Technologies

Project is created with:

• preact version: 10.11.2
• preact signals version: 1.1.2

Setup

To get started, you will need to clone the repository and install the dependencies:

$ git clone https://github.com/GyoOh/coughie-app
$ cd coughie-app
$ npm install

How to start

Copy code yarn run dev The app will now be running at http://localhost:5173.