Radia Lahlou
UX designer

BreakBuddy

Helping users prioritize wellness through break-taking.

Image alt tag

It's time to make a move.

Problem:

In today’s hyper productive world, many people lead sedentary lifestyles in which they feel they have no time to take a break. Especially as a result of the COVID-19 pandemic, more and more people are working from home on a laptop and sitting for at least 6 consecutive hours! Unfortunately, research shows that sitting for extended periods of time can be detrimental to our health.

As the sole UX/UI designer of this project, I worked to create a product that helps users take intentional breaks in a way that is effective, incentivizing, and fun!

BreakBuddy

Solution:

Created using human-centered design, BreakBuddy provides users with a goal-oriented break schedule, break reminders, guided exercises, and customizable breaks to meet individual needs.

Timeline

8 weeks

Role

Sole UX/UI Designer

Tools

Figma, InVision, Miro, ProCreate, Otter.ai

01. Research:
Understanding the Problem
“Without any downtime to refresh and recharge, we’re less efficient, make more mistakes, and are less engaged with what we’re doing”
Tony Schwartz, head of The Energy Project

Secondary Research:

To begin better understanding my user's problem, I conducted secondary research using a variety of resources.

Of the many articles I read, three key insights stood out: 

  • A seated lifestyle can lead to a number of injuries and long term health complications, ranging from chronic pain to diabetes to decreased longevity.

  • Increasing one’s mobility (the range of motion in your joints and muscles + the ability to control motion) is a good way to prevent injury and move easily in life. 

  • When we don't take breaks during our busy days, we do not perform at our best.

Importantly, I also dug into studies regarding Health at Every Size (HAES), established by the Association of Size Diversity and Health, which emphasizes, among other things, weight inclusivity, respectful care, and life-enhancing movement for all people. Studies show that inclusive design is more accesible and better received by a wider audience. Thus, I wanted to make sure to have a foundational understanding of research-backed inclusivity principals in the field of wellness at the beginning of my project.

1
Screener Survey
36
Survey Responses
11
Interview Questions
5
Interviewees

Primary Research:

Using human centered methodology (i.e. potential user interviews, affinity mapping + empathy mapping) I conducted primary research to further broaden my perspectives.

I first distributed a screener survey via social media (Facebook, Instagram, and Reddit) to find suitable interview participants who sit for over 6 hours every day.

Since BreakBuddy is an application intended to help its users take breaks, it was important to make sure the people I interviewed could benefit from it! 

From the screener survey, I selected 5 participants to interview, ranging in age from 22 to 45. Although the identities and activity levels of these participants varied, there was a definite consensus regarding breaks:

  • they didn’t take enough breaks

  • they didn’t always feel they had time to take breaks

  • they wished there was an effective way to adequately space out break time

Interview Notes + Affinity Mapping

Interview Notes + Affinity Mapping

Synthesizing

In order to bring the interview data together in an intentional way, I sought out similarities in key insights and comments from the interview participants and created affinity + empathy maps.

These maps allowed me to visualize and understand the major pain points, feelings, thoughts, and behaviors of my participants. Ultimately, this synthesis of data better prepared me to consider the needs of multiple users, and hone in on three main user groups: "The Active Sitter," "The Busy Work From Home Mom," and "The Ultra-Sitter."

Empathy Maps

Empathy Maps

Personas

Based on the empathy maps above, I was able to develop 3 distinct personas that helped me focus on and empathize with potential user needs.

The Active Sitter: A user who is relatively active in their daily life but would like help with spacing out and keeping track of breaks.

The Ultra Sitter: A busy user who isn’t interested in leading an active lifestyle but would still like to take more breaks during the work day and reduce sitting related pain.

The Busy Mom: A user who works from home and is constantly in-between responsibilities, who feels like they have neither the time nor ability for breaks.

How Might We...?

