NCI QuitStart App
Check-in Screen design
Animation of the final product
Smokefree is a free mobile app to help individuals quit smoking. After launch an additional time-triggered screen was implemented for users to input data regarding their quit journey so the app could acquire data to provide a better experience.
The problem: The initial check-in prototype screen scored poorly with user testing. Users found the screen to be cluttered and overwhelming to use.
The solution: A design more in line with current usability trends that utilized micro-interactions to aid the user in inputting data. We reduced the amount of emotion options from 7 to 5 to not overwhelm the user.
The designed needed allow for a wide range of input values, from occasional social smokers, to multi-pack-a-day smokers. Keeping the UI design clear and concise would be a challenge
I worked with a designer to craft the emotion icons, and ensure that they were created with pixel-perfect design practices. I pitched the project team adding subtle animations to the emotions icons, and they agreed that adding animation would enhance the user experience.
The process of implementing the animation involved working very closely with the developer. This would be our first project using JSON animations and the bodymovin UI toolkit. I worked closely with the developer through the production to create a hand-off pipeline that could be scaled to accommodate for larger app projects in the future.
Concept Animation
Our first prototype animation divided each of the three inputs section into three different screens. It also added a sliding scale for how strong the user was feeling each emotion.
The mood scale was determined to not add value to the user experience, and would be removed in future iterations. A single screen with three sections was determined to be the most simple presentation for the user.
Prototype Animation
The design was revised to be a single screen input with three sections for clarity.
A sliding bar would allow the user to input craving strength, a text input to allow for the maximum amount of range in user cigarette consumption.
The mood icons were each given micro-interactions to support the user experience.
During the review process concerns were raised that certain elements were missing for a clear user experience. One of which was the need and placement of a skip button.
Our team wasn't sure which would more clear for the user, an X button or a skip button. Usability testing was conducted with variations on the placement of each button design, as well as the usability of the design as a whole.
Asset Animation
Extensive use was made of the 'Zepplin' application to export pre-made font and color style-sheets with pre-defined classes ready for the developer to implement. We also used the AfterEffects plugin 'Inspector spacetime' in order to give the developer the most accurate animation settings. 'Inspector spacetime' allowed me to pass the numerical animation data from AfterEffects to the programmer. This allowed the programmer to code the animations so that they were identical to the AfterEffects prototype animation regardless of the device.
Extensive pipeline troubleshooting was done at this stage to ensure the programmer could clearly navigated to the most recent assets, and named in a way the allowed for easy code implementation. Our intent was to stress test the pipeline as much as possible in order to work through as many issues as possible before utilizing the methods on a full app design.
Live Product
The final product had some tweaks done during further user testing and live feedback.
A fade animation was added before each section animated onscreen to reduced screen clutter as the user input data.
Color tweaks were also made to the slider bar and numbers input to reduce
user eye-strain and from high contrast elements.
The final production is available on google Play/iOS store
Thank you for checking out my project!
