Overview
Studies have found many health problems linked to stress, such as obesity, heart disease, Alzheimer’s disease, diabetes, depression, and asthma. However, studies also suggest that stress management techniques will not only make you feel better, but might also have concrete health benefits.
Google Light is a mobile app that is combined with wearable technology to help people monitor and manage their stress.
Goals
-
To design an Android mobile app that helps users monitor and manage their mood and stress. The app should be in line with Material Design and other Google apps
-
To design a logo for Google Light that is also in line with the Google family
Role
UX/UI Designer
Tools
-
Sketch
-
Figma
-
InVision Studio
Timeline
4 weeks (80+ hours)
Google Light
Stress Management App
1. Research
Goals
To understand the market, the health impacts of stress, and to discover users’ frustrations, needs, and motivations
Process
Market Research, Competitive Analysis, User Interviews
Market Research
Studies have found many health problems linked to stress. Stress seems to worsen or increase the risk of conditions like obesity, heart disease, Alzheimer’s disease, diabetes, depression, gastrointestinal problems, and asthma. The Occupational Safety and Health Administration (OSHA) declared stress a hazard of the workplace, costing the American industry more than $300 billion annually. While the number of stress-related health problems and financial implications might be concerning, studies also suggest that stress management techniques will not only make you feel better, but might also have concrete health benefits.
Some ways to manage stress include:
-
Getting regular physical activity
-
Practicing relaxation techniques, such as deep breathing, meditation, or yoga
-
Keeping a sense of humor
-
Reframing the situation
-
Setting aside time for hobbies, such as reading a book or listening to music
Millennials and Gen Xers are most likely to say that they are stressed by work, money and job stability, while Boomers and Matures are more likely to be concerned with health issues affecting their families and themselves.
Competitive Analysis
After learning more about the health impacts of stress, I then looked into other competitors in the industry. Others in the stress management space had overlapping features, including fitness and sleep tracking, breathing and meditation exercises, and guidance and advice for coping with stress.
Interview Findings
I found 7 participants to interview and asked them about their experiences with stress and stress management. All the participants were stressed by work or their personal lives but in the moment, felt that they couldn’t do much about it except to concentrate on the task at hand and ignore the feeling of being overwhelmed by stress. Some participants mentioned experiencing side effects to their health because of stress, such as difficulty sleeping and weight gain from stress eating.
2. Define
Goals
To define the target user and identify their needs, motivations, and frustrations
Process
Empathy Map, User Persona, POV Statements and HMW Questions
Empathy Map
After conducting user interviews, I reviewed my notes and grouped participant comments into the following categories: doing, thinking & feeling, seeing, hearing, gains, and pains. From these groups, I was able to identify insights based on the majority of participant comments, which were used to form the user needs that would create the basis for the user persona.
Insights
-
Users are stressed from concurrent task overload.
-
Users find ways to belatedly unwind from the day’s earlier stressors.
-
Users have health issues caused by stress.
Needs
-
To have a better way to manage tasks.
-
To have ways to de-stress in the moment.
-
To manage stress for better health.
User Persona
The user persona, “Jessica,” was created based on the comments, insights, and needs gained from the user interviews. The user persona allows us to build empathy with target users throughout the design process.
POV Statements and HMW Questions
The user persona, “Jessica,” was created based on the comments, insights, and needs gained from the user interviews. The user persona allows us to build empathy with target users throughout the design process.
3. Ideation
Goals
To generate ideas to help the user accomplish user needs
Process
Brainstorming, Product Roadmap, Sitemap
Product Roadmap
I brainstormed answers to the how-might-we questions to come up with features that could potentially help the user with their needs. After brainstorming features that could potentially solve the user needs, I picked the ones that would potentially have the most impact and narrowed it down to 2-3 features per priority level.
Sitemap
I created a sitemap to map out the information architecture for the mobile app based on which features were to be included and their relationship to one another. The tabs were organized by primary function within the app.
4. Design
Goals
To visualize the various user processes and design mobile screens for the user experience for the tasks of viewing stress level trends, logging a stress journal entry, and managing tasks
Process
User Flow, Wireframe Sketches, Mid-Fidelity Wireframes and Prototype
User Flow
I created a user flow to map out the various paths a user can take to manage stress. The user flow includes decision-making steps in the process, which will affect the flow of the user.
Wireframe Sketches
I sketched out low-fidelity wireframes based off of the features that were chosen for the product roadmap. Creating low-fidelity sketches allowed me to quickly and roughly produce ideas, which could be iterated and refined through feedback from peers, to produce improved screens for the mid-fidelity wireframes.
Mid-Fidelity Wireframes and Prototype
I created mid-fidelity wireframes based off of the lo-fidelity wireframe sketches. I referenced Google’s Material Design Guidelines to try to stay as consistent with Google’s design as possible. I then linked all the wireframe screens together using InVision Studio to create the mid-fidelity prototype that would be used for usability testing.
5. Test and Iterate
Goals
To test the mid-fidelity prototype, make improvements to the prototype based on usability test findings and to finalize the prototype
Process
Usability Testing, Affinity Map, Branding, Hi-Fidelity Revisions
Usability Testing
Objectives
-
Test if users can complete the tasks without difficulty
-
Observe user’s overall impressions to the mobile app
-
Observe any pain points
-
Gather user feedback in regards to areas of delight or frustration
Participants
-
Number of participants: 5-8
-
Age range: 21-60
-
Archetype: “The Stress-er”
Scenario 1: You would like to analyze your stress trends and view stress management recommendations.
-
Task: You get notified that your stress levels have just peaked. Try to calm down in a moment of stress by practicing breathing exercises
-
Task: Look at trends in stress levels and add a daily journal entry for Saturday about an environmental stressor.
-
Task: View recommendations to manage stress.
Scenario 2: View to-do list and create a task.
-
Task: View to-do list and create a morning task.
Affinity Map
Notes from usability testing were sorted into groups to identify successes, patterns, and recurring comments. The insights gained from the usability tests were then used to form design recommendations that would be implemented to improve the final prototype. There were improvements needed regarding the stress data and a re-thinking of the usefulness and value of the to-do feature based on usability test findings, but the other features were used without significant issues and therefore didn’t need major changes. It’s always a great learning experience to observe the major design flaws and usability errors encountered during usability testing.
Insights
-
Users found some of the data on the Trends screen to be confusing.
-
Users wondered why the to-do feature was included.
-
Users would like entries to be easier to fill in.
-
Users expected to be able to tap on the card header to expand the info card.
Design Recommendations
-
Show data over time to allow user to see trends and provide info descriptions for unclear medical terminology.
-
Remove to-do feature and replace it with journal feature to make it more accessible.
-
Have info be easily selectable rather than typed in, where applicable.
-
Expand the touch target for info cards.
I re-designed the stress data screen to explain the unclear terminology such as Heart Rate Variability and present the data so that users can view their statistics over time, which allows the user to understand their progress. I also removed the to-do feature since there was feedback that it seemed odd to include this feature in the app and there are other apps that are able to better provide this function, such as Google Calendar. In place of the to-do feature, I focused more on journaling as a method for users to better manage their stress. Studies have shown that journaling has social, psychological, and physical health benefits. The journal feature provides an additional stress management technique in the app, along with breathing exercises and meditation.
Branding
I created a mood board to ensure I was staying consistent with Google’s design and looked for examples of Google’s interface, imagery, and branding. From there, I then created a style tile to have a reference of the UI design.
Hi-Fidelity Wireframes
After making changes to my design based on feedback from the usability tests, I applied the UI to create the hi-fidelity wireframes.
Hi-Fidelity Prototype
The design changes were incorporated into the design to create the final prototype.
Conclusion
This new mobile app design project had challenges, including designing a mobile app that could fit into an existing design system and deciding which features to design that would fit into the business and user goals. It was also challenging finding/creating the right assets that would fit seamlessly into the Google family. Usability testing revealed that some features weren’t as intuitive or useful as anticipated and validated the importance of performing usability tests. Overall, this project was a great learning experience for what it would be like to design a new product for an existing brand.
Next Steps
-
Continue to improve the prototype and ensure the new features fit seamlessly with the existing design
-
Create an organized deliverable for handoff that includes all the visual elements
-
Work with developers to implement the design
-
Track metrics for usability and engagement, such as time on task, task success rate, total time reading, and categories explored