As the final portion of initial research synthesis, I put together problem statements (HMW statements) that concisely addressed the most relevant and pressing user needs. By doing this, I was better equipped to begin problem solving for distinct circumstances.

 How might we… 

  • ...incentivize users to incorporate pain relieving movement into their daily lives? 

  • ...provide personalized movement routines for users of different activity levels? 

  • ... provide effective mobility/stretching drills for busy users? 

  • ...help users make the most of short/minimal break times?   

  • … center overall wellness rather than weight loss or athleticism/sports?

02. Ideate:
Brainstorming Solutions
BreakBuddy

User Stories

Using the HMW statements above, I then outlined a series of user stories, sorted from high to low priority, so I could begin the ideation process with some goals for the product in mind. 

Based on the high priority user stories, I saw that the Minimum Viable Product (MVP) version of BreakBuddy would need to:

  • provide multiple options for desk relief.

  • incentivize users to prioritize their wellness.

  • use reminders to keep users consistently engaged.

User stories help promote user-centered design, helping my design solutions remain focused and effective.

Brainstorming

Next came my personal favorite part of the project: Brainstorming! I created a series of quick sketches to get a better idea of how the application would manifest and solve user’s problems. 

I chose to do these sketches with pen and paper instead of rendering them digitally so I could quickly ideate and get as many ideas out as possible.


Sitemap

I created a sitemap to ensure screens and paths were organized in a clear and intuitive manner. By creating this map, I was able to plan and iterate on the ways screens would be ordered in relation to one another

User Flows

After, I created User Flows to illustrate 3 critical user paths (red routes) within the application. The 3 paths I selected were: 

  1. Sign up 

  2. Take a Break 

  3. View Progress 

By creating a tangible visualization of these three paths, I was better able to understand what screens would be needed as well as what actions and decisions users would need to take to complete the flows.

Sketching Screens

Using ProCreate (an iPad drawing application), I then set out to draw the screens I identified in my 3 red routes. With this method, I was able to quickly iterate rough versions of each screen and experiment with different design elements until I was happy with the overall look and functionality of my screens.

Based on my research, I wanted to make sure to include specific UI elements that would cater to user's success such as:

  • A progress tracker

  • A home bar

  • Awards

Low Fidelity Wire-Frames

Using Figma, I begin to transfer my sketches to low-fidelity wireframes. This helped me even out the proportions of my designs and compare with industry standards. I chose to keep these wireframes in greyscale, to avoid overall distractions and instead focus on the information and layout of each screen.

03. Design:
Incorporating Delight

Creating a Value Driven Product

Brand Platform

Mission: Everyone, regardless of their work situation or activity level, deserves to take a break and enhance their quality of life. 

Our sedentary society is driven by a need to produce, and thus many people find it difficult to take even 5 minutes for themselves in the middle of a busy day. BreakBuddy stands to encourage and empower people to take wellness into their own hands, with a little help from a friend.

 

Brand Attributes: Empowering, energizing, encouraging, caring, personalized

When users feel cared for and encouraged, they are able to empower themselves and improve their own self-care practices. When encouragement is personalized, users feel they can set realistic goals, easily increase their quality of life, and show up as their best, most energized selves. 

BreakBuddy

Setting the Mood

Mood-board + Style Guide

In order to get a feel for what sort of look I would be going for, I first created a mood-board. I wanted to include imagery that was at once calming and energizing, with bright, exciting colors to inspire a feeling of rejuvenation. 


In terms of UI inspiration, I looked to applications that transform wellness into play to motivate users to remain consistent, such as the Apple Fitness and Fitbit apps. I wanted to include rounded corners, cute graphics and personalized messages to enhance and humanize the UI. 

Color: The colors I ultimately chose were modern, friendly, and eye-catching to promote accessibility, easy navigation and user delight.  

Typography: Open Sans, a fun and friendly typeface similar to industry standard SF Pro Display helped polish the overall look of the application. 

