BreakSpace
Designing a new mental health app that helps you prioritize taking the breaks you need by offering activities and break time reminders.
Contributors
Katie Struk
Hannah Bland
Joseth Rivas
Natalie Aaronson
Project Timeline
3 weeks
Week 1: Ideation, User Research, Wireframing, Lofi Prototyping
Week 2: User testing, HiFi prototype, FE Development
Week 3: Additional user testing of coded prototype and presentation of final results.
Context
This was a student team project in which we set out to identify a concern we felt passionate about researching and developing solutions for. Everyone on the team has struggled with overworking themselves so we sought to develop a new app that would help people prioritize taking breaks throughout the day.
My Role
Research user interviews
Collaborative rapid ideation of product concept
Collaborative creation of user flow
Prototype both lofi and hifi
Ui design- color palettes, icons, layout
Front-end coding of prototype
Prototype user testing
I’m exhausted.
I need a break, but I can’t stop thinking about work!
User Research
We began our process by researching and interviewing people to get a sense of what needs and frustrations existed within the realm of work-life balance and taking breaks.
29
People Surveyed Online
5
User Interviews
Objectives:
Discover what users experience in regards to taking breaks from work and their relationship with work/life balance
Identify why users stop using mental health/meditation apps or why they continue to use them.
Explore what activities users do to take care of their mental health or what they do to relax
82.8% of people strongly agreed that taking breaks is important.
Observations and Trends:
Nearly all people reported feelings of anxiety when thinking about work and that they often struggled to avoid thinking of work during off time.
When asked what holds them back from taking breaks 72.4% of respondents had answers relating to time management, work, or money.
There was a wide range of strategies and activities that people engaged in to destress from work including, music, meditation, walks, playing games, reading, and journaling
When asked about their break habits, most users fit into one of two groups:
1. Users who don’t take regular breaks
Overwork themselves for days, then need a whole day off as a “break”
2. Users who do take regular breaks during the day
...but, are more stressed/anxious after as they are unable to focus on anything but the work they “should” be doing
Some users even reported both. On their day-long breaks, they still find themselves anxious about the work they need to finish.
Dalia
Hard worker - Driven - Overworked - On the verge of burnout
Needs
Wants a better work-life balance
Needs to take intentional breaks during the workday to keep her anxiety down.
Wants to take control of her mental health by lessening the work anxiety that weighs her down.
Frustrations
Has difficulty justifying taking breaks during hectic workdays
Lacks consistency in taking care of mental health but desires to be more consistent
Struggles to turn off work thoughts outside of work hours
Definition
User Insight
While most users do report engaging in some form of self-care practices, we have observed that they do not have consistency in their mental health routine because current wellness practices are erratic and seen as an afterthought compared to the pressures of work. Users value and desire consistency in taking meaningful breaks, but they need assistance.
THE PROBLEM:
the average worker is anxious/stressed and unsure how to take meaningful breaks to help their mental health
Problem Statement
OUR SOLUTION:
BreakSpace - an app that provides guided breaks and reminders
Notify
Provides notifications tailored to the user’s schedule
Enhance
Enhances the average break with guided activities
Engage
Offer a variety of break activities for users to stay interested
COMPETITOR ANALYSIS
What exists already?
HeadSpace
Advantage: Offers many activities to help with anxiety & stress. You can enter in how you are feeling day to day.
Weakness: Subscription & don’t have access to all the features. Seems unable to change your daily activities.
Calm
Advantage: Offers different sounds & videos. The layout for videos is very similar to TicTok.
Weakness: Very overwhelming with all the different videos. Doesn’t seem very organized. You have to pay for it.
Better Help
Advantage: Set up your preferences & answer question to find therapist to best fit you.
Weakness: Design perspective it is very text heavy. It is a yearly subscription.
Opportunities:
Design an app that has a one-time payment instead of an ongoing subscription. Offer free version with some ads.
Create a sleek, consistent, and simple design
Offer a variety of activities for breaks beyond meditation and videos to keep people interested.
Meditation doesn’t always work for me.
I like to find other ways to take my mind off of work.
Lofi Wireframe and Testing
Onboarding Process
We began our design process by mapping out the onboarding process so that we could consider what would be the starting point of a new user and what features might be most important in getting someone started with the app.
1. Share your interests
Users select interests out of 8 common break options (meditation, drawing, journaling, etc)
2. Set up break times
Set how many times you want to be notified for a break (0-5 times a day), and at what times those notifications should come.
3. Change times by day
Specify break times down to the day of the week. Change your settings at any time!
4. Take your first break
Once onboarded, you’ll get a notification that it’s “break time” on your selected days at your selected times.
Ideation
Our team next decided on which parts were most essential to design in our first iteration of the app.
Each member of the design team created a quick lofi layout of the homepage, a journal activity, and the break time adjustments menu. We gave ourselves a time limit of 45 minutes to create our individual ideas for the layout and then presented our designs to the group.
We discussed the strengths and weaknesses of each team member’s design and then collaboratively assembled our lofi design by combining pieces of each individual layout. This combined design was then put through 5 user tests before we proceeded.
Each teammate created a quick draft of the app layout.
My contribution was “Teammate 1 Layout”. The goal was quick ideation and then discussion. Then rapid iteration and collaboration to arrive at a testable layout within one meeting session.
Lofi Prototype Testing
Our design goal was to only design a user flow for one break time activity so that a user could look at activity options, select one, and complete the activity.
Screen 1: The user receives a push notification that it’s time for a break. The user has preset this time earlier.
Screen 2: They choose their break activity from a set of suggestions.
Screen 3: They choose the suggested activity, journaling. There is a timer they can choose to turn off or adjust.
Screen 4: The break timer ends and the user can choose to continue or end the break.
Screen 5: The user can go to their settings page to adjust breaks and see progress.
User Feedback
We completed 5 user tests as a team and then continued with rapid ideation and iteration to refine our design based on user feedback.
User Testing Objectives
The users will…
Navigate the activities menu and start a journaling activity.
Assess what they expect in the journaling activity. What do they expect each button to do?
Complete a journaling activity then return to home screen to make adjustments to break time settings.
Takeaways from lofi user tests
We need to rethink the home screen and combine the activities page and break time settings page for less confusion and to declutter.
We need to carefully considered options for how users want to interact with certain activities. For example, some users want to save their journal entries for later and some will want them erased. Allow options. Users may want to pick up with an activity later where they left off or they not. How do they do this?
I like the variety of activities and the timers that remind me to take my time and take a breath.
High-Fidelity Prototype
After a second round of user testing, we finalized our high-fidelity prototype.
User feedback…
“The purple and blues are calming”
“The homepage feels intuitive, and the placement of the buttons seems logical.”
“I like the timer options on the journaling page.”
Style Tile
The majority of Ui design and styling was done by myself. I kept in mind the calm atmosphere that we wanted and created several iterations of color schemes to present to the team for feedback.
Themes and thoughts on the Ui design.
Purple and blue are soothing and also tie in with the theme of outer space referenced in the Break Space logo.
Hand-drawn loose illustrations feel approachable and friendly. Not rigid.
A secondary theme of flowing waves adds to the relaxing tone of the app
The timer is carefully designed with flowing water that fills up instead of depleting to refer to how the user is filling up their own cup by taking a break.
Relaxing
Calm
Comforting
Soothing
Final Stages / Front-End Development
The team collaboratively coded a prototype of the Break Space app.
We added wave animations on the splash screen and timer.
Tweaked a few colors on the homepage to ensure good contrast.
We added the slide-in menu from the hamburger icon.
Check out the coded prototype below
Splash page as app opens with calming wave animation
Homepage menu where users can adjust their break time reminders and select activities.
Example journal activity with an adjustable timer.
At the end of the timed break session you'll see this page and options to continue or end.
A quick survey will be added to your break time data to help motivate you.
Slide in menu options from the home screen.
Conclusion and Next Steps
The goal of our design team was to create a new solution that would help people deal with the struggle of overworking and coping with work stress and anxiety.
This app needs to compete with people’s fears and anxiety around taking breaks, as well as, their ambitions to get ahead. Strong thoughtful design can overcome this hurdle.
We believe that if people are able to find a consistent routine with meaningful breaks they will avoid burnout and reduce their anxiety while increasing their sense of peace. This could ultimately help them be better in their work.
In the next steps, we’ll continue to flesh out the features such as…
Building out additional activities
Ideate ways to gamify taking breaks to better compete with people’s tendency of underprioritizing their mental health needs.
Create a community component to encourage people on their journey
Desktop plugin to remind users to take a break
Developing a means to track progress, set goals, and see improvements
