Two smartphones displaying a quit smoking tracking app with charts and logging features.

Tracking and discouraging your smoking habit

Quit Tracker is a smoking cessation application specialising in its namesake: tracking your habits and providing smokers with support to quit altogether.

Try the Prototype

Introduction

Background

Smoking remains deeply ingrained in modern culture, and many individuals continue to struggle with quitting despite the availability of various methods. Governments are investing in mobile apps and enforcing restrictions worldwide to prevent future generations from starting the habit.

Project goals

The platform must have a way to track daily smoking habits

Users need a way to access support when going through a craving

Completion time

9 weeks

My role

UX/UI, Branding, Research

Tools

Colorful geometric shapes arranged on a black background resembling a stylized letter 'F'.
Adobe Photoshop logo on a dark background.

The Solution

Through secondary research, I angled my design focus into an application that focuses on data collection and tracking while adapting the most successful features discovered in interviews.

Research

Research Objectives

1. Identify and understand the demographic for our cessation app

2. Understand how people will comfortably use our service

4. Determine how users quit using these apps

Secondary Research

I researched both smoking cessation apps and general habit trackers to understand their features and visual design expectations.

Red background with a white infinity symbol.

Very easy to read iconography

Green check mark

Straight forward habit assignment

Green check mark in black circle

Very limited featureset

Red X mark on a black background
Logo with a stylized check mark and the words 'quitsure'

Progress encouraged completing modules like a course

Green check mark on a black background

Chat for help

Green checkmark on black background

No community

Red X mark on black background
Magnifying glass icon on a blue background.

Community section for encouragement

Green check mark on a black circular background

Detailed statistics

Green checkmark on a black background

Less features than competition

Red X mark on a black background

Others

Habitica logo with a purple background and a white rabbit icon.
Colorful grid of squares in purple, green, red, and orange on a white background.

User Interviews

I interviewed 6 smokers.

5 participants have used cessation apps in the past.

1 participant had no interest in quitting.

1 participant found success through a competitor.

Key quotes

Here are some notable quotes from the interviews

Quit Genius motivated me, too intense. Smoke free easier to use but didnt keep me interested

How effective were smoking cessation apps?

Quitnow, tracks progress, too frequesnt notifications, too much generic advise

Quitnow somewhat helpful, tracks progress, not enough personalisation. smoke free was too generic

Would you be inclined to open an app regularly to track your smoking habit?

If I could see measurable progress, like how many days ive gone without smoking, yes

Yes, especially if its easy to use and gives me daily updates

Yes I checked QuitSure app daily to track my milestones

What would incentivise you to regularly use an app and stick to quitting your habit?

Seeing my progress daily, earning rewards, and getting support through the app were all motivating factors for me

Seeing my progress daily,and getting support

Making Order from Chaos

A colorful infographic with sections on Motivation, Challenges, App usage and Effectiveness, Motivational Features, and Incentives to Stick with the App, each containing sticky notes with text on various subtopics.

We discovered that huge motivators to get people on the app were stats and rewards, but to retain users we need a way to hold our smokers accountable for their cessation journey.

Who Are Our Users?

These two personas capture the needs of our quitting smokers we collected throughout our research, making our life so much easier designing later.

Point Of View Statements

★ I would like to explore ways to help struggling smokers keep on target and quit the habit because having a craving with no outlet for support can cause a relapse.

★ I would like to improve the online cessation space by providing smokers a way to accurately track their habit and define their actionable steps moving forward because a big reason people go to these apps is to keep on top of stats.

Profile card for Richard, a 24-year-old delivery driver with 5 years of smoking experience. It includes his photo and details about his bio, work, pressures, needs, and frustrations related to smoking cessation and health.
Profile card for Jennifer, a 37-year-old bank teller and smoker for 16 years. The card includes her photo and bio describing her stress from work and ritualistic habits. It outlines her pressures, including health risks, doctor visits, peers and family, and finance. Her needs are accountability, mental health management, stress relief exercises, and mindfulness. Frustrations include lack of support, motivational quotes, personalized goals, and work-related cravings.

How Might We Questions

➢ How might we create a safe environment to help recovering smokers quit?

➢ How might we limit potential triggers when building our design?

➢ How might we help keep users motivated to keep using our app during their cessation period?

➢  How might we assist those who are motivated by stats and numerical results?

➢  How might we provide a space to aid those who are struggling to quit?

The Vision

A flowchart diagram displaying the structure of a mobile app's user interface, including sections for Home Screen, Settings, Main Navigation, and Emergency Help, with subsections for app features and options for user support.
Flowchart diagrams illustrating processes for tracking smoking habits and accessing personalized support for craving management, with key and decision points.

