Challenge
Translating the paper-based Tobacco Tactics CBT program into a mobile application. Tobacco Tactics, developed by Sonia A. Duffy, PhD., can be found here.
One challenge was to balance the needs of the platform without sacrificing any of the content and interaction design of Help4 Tobacco Cessation program.
Another challenge was to preserve a clinically proven paper-based approach while enhancing it with the capabilities that digital provides such as contextual and non-linear interactions, user generated metrics and visualizations, and on-demand availability.
Solution
First, I deconstructed and re-organized the paper based program so it could work in a non-linear digital experience. I consolidated the logs into one section, the therapy program into second section, and in-depth information about the condition into a separate section that would leave the user free to progress through the therapy and get contextual information.
Another area of refinement and consolidation was around the logging interaction. The initial program had three separate logs: a baseline log to track the baseline tobacco usage for comparison, a cravings log that tracked cravings and what might trigger them, and the actual quitting log where tobacco use was tracked starting at the user-selected ‘quit day’. I consolidated the three logs into a single log interaction, then refined it so it worked for both Help4 Tobacco Cessation and Help4 Insomnia.
Learn more about the Help4 Logs 〉
Concept Model
Below is the initial concept model for the Help4 Tobacco application
Personas
User Flows — High level
User Flows — Nicotine Replacement Therapy Quiz
Sitemap
Wireframes
There were about four iterations of wireframes for the tobacco app - early, middle, late, and a final version with a full visual treatment. For the final wireframes I worked with the visual designer.
Early Wireframes
The first iteration of the app had about 52 screens - roughly on par with the paper program. Below are the first 14 screens.
Middle Wireframes
The second iteration of the app was much more involved. At this stage the content started to become more organized into a coherent platform that could support a unified design system for both the tobacco and insomnia applications. An onboarding flow was added.
Late Wireframes
The third iteration of wireframes iterated on the log - streamlining and simplifying the interaction for the user. The log was divided into three distinct interactions: The Enter Data screen is where user data was captured and recorded. The Data Tracker is a trend level view where data analysis was displayed for users to view larger behavioral trends at a glance. The Daily View is where users could view and update or edit single entries based on what time and day they were recorded.
Final Wireframes
The final iteration of wireframes received a full visual treatment.
