App for quit smoking. FunQuit stands out from other quit smoking apps because it's built based on the concept of "Gamification". Use of game design elements in non-game contexts.

FunQuit makes quit smoking fun and rewarding.

FunQuit

Project Background

Universe

Age 26 - 32

International Students who want to quit smoking

Challenge

Quit smoking is a serious topic. Existing apps are bored and too serious for my Universe group.

Solution

Based on the concept of Gamification, use of game design elements increase motivation and engagement.

Quit smoking become a fun thing to do, and rewarding.

App Building Stages

Stage 1: Market Research

Stage 2: Benchmarking

Stage 3: Primary concept of the app

Stage 4: Wireframe sketches

Stage 5: User Flow and lo-fidelity wireframes

Stage 6: Mood Board

Stage 7: UI design and high-fidelity wireframes

Stage 8: Design Iterations

Stage 9: Feedback from users

Stage 1 - Market Research

Interview, Survey and Focus Group

Goal: Try to find out what the bad habit is, why did it occur, why wanted to quit that bad habit and how to help them.

I did an Interview with one of my app potential users. He wanted to quit smoking. Reasons to smoke were stress and feeling bored. Distraction would definitely help him not to smoke. He likes playing video games when feeling bored and stressful. Health concern made him the alarm to quit smoking.

To understand more about my Universe, I sent a Survey Form out and I received 10 responses. Now I know more information about them such as what style they like, what color they like and what they do in their free time.

I then organized a Focus Group, discussion was on the topic of why people smoke and how to help them quit smoking.

Findings from the Market Research

From the Market Research, my Universe with an average age of 26, they like brands like Apple, Nike and Vans, these are cool stuff. They like blue color, could be sky blue or dark blue. They like music, movies and playing online games. Those who smoke are because of stress and feeling bored. They wanted to quit smoking because it's time to care their health.

During the quitting process, they like to stay connected with the community to get support. Distraction, being engaged into some other interests definitely help them to forget about smoking.

Building Empathy

Using the quantitative and qualitative data from interviews and survey results, I created a Persona to better empathize with my main users, understand their pain points so to accommodate their needs.

Stage 2 - Benchmarking

Get the best out of other apps to apply to my app, I compared 4 apps based on the Laws of UX/UI. I made a comparison between Shazam, Pocket Comics, YouTube and Instagram.

I took all the good practices from benchmarking the 4 apps, I then get the idea on what my app should be.

Stage 3 - Primary Concept of the App

A regular quit smoking app is too boring for my universe. To increase their motivation and engagement on such a boring and serious activity, I decided to build an app with game elements based on the concept of "Gamification". Design interface with an online game vibe.

Stage 4 - Wireframe sketches

I did some wireframe sketches and think it through the user flow of my app.

I installed some online game apps aimed to try out their Sign Up process. I had the preliminary ideas of how a user go through the Sign Up process and what kind of functions my app should have. Apparently, this logical thinking process was real fun!

Stage 5 - User Flow & Lo-fi wireframes

I came up with a user flow for the Sign Up process. Questions that I designed were actually for different purposes. They had the functionality of tracking record, sending notifications as well as a pop up message for the loading pages.

Low fidelity wireframes

Stage 6 - Mood Board

Came to the interface design stage, I wanted it to be full of game vibe. I like the online game "Among Us", I want that vibe.

From the Survey, I know that my Universe like blue. I picked the blue green tone as my app's main color platte. I choose the font Mitr for the logo, it looks fun. Gemunu Libre font for the text has that online game vibe. Icons basically use those cute, comic ones make it more relax and causal. Brand communication I picked those cool phrases, my Universe like cool stuff.

Stage 7 - High-fi Wireframes

Finally I created the high-fidelity wireframes by using Figma, showing the vibe as well as all the functions of my app. I also made the mock ups.

Stage 8 - Design Iterations

I downloaded Figma app on my own mobile and did iterations when I go along. Iterations seem a never end action but that was definitely a fun thing to do. I also need to make sure that all CTA buttons work, their size and the distance. As well icons have to be understandable.

Stage 9 - Feedback from users

I asked my Universe to try out my app and gladly I received their positive feedback. They like the vibe as well as the functions of it.

Quitters think that my app is fun to play around with and also they like to use the tracking function. They will definitely download my app when they are bored and stressed, when they are tempted by the cigarette devils.

For the game part, I will find a game designer to collaborate with, who can design the best fun games for my Universe.