Mental Health App
Summary
Role: I was the lead (and only) product designer creating an app from concept to release for for one of snapIoT’s health tech clients for both iOS and Android.
Team: I worked in an agile environment with a team of developers and a product manager along with weekly meetings with the client.
Project Background:
This app evaluates the effect of psychotropic drugs and mental health in adolescents and both adolescents and their caregivers to take surveys each day to evaluate the adolescent’s health during a clinical trial.
Note: Due to NDA, the client and additional details cannot be fully disclosed. Please contact me (yukaokina@gmail.com) if you’re interested in learning more.
Skills & Tools
User Research (Secondary)
Personas
User Flows
Guerilla Usability Testing
Wireframes, Mockups, Prototypes
AdobeXD
Objectives
Client Objectives
Determine adverse events or secondary effects of psychotropic medication among youth through app survey responses
Design Objectives
Liaise with client and collaborate with product managers to determine app features and requirements
Collaborate with developers to determine efficient task flows
Design app information architecture, visual style, layout, and flows
Satisfy and balance user and client requirements within technical limitations
Secondary User Research
Since I was not able contact the patients of the clinical trial that the app would be created for, I conducted secondary user research by learning more about adolescents with mental health and their relationship to their caregiver. Below are some of the qualitative research points that were insightful of target user behavior.
Takeaways
Cognition - attention deficit
Behavior - tendency towards frustration and compulsion
Emotions - mood swings, anger, guilt, shame, anxiety
Relationships with family and others can be often strained
Personas
These personas were created based on the target users, the adolescent and the caregiver, as described by the client and behavior understood through secondary research.
Style
Moodboard
This moodboard I created inspired tone and mood of the app and founded the basis of the style guide below.
Style Guide
Brand Adjectives: Motivating, Peaceful, Simple
Style Decisions:
Blue: Friendly, Calm, Responsible, Refreshing, Sadness, Peace, Reliability
Teal: Revitalizing, Rejuvenating, Open Communication, Clarity. Combines the calming properties of blue with the renewal qualities of green.
Yellow (Accent Color): Cheery, Warm.
App Use Cases
The following is a list of use cases given by the client that became the basis for the app requirements/functionality along with a list of features I suggested to improve the UX of the app.
Use Cases (Given by Client)
Set up a new account
Sync FitBit
Set a Pin
Invite Caregiver
View which surveys are due or upcoming
Take and complete surveys.
Return to incomplete surveys.
View survey progress
Log medication info
View Trial Progress
Reconnect FitBit
Features Offered to Client
Daily progress bars
Display upcoming surveys (Not approved)
Display Time estimate for surveys (Not approved)
Label incomplete surveys
Survey progress bars
Trial progress bars
Task Flow
The main tasks of the app consist of completing surveys. As an example, the following is the task flow for completing a medication survey.
Wireframes
The wireframes below show the screen flow for completing a medication survey.
Final Mockups
These are a sample of the final app screens that enables adolescents and caregivers to take surveys and log their medication.
Prototype
The video below demonstrates the medicine survey (one of the many surveys) in a HiFi prototype of the mental health app. This flow shows how a caregiver would use different methods to add medications the child is taking and indicate which ones the child has taken that day.
Prototype Task : Add your child’s medications: Anafranil and Triavil. Then, indicate which medications your child took today.
Add Anafranil by searching for the ingredient name (Note: Caregiver refers to some medications by ingredient rather than brand)
Add Triavil by searching for the brand name. If it cannot be found, add it manually.
Answer the survey question
Note: Some content on the screens are placeholders. Final content was later provided by the client for the live app.