Namrata Kannan

User Experience & Design

Puff: Breathe Healthy

This project was an assignment as part of our course Programming User Interfaces. I designed the mobile application screens and prototyped two screens / functionalities in Xcode, iOS.

  • Role: Interaction Design/Prototyping
  • Class: Programming User Interfaces
  • Year: 2013

Puff iPhone App
Puff: iPhone App

Design Opportunity: Helping smokers quit

We were given the prompt to design and prototype a iPhone app for helping smokers define a serious plan to quit smoking. The application was supposed to be persuasive and of course easy to use.

Design Process: Encouraging healthy habits

Informal interviews

I began by researching and trying to understand the problems smokers face while trying to quit. This involved secondary research and talking to former smokers.

Competitive Analysis

This was followed by a competitive analysis of existing applications which encourage users to quit smoking. I also looked at motivation and planning related applications which were not necessarily related to smoking.

Important Insights

Smoking has shown to affect one’s eating habits and users who quit tend to put on weight. Most smokers choose to smoke after or before meal times and as a means of taking a break. I wanted my application to help the user be more conscious of their existing habits; which would help them quit in the long run.


I started with low fidelity sketches and wireframes (Balsamiq) to flesh out what functionalities I envisioned in my application.

Puff Wireframes

  1. Screen 1: Welcome/Login
    Screen Purpose: Lets the user enter their name, date of quitting (by default it is the current day) and picture.

  2. Screen 2: Dashboard
    Screen Purpose: The screen displays a motivational quote on the top. The user's uploaded picture fades or brightens, depending on their progress, providing immediate feedback. User are notified the number of smoke free days and celebrate them by buying gifts. They can add buddies (smokers / non-smokers) and send them gifts too.

  3. Screen 3: Planner
    Screen Purpose: The user can see their timeline for the day and add events / notes / alarms. These are visible when the user taps the bullet on the timeline. The three important meals are on the timeline to help user plan their meals and encourage them to eat healthy.

  4. Screen 4: Tracker
    Screen Purpose: The user enters the approximate number of smokes they have had in a day using the slider. The approximate number of smokes for the week are auto-calculated but can be edited by the user.

User Testing/Hi-Fidelity Mockups

I decided to drop the social angle and narrowed in on the planning and tracking aspects of the application. Why? Most smokers I spoke to were intrigued by the idea of planning their day around meals and thought it was more important to see and record how much they were smoking. I proceeded to create hi-fi prototypes of my application. Further testing resulted in further changes as documented in these slides

Design Solution: PUFF

Puff is an iPhone application that helps you track your smoking habit and encourages one to plan their day.

Puff Screens

The dashboard showcases your progress. Too many smokes and you can see you image disappear gradually. It also shows you the money you are saving and increase in lifespan. These details help you monitor your progress quickly.

Puff Screens

The timeline of the day helps plan your day. Add notes and alarms to remind yourself to eat healthy and stay smoke free. The tracker helps you enter how many smokes you have had. The tracker changed from a slider to a stepper in the final prototype for more accurate data entry.Below are screenshots of the application in XCode.

Xcode Screenshots