CHALLENGE
Mental wellness is not a no-brainer. It requires acknowledging behavioral patterns to identify the areas of most need. I was tasked with the design of a Mood Tracker feature as part of a holistic mental wellness iOS app.
TRADE
Roles: UX Design, UX Research, UI Design
Tools: Sketch, Zeplin, Invision, LucidChart, Adobe CC
PROCESS
This is an example of one of the activities we completed to understand the main job to be done for the mood tracker.
Discovery: IdentifyING THE SOLUTION
We began the process by identifying who the users were, the main need of the stakeholders and the number one “job to be done.” As part of this discovery phase:
Hosted workshops to incite needs/wants/pains
Agreed on the personas
Facilitated user interviews & focus groups
Sent out targeted surveys to gain a deeper understanding
All outcomes were documented in a pdf discovery report.
This is an example of one of the many white boarding sessions we completed to understand the rough concept of the user flow.
IDEATION: DETERMINING A PATH
Understanding the problem that the mood tracker was attempting to solve gave us a foundation for what became the user story.
“As a user, I want to track my mood and some reasons behind that mood score, so that I can begin to understand what has an effect on me and eventually change poor habits.”
With this simple user story, we whiteboarded user flows. As we sketched out user flows, we determined that we should add a few subs-tasks to the user story to round out the feature.
This is an example of one of the rough wire frame flows I created to begin testing.
WIREFRAMES & PROTOTYPES: TeLLING THE STORY
Once we had the user story and basic user flow whiteboarded, I took these ideas into Sketch and began to wireframe the flow.
After the wireframes were created, I used InVision to link the screens together to create a clickable prototype. I used this prototype to gather initial feedback on the overall feature.
Iterate! Iterate! Iterate!
Through usability tests, we determined adjustments to be made to wireframes and prototypes to create the best user experience possible.
USABILITY TESTING: FINALIZING THE STORY
Through usability tests on UserTesting.com, we determined the feature met a level of satisfaction whereby we felt comfortable with the flow, the data collected and the overall experience.
UserTesting post-test questions rated the feature a 8/10 NPS score.
Iterate! Iterate! Iterate!
This is an example of elements pulled from the global design system.
HIGH FIDELITY: APPLYING THE DESIGN SYSTEM
The last step in design was to take the global design system and apply it to the wireframes to create a finalized high fidelity prototype.
Any additional interactions were animated via After Effects or Flinto.
Any additional annotations were documented in prep for development.
This is an example of a user case flow written for development. It includes the user flow, acceptance criteria and functional requirements which all linked off to independent stories for the type of work completed.
Development: Documentation and Assets
Using Azure DevOps, I documented the user story, acceptance criteria, functional requirements and any API work.
Using Zeplin, I prepared all development assets. All annotations and interaction animation mp4 were attached to the ticket.
MOOD TRACKER FEATURE
Example of diagram created in LucidChart to demonstrate user flow for mood tracker feature. Use can access data via a journal.
1. User prompted if they have time to check in.
2. If user agrees to track mood, user continues to tracker screen where they are given an instructional overlay on the first attempt.
3. Once user has selected a mood score by dragging finger vertically up or down the screen, user asked for additional information.
User can select a mood score from 10 to 1, 10 being highest and 1 being lowest. Each score is mapped to a color gradient like a mood ring.
OUTCOMES
Built a mood tracker feature as part of a larger mental wellness app on iOS
Saw wide use of feature, allowing for collection of data to begin developing the overall mental wellness index score
High NPS score of 8/10 on feature
User feedback interviews were overall all positive, stating that feature was both useful and fun
“I have rarely come across a talent as natural, intelligent, and intuitive as Michael Frazier. His background in film at Chapman University has not only given him a great eye for design, aesthetics, and user experience, but also a deep understanding of the prolonged process, mixed methods, and iterative collaboration it takes to truly make a product successful. Over the past year of working with Michael, I've come to respect his strategic and tactical insight and experience as much as his knowledge and expertise in interaction design. He is one of the best designers I've had the pleasure to work with. Michael is also just someone you feel lucky to work with every day! He is hard-working, committed, and kind. He has my highest recommendation.”
– Dr. Chelsea Shields