Lindsey Wong
mockups copy 2.png

Google Light

Stress Management App

mockups+copy+4.jpg

Google Light

Stress Management App

Role: UX/UI Designer
Team: Self-directed with feedback from peers and mentor
Tools: Sketch, Figma, InVision Studio
Timeline: 4 weeks

Challenge

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.

This was a speculative project.

Objectives

  • 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

Outcome

Google Light combines wearable technology with a mobile app that helps people monitor and manage their stress.

google process.jpg

  1. Research

goals.png

To understand the market, the health impacts of stress, and to discover users’ frustrations, needs, and motivations


process.png

Market Research, Competitive Analysis, Interviews

Market Research

I researched online to learn more about the health impacts of stress, methods to manage stress, and demographics of those at risk for stress-related health problems.

Health Impacts of Stress

  • Depression and anxiety: Chronic stress is connected to higher rates of depression and anxiety.

  • Gastrointestinal problems: Although stress doesn’t cause ulcers, it can make them worse. Stress is also a common factor in many other GI conditions, such as chronic heartburn (or gastroesophageal reflux disease, GERD) and irritable bowel syndrome(IBS).

  • Alzheimer’s disease: One animal study found that stress might worsen Alzheimer's disease, causing its brain lesions to form more quickly.

  • Accelerated aging: One study compared the DNA of mothers who were under high stress with women who were not. Stress seemed to accelerate aging about 9 to 17 additional years.

  • Premature death: A study found that elderly caregivers who were under high stress from taking care of their spouses had a 63% higher rate of death than people their age who were not caregivers.

  • Obesity: People with high stress seem to store excess fat in the belly, which seems to pose greater health risks than fat elsewhere in the body.

  • Heart disease: Doctors know that sudden emotional stress can be a trigger for serious cardiac problems, including heart attacks.

  • Asthma: Many studies have shown that stress can exacerbate asthma.

  • Diabetes: Stress can worsen diabetes by increasing the likelihood of bad behaviors, such as unhealthy eating and excessive drinking, and by raising the glucose levels of people with type 2 diabetes directly.

  • Headaches: Stress is considered one of the most common triggers for headaches -- not just tension headaches, but migraines as well.

Ways to Manage Stress

  1. Getting regular physical activity

  2. Practicing relaxation techniques, such as deep breathing, meditation, yoga, tai chi or massage

  3. Keeping a sense of humor

  4. Spending time with family and friends

  5. Setting aside time for hobbies, such as reading a book or listening to music

  6. Breathing deeply

  7. Focus on the moment

  8. Reframe the situation

Demographics

  • 43% of all adults suffer adverse health effects from stress.

  • 75% to 90% of all doctor's office visits are for stress-related ailments and complaints.

  • Stress can play a part in problems such as headaches, high blood pressure, heart problems, diabetes, skin conditions, asthma, arthritis, depression, and anxiety.

  • The Occupational Safety and Health Administration (OSHA) declared stress a hazard of the workplace. Stress costs American industry more than $300 billion annually.

  • The lifetime prevalence of an emotional disorder is more than 50%, often due to chronic, untreated stress reactions.

Sources of Stress with Age

  • 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. Competitive analysis demonstrated how others in the healthcare space were using wearable technology to track stress and provide stress management.

Interviews

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.png

To define the target user and identify their needs, motivations, and frustrations

process.png

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

  1. Users are stressed from concurrent task overload.

  2. Users find ways to belatedly unwind from the day’s earlier stressors.

  3. Users have health issues caused by stress.

Needs

  1. To have a better way to manage tasks.

  2. To have ways to de-stress in the moment.

  3. 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

I created point-of-view statements to define Jessica’s user needs from my point-of-view. From there, I created how-might-we questions that would form the basis for brainstorming and ideating design features.


3. Ideation and Strategy

goals.png

To generate ideas to help the user accomplish user needs

process.png

Brainstorming, Product Roadmap, Sitemap

Brainstorming

I brainstormed for about 10 minutes for each how-might-we question to come up with features that could potentially help the user with their needs. They may not necessarily be possible or easily implemented, but brainstorming allowed me to think of possible features to include for the product roadmap.

Product Roadmap

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.


4. Design

goals.png

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.png

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

goals.png

To test the mid-fidelity prototype and gain feedback for design improvements

process.png

Usability Testing

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.


6. Iterate

goals.png

To make improvements to the prototype based on usability test findings and to finalize the prototype

process.png

Affinity Map, Branding, Hi-Fidelity Revisions

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.

affinity+map+for+case+study.jpg

Insights

  1. Users found some of the data on the Trends screen to be confusing.

  2. Users wondered why the to-do feature was included.

  3. Users would like entries to be easier to fill in.

  4. Users expected to be able to tap on the card header to expand the info card.

Design Recommendations

  1. Show data over time to allow user to see trends and provide info descriptions for unclear medical terminology.

  2. Remove to-do feature and replace it with journal feature to make it more accessible.

  3. Have info be easily selectable rather than typed in, where applicable.

  4. 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.

google journal.gif

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.

Final Prototype

The design changes were incorporated into the design to create the final prototype.

mockups+copy+transparent.jpg

Having trouble viewing the prototype? Try opening the link in an in-cognito window :)


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