The original site map has some inconsistencies with the final design you will see later, after the iteration process.

These are the two major features I decided to implement into the design.

Logging a cigarette should be accessible almost anywhere on the app, but I later had a change of heart over some modernizing design decisions.

Asking for help shouldn’t be demonstrated in just one feature so I decided to design two separate features for this action.

Ideate

Paper Wireframes

Hand-drawn sketches of a mobile app interface for logging a smoke from home, showing two screens: an overlay screen with a trigger, cig count, timestamp, and a button to change the log to a contribution; and a confirmation screen with a timestamp, trigger, cig count, and cancel/confirm buttons.
A hand-drawn mobile app wireframe sketch with notes, showing a header, milestone progress bars, personal goal setting, profile icon, dashboard, and navigation buttons labeled 'home' and 'milestone tracker.'
Hand-drawn sketches on graph paper illustrating app features, with notes in pink and black ink about tips, crowds, support chat, and help during a crossing.
Hand-drawn sketch of a mobile app interface with notes on tips for the screen, including areas for a title, educational content, suggestions for exercises, and navigation buttons.

Mid-Fidelity Wireframing

A mobile app interface for tracking cigarette smoking and quitting. Contains screens for logging cigarettes, viewing statistics, communities, tips, and support chat. Displays progress, goals, and motivational messages.

This is the first iteration of the mid-fi designs. I really tried to only highlight the user flows with this first version.

Time For A Test

Black background with a white circle in the center.

3 participants joined the usability test

Goals

Navigation and exploration of the application makes sense within the 10-min allotted timeframe.

A red circle inside a black square, with a small white dot at the top.

Key features are straightforward and intuitive. (Participants will not need to ask questions about features that are intuitive and feel familiar.)

Famous image of a red circle with a black background, representing the target symbol from the Netflix series 'Squid Game'.

The layout is pleasant and assists in the navigation of the app. 

Close-up of a black microphone with a red dot in the center.

Key Results

A red X symbol inside a red circle on a black background.

Confusion completing tasks and requires tutorial

2 users mentioned it takes too many clicks to log a cigarette

Clock asset is too big and distracting and looks “dated”

Blue checkmark inside a circle on a black background.

All users completed the requested tasks within the time give

All users reacted positively to the features

Mid-Fidelity Iteration

Storyboard of a mobile app interface related to smoking cessation, including screens for settings, motivation, tips and advice, help articles, logging cigarette consumption, onboarding, tutorials, and progress tracking.

Design

Brand Design

Brand values: Promote recovery, Calm vibe, Stats and Actionability

Colour?

Five square tiles arranged in a row, each with a different pastel color: green, light blue, blue, purple, and light purple.

Purple is the colour of recovery, courage and compassion, so I really wanted to get a nice deep, readable purple for our primary colour.

As you can see, the palette is large and varied to begin with. This changes as the project continues, but I wanted to keep an open mind thinking about greens for growth and acceptance with blues for learning and support.

Scrappy Boards

A digital infographic illustrating core values of accessible, intuitive, and proactive design. It features color swatches, mobile app screenshots with themes for health, medical, and community services, and illustrations representing engagement and support.

I created a mood board to set my thoughts and ideas of the brand identity onto a clear plane.

Logo Design

When it came to logo’s I tried to incorporate a lot of different themes to help shape as iconic and unique an image as possible.

Hand-drawn notes on a whiteboard about quitting smoking, including potential names, themes like time, stats, smoking, quitting habits, community, and health, with various doodles and icons such as cigarettes, a clock, a graph, and a health symbol.
Hand-drawn sketches of various objects on gridded paper, including a coffee cup, a toilet, a present, a trash can, a wastebasket, a banned symbol, and some question marks.

These are the 3 core designs I digitized.

They encompass all the values I want to portray in our app.

Set of icons showing a pie chart, wavy lines, and the letter 'i' in purple, black, and small sizes.

Components and Styles

You may find some discrepancies with the first iterations and this style tile. I went back to this and updated it for ease of use, for some of the sheet.

A digital design dashboard with sections labeled Logo, Quit Tracker, Component Styles, Typography, and Iconography. The logo section has a purple and black icon of a person exiting, with the text "Quit Tracker" in multiple styles. The Quit Tracker section repeats the logo text in black. The Component Styles section features a line chart, toggle switches, a user feedback bar, and a chat box. The Typography section displays font samples from Nunito and PT Sans with different sizes and weights. The Iconography section depicts icons for home, motivation, overview, log a cigarette, quick, and other symbols. Various color swatches and code labels are at the bottom.

