Don’t Fret, Just Sweat- UX/UI Case Study of a Stress Management App
--
Stress is a part of everyone’s day to day life. In fact, stress is useful in medium amounts because it allows for growth in the face of opposition. However, when stress becomes too extreme and/or constant it can take a huge toll on the mental and physical wellbeing of a person. My goal was to design an app that would help people regulate and cope with the stress in their lives when it becomes too much to handle on their own.
UX
Research
The first thing I did was research. I wanted to learn what things were stressing people out, how they coped with the stress, and if there were ways I could help people improve their coping mechanisms and reduce their overall stress levels. For this I constructed a lean survey canvas.
The lean survey canvas let me break down the steps of attaining this information. First I needed to figure out what I wanted to learn and what information was already available to me. Then I thought of ways to reach the people so I can obtain the information I needed and which groups of people to focus on. Lastly, I developed a series of questions that would potentially be in my survey.
After constructing my survey and reviewing the responses, I gained some valuable insights. One of these insights was the ways people typically cope with stress: distancing oneself from the stressor, distracting oneself, talking it out, exercise, eating/snacking, listening to music, etc. The following graph shows this in more detail.
However, after conducting interviews, I discovered the best reliever of stress for most people was exercise.
“Honestly, exercise is the best relief for me.” -Brett
“I jog every day.” -Willian
This was shocking because according to my survey of about 150 people, about 2/3 exercised less than three times a week.
This was when I decided to design my app to help people start exercising more frequently and using exercise as a stress management tool. They will be able to track their stress levels along with their exercise activity and see the correlation between the two. I also wanted to make exercising fun and less of a chore, which will help people stay motivated and stick to their workout regimen.
Market Analysis
I researched other exercise and stress management apps, such as Pacifica and Calm, along with some social exercise apps, such as ClassPass and Strava. From the research a developed a competitive analysis chart that showed what each app had to offer.
After analyzing the competitive analysis, I started to brainstorm ideas of what my app could have that would set it apart from the general market, and I found that a “buddy” system to keep people motivated to exercise is something not widely seen in the market.
Ideation
From here I started thinking about what attributes my app should have. For this I used the MOSCOW Method, which lets me group attributes into 4 categories: must have, should have, could have, and won’t have.
The main attributes that I knew my app should have are a status tracker to track people’s stress levels and exercise activity, a way to contact their life coach if they have one, and a way for them to connect with other users to start working out (a matching feature). Some features I thought my app should have are a match separation by gender option in case people feel more comfortable working out with someone of the same gender, a calendar to help schedule workouts for the week integrated with your phone calendar and/or Google calendar, group workouts, and an in-app coaching feature to help users learn new workouts and make sure they are using correct form with the workouts they already know.
Prototyping
Now, I got to start prototyping. For my lo-fi prototype I used pencil and paper to sketch out some possible screens.
While drawing out my wireframes, however, I got too excited about the matching feature and focused too much time on the onboarding process of the app, so I took a chill pill. Then I began to refine my wireframes in my mid-fi sketches while incorporating the results from my usability testing into my redesign, as well.
60% of users thought this button meant they would start exercising right away. So I got rid of it. Instead, I redesigned the home screen to have some quick access information for stress relief and added an “I’m stressed!” button in the bottom right thumb zone for quick help in stressful situations. I also added a home button in the footer (the home symbol at the top of the lo-fi wireframe was just a placeholder for me to know that it was the home page). Lastly, I added a Journal section, and instead of having a Coach section, I added the community workout section. I decided that the Coach section didn’t need it’s own tab and could be put into the hamburger menu because it would essentially be contact information for the coach, and messages from the coach could be received and replied to in the messages section.
The next change came in the community section, specifically how to connect with other users. During my usability testing, 40% of users felt the connect and message buttons were redundant. The text box for the message could also be on the same screen as the profile reducing the number of clicks for the user. Now that I made my changes from my usability testing, I shifted my focus to redesigning my app for a returning user.
I tested my mid-fi as well, and these were my findings.
60% of users wanted next workout info on the home page and thought the home page was “busy”. Therefore, I added the “Your Upcoming Workouts” scroll list and decided to remove the “I’m stressed!” button. Instead, users will be able to create a new journal entry that will let them write down their stress levels, stressors, and possible solutions in any given situation in the Journal section.
80% of users wanted a more chat-like interface for the messages section rather than an email-like interface, so that’s what I gave ‘em! Alright, moving on…
Lastly, in the Journal section, 80% of users felt like they had to send their entry to their coach and would not be able to just save it. To correct this, I switched the “Save” and “Send to Coach” buttons. 40% of users also wanted to do the toggle first because that was the easiest task, so I moved it to the top.
Now that you’ve gotten a glimpse into my Hi-Fi design, let me show you how I got there.
UI
The first thing I did was come up with the brand attributes I wanted my app to portray. I settled on 4attributes: comradery, liberation, perseverance, and energy. Based on these attributes, I developed a mood board that would reflect the branding.
As I began to design my Hi-Fi wireframes, I composed a Style Guide for developers to use to start making some of the elements of my app.
Now the moment you’ve all been waiting for…a short film.
Next Steps
In the future, I would like to add a calendar section for users to schedule their workouts with other users, which will sync with their Google calendars and automatically find ideal openings in their schedule for them to workout. I would also like to add a group workout feature where users can create groups that other users can join, rather than keeping the app focused solely on one-on-one activities. Finally, I would like to implement gym membership discounts with local gyms, which could give users more incentive to join a gym and exercise more frequently.
Takeaways
I would like to delve more into what specifically causes people stress at work (even though I already got a few insights- unpredictable nuances, procrastination, multiple things being thrown at them at once, etc.). I would like to also learn what causes people the most stress, so I can focus on the most significant stressor for the majority of people.
That’s it for now! Until next time, Peace, Love and Empathy!