Grid: a 4 column grid with a 12 px gutter helped keep spacing proportional and consistent, facilitating straightforward usability.


Logo: Upon not finding an appropriate pre-made logo, I used Procreate and Adobe Illustrator to create vector illustrations for the BreakBuddy logo, wordmark, and other assorted graphics.

Red Route(s) 1: Take a Break

Red Route(s) 1: Take a Break

High Fidelity Wireframes

I developed 47 screens for my final High Fidelity Mock-up. I spent a lot of time organizing, re-spacing, and iterating on screens until I felt confident with the final product. 

The most important challenge I ran into was the way in which I wanted to represent breaks completed. After much thought and multiple designs, I decided to use a multi-colored ring, with each color representing a different break type.

I used two rings to represent two metrics:

1. taking a break
2. standing up. 

Additionally, research shows that personalization can enhance a user's experience. I incorporated this by having the user's goals shift based on their needs, and including a message with the user’s name at the top of the screen. 

The user was incentivized not only by their goals, located on the home screen, but also by a series of charts and awards available in their “summary.” 

04. Test:
Uncovering Problems

User Testing

Using InVision, I created a clickable prototype with multiple paths so that I could test the efficacy of my design. By prototyping, I was able to obtain user feedback and fine tune my design based on this feedback avoiding further problems later on.

I recruited 5 users who sit for at least 6 hours a day using social media and personal networks (one user was from the original interviews!) and created a usability test plan to guide my interviews. Research shows that testing 5 potential users brings to light 85% of problems with an interface.

Objectives: 

  • Collect initial impressions of HF screens (spacing, color scheme, overall aesthetic opinions) 

  • Ensure that tasks are logical and intuitive. 

  • Confirm that summary data is useful and ordered effectively. 

  • Uncover any problems in usability. 

Test Tasks/Questions: 

  1. You don’t have an account, and would like to make one. 

  2. Now you have an account. You have had a long day of work with a lot of sitting, and would like to move around in some way. I would like you to open the app as you normally would, and decide to take a break. 

  3. You receive a push notification on your phone reminding you to take a break. You’ve been looking at a screen all day and are very anxious. Take a break. 

  4. You want to check your progress. Walk me through how you would do that. 


I intentionally left room for interpretation in my test tasks, so that users could move about the app as organically as possible with minimal guidance. 

Clickable Prototype for User Testing

BreakBuddy

Test Results

Upon completing my tests, I was happy to find that there were no glaring issues. The users found the screens straightforward, easy to navigate through, and aesthetically pleasing. There were, however, some small problems that a few users noted: 

Highest Priority Issues:

  1. Break names are confusing. Users do not know what each break type entails.

  2. “Take a Break” push notification leads users directly to the home screen where they then have to figure out how to take a break. 

Redesign: 

  1. A pop-up window could be created explaining the meaning of each break type. 

  2. The push notification could instead lead to a pop-up screen with the break options. 

Final Design

In the final iterations of BreakBuddy, I made a number of small changes (for example, minimally adjusted colors to account for accessibility) and created 2 new pop-up windows to solve the issues found during user testing.

05. Reflections:
What's next?

Research shows that meaningful social interaction among users can serve as incentive and enhance user experience. If I were to expand on this app, it would be worthwhile to have users to connect with one another and be able to send personalized reminders to friends and colleagues to take a break. 

In terms of accessibility, it is important to consider how BreakBuddy could be adapted for those with limited mobility, for example, wheelchair users. Accessible design is inclusive design and maximizes the potential for all users to enjoy their experience with a product. Not only is this important at the level of equity, studies show that accessible design reaches more users, and generally has better usability. Thus, it would be important to personalize the app's break types even more to account for users' abilities. 

Lastly, this project has shown me how excited I am about continuing to learn about UX/UI and implementing new skills! I am passionate about delightful, thoughtful, and functional design and can't wait for the journey ahead! ✨