High Fidelity Designs

Mobile app screen displaying quit smoking progress, celebrating one week smoke-free, with a graph tracking weekly smoking average.
Screenshot of a chat interface with a support bot named SupporTron. The conversation shows the user expressing they are out with friends and craving a smoke, asking for help.
Mobile app screen from QuiTime with tips on managing cravings after a meal, showing an illustration of a woman and man sitting at a table, drinking and talking.
Mobile app screen showing quit smoking progress with 3 days, 16 hours, and 24 minutes since last cigarette. Includes a community message, a log cigarette section, and navigation icons at the bottom.
Mobile app screen showing QuitTime app settings for notifications, with toggle switches for Log Reminder, Morning Motivators, and Midday Motivators, and navigation menu at the bottom.

Utilizing the adaptive wireframes and my component set, the design was assembled as such to create a smooth, comprehensive and interactive experience for learners.

Screens Completed include:

Onboarding

A green checkmark on a black background.

Tutorial

Green checkmark on a black background

Home

Green check mark icon on black background

Menu’s to access all user flow features

Green checkmark on black background

Notification settings

Green check mark icon on a black background.

Hamburger Menu

Green check mark icon

3 Tips and Advice articles

Green check mark icon on black background

Instant messenger demonstration

Green check mark on a black background

Log a cigarette

Green checkmark icon on black background

Interaction Design

A detailed wireframe storyboard visualizing a mobile app user flow, with multiple screens and annotations showing onboarding, settings, home, log, tips, and chat features.

Before the design can be sent to potential users for testing, it needs to be responsive and feel as closely as the final product should feel.

Quit Tracker was built with the understanding that a user should be able to log their stats intuitively and immediately after getting acquainted with the system.

We have so many moving parts in the second image because I want to immerse the testers in the prototype and feel like they are trying an app that will help them beat their habit right out of the gate.

A complex digital flowchart or wireframe diagram with interconnected components, screens, and workflows. The diagram uses various colors, including purple, blue, gray, and black, and contains labels and icons representing different pages or steps in a digital or web application development process.

Iterations

Usability testing

Number of Participants

Black background with a white circle in the center

3

Goals

Gain as much insight as possible to make positive changes to the design

Red circle centered on a black background.

Ask questions that lead to measurable outcomes

A red circle with a black musical note symbol on a white background.

Key Results

2 users found the hamburger menu too busy

All users completed the requested tasks within the time given

A blue check mark inside a circle.
An encircled red diagonal cross symbol on a black background.

All users noted key improvements in the experience design of the Log a Cigarette function.

Accessibility concerns for the icons (colours)

Tips and advice felt too big for some users

Improvements

Core Improvements

The improvements were so numerous and drastic from the testing session, here is a short breakdown of the major changes:

  • The brand name and logo were changed from QuiTime to Quit Tracker

  • Icons changed to be consistent throughout (theme, size, colour, density)

  • Primary colour usage stripped back to necessity only

  • Tips no longer have a separate page for feedback

  • Tips no longer larger than a single screen size

  • All modals look consistent

  • Float buttons adjusted

  • Bottom menu total revamped for greater accessibility

  • Onboarding was shortened and left more concise

  • Top bar revamped to only be fully visible when needed

  • Every UI component now consistent with one another

  • Weight of some UI elements adjusted accordingly

Screenshots of three mobile app screens discussing tips and advice for quitting alcohol and managing cravings, with illustrations of people and feedback options.
A sequence of six smartphone screens displaying a smoking cessation app interface, including features like quick assistance, last clock-in timer, log a cigarette, and navigation tabs at the bottom.

Final Thoughts

What I Learned

Form with Function

When designing a product (or features for one), the look is a valuable as the feel of said product. With Quit Tracker, I had so much feedback on the look of the product because my efforts were not equal for both properties. When iterating, I learnt to solve this issue.

Two smartphones displaying health and support app screens. One shows a chat conversation about quitting smoking, and the other shows a success message for logging a quit attempt with a graph of smoking data.

Observation is sometimes more valuable

During testing, I noticed participants actions and how they answered questions didn’t really match up. One participant was overjoyed how easy the process was and rated my Tips and Advice of navigation highly yet had no clue how to get back to the menu and clicked around frantically.

The project showed me I can use someone’s actions to improve a product and not only their words.

An iPhone displaying a quit smoking tracker app with statistics, progress, and weekly overview on a black background.

This was my big jump from working with a real client to working on a personal project and applying that knowledge.

Want To Hear More About Quit Tracker?

CONTACT ME