Recess: Wellness & Productivity App
Stay-at-home orders have made busy people even busier
Due to the pandemic and work-from-home and remote learning policies, more and more people are unaware of the time spent throughout the day, often becoming more sedentary than before. In addition, current wellness apps aim to users who are proactive about maintaining their wellness.
How might we remind these people to take a break throughout the day?
Solutions
• Implementing a scheduling and reminder system to take breaks
• Provide quick and easy exercises to squeeze into short breaks
• Create a mindful product easy on the user's cognitive load
Success Metrics
• Measure how often users are scheduling their breaks per week
• Whether they have turned it into a routine (3 months of use)
• Investigate push notification reminders -- are users responding?
Team
Solo (Bootcamp)
Role
UX Designer
Duration
2 Weeks
Scope
Mobile App
Visual Design
Speculative
B2C
Tools
Figma
Pen & Paper
Adobe Illustrator
Research
Some research goals include:
• To define Recess's target market
• To compare Recess's competitors
• To describe user's remote work and school experiences
• To describe user's current personal wellness management
Important Trends & Findings:
• 72% of technology executives said that team workloads have had increased more, with people working harder
• Remote work increased working hours (Microsoft)
• 10% increase in meeting hours
• 52% increase in instant messages sent between 6pm and midnight
• Based on Chronicle's statistics on 3,000 national institutes of higher education (posted September 2020):
• Majority of institutes are operating with remote learning options (73%)
• Demographics
• Remote work job types: 34.3% in IT/Engineering, 12.7% in Marketing & Advertising
• 39% remote workers work longer than office-based employees
• Men: 40% | Women: 47.6%
• Mental health and wellness category is the highest-grossing in mobile apps
• Users feel more pressed for time than ever before (seen more commitment when the activity requires less time)
• Huge rise in mobile apps amid Covid-19
Competitive Analysis
Fabulous is the one that mostly closely aligns with Recess's functions. Its holistic practice of habit building is similar to what Recess is helping its users with. With Headspace and My Fitness Pal, both include practices of mental and physical wellness in one or the other.
User Interviews
All the participants were very open about their remote work/school experiences and how they manage their wellbeing.
Uncovering Needs
To find out what these participants have in common, all the notes and comments from the interviewees were grouped together based on commonalities.
Empathy Map
Meet Reina!
Reina is a 27-year-old content strategist and wants to be able to still have a routine to help her manage her time and thus allowing her to take breaks throughout the day to improve her wellbeing.
As the persona of this project, we will now focus on her through the rest of our design process.
How Might We Encourage Users To Take a Break from Work?
With the amount of ideas generated, it is now the time to narrow down our options here and define the main features.
Project Goals
As a product focusing on user's overall wellness efficiently, the overlapping goals between Recess and its users is to improve user wellbeing through the use of a wellness management app.
Determining Features
Based on the feasibility and cost versus value, a list of features are determined to be implemented into the product. The must-have features are the ones that provide the highest value and take the least effort.
Looking at the nature of the app, I wanted to place the focus of Recess's main functions on allowing Reina (the persona) to be able to schedule her breaks and have the flexibility to do activities such as doing quick 5-minute stretches or mindful practices.
Features needed (P1 - Must Haves):
• Scheduling system
• Notification
• Curated stretches / exercises
• Meditation / mindfulness
App map
Laying out Recess's app map can help with figuring out the relationship between the screens and where the main functions will be located. Ultimately, this just helps to lay out the foundation in which the interaction between the user and the product will take place later.
Because this app is for those who are pressed for time, the screens and features are mostly laid out in plain sight so that users who are busy like Reina do not have to tap through many screens to complete their tasks.
Task Flow
With the app map and a clearer context of the features, I can then assign tasks for our persona Reina based on her needs to see how she will interact with these key features and screens to help her stay healthy amid her busy schedule while working at home.
User Flow
Based on her actions and decisions, the route in which she takes to achieve her goals will differ, and therefore it is important to account for those interactions.
With the user flow that gives us a step-by-step process of how Reina will use the app and interact with the features, I can then implement these features by laying out the general design of the main screens.
Low-Fidelity Wireframe Sketches
Below are some examples of the low-fidelity sketches of the main screens:
In the first screen (on the left), the home screen is the schedule for the user, where they can easily browse through their day and see where they have scheduled a break. When the user adds or edits a break, they have the option to turn on a reminder that will notify them when it is time for their break.
In the Relax, Move, and New List screens, lists are presented in a similar manner to the schedule in the home screen to promote consistency and ease of viewing. The user would only have to navigate with scrolling up or down, without having to use complicated gestures to complete their tasks.
The main idea here is to try to decrease the amount of cognitive load on the user by having the features laid out in the open with simple scrolling gestures.
Mid-Fidelity Wireframes
Mid-fidelity wireframes are created from the low-fidelity sketches to give a more accurate layout of the feature and use it for usability testing. At this stage the layout is still not finalized.
**Note: The bottom navigation bar has been revised to make more room for improvements/implementations later on, as this is only an MVP. Although this would force the user to have to tap through more screens, it would only add one extra step. In addition, the function that was moved was the profile, which got relocated to a common location for profiles.
Mid-Fidelity Prototype
As a brand new product, it is important to test out its main functions before moving on to creating high-fidelity prototypes as it saves both time and effort later down the road after usability testing.
View prototype here.
Usability Test
Task #1: Add a 15-minute break for 3:15pm
Task #2: Add a 5-minute meditation session to that 3:15pm break
Task #3: Create a new list and add "neck rolls" to that list
Affinity Map
Back to iteration!
Revisions
There was quite some work cut out for this revision. Based on the recommendations, I:
1) Made the hierarchy between "Activity" and the button choices clearer by removing the line between them and increasing the weight of the font; changed "Relax" to "Calm"
2) Removed the extra confirmation step/screen from after clicking "Done" on the edit tab
3) Changed the "View List" CTA to "View My List (1)" to show the number of moves in the new list; Removed the CTA from the screen and only allowing it to appear when there are exercises in the newly created list (See example below)
Branding
Based on the brief, Recess is at a minimum simple and friendly. After conducting user interviews and creating a persona, attributes such as calm, energizing, and mindful were also assigned.
Final High-Fidelity Wireframes
Applying the visuals onto the revised mid-fidelity wireframes:
Mockups
Conclusion
To be honest this project was harder than it sounds. After conducting a couple of usability tests, I had wondered many times whether this application did more harm than good (as there were some struggles that had to be addressed). Nevertheless, after taking a couple of deep breaths and time to think things through, I had made the revisions in a way that hopefully solved these problems, and only another round of usability testing will tell.
Key Takeaways:
• Things don't always go the way you want, so always be ready to go into a different direction
• Be clear with your microcopy
• Technical difficulties are real
So, What's Next?
• More iterations depending on usability results for the high-fidelity prototype
• Handoff to development
• Iterations after launch
