Balance

A browser extension for setting work-life boundaries during the pandemic

The Challenge

The covid-19 pandemic upended the way people all over the world performed their jobs. A Pew Research Center survey of Americans from late 2020 showed that 71% of respondents worked fully at home—a significant change from the pre-pandemic 20%.

There are many challenges in maintaining work-life balance. People are juggling working, caring for themselves and loved ones, their own mental and physical health. It’s hard to come up with strategies to deal with creating healthy habits and boundaries between these responsibilities.

Role

User Research
Wireframing
Prototyping
Interface Design
Interaction Design

Timeline

8 weeks

Context

This was a challenge with 3 other designers to design a product that addressed work-from-home burnout and stress. We all conducted user research and user flows, but I specifically worked brand assets and the interface design.

Tools

Airtable, Figma, Miro, Monday.com

User Interviews

We interviewed 7 people working in public education, finance, engineering, architecture, and healthcare.

Some of our key findings:

43% of interviewees struggle to get away from work during ‘off’ hours and feel their work-home life is unbalanced.
57% of them don’t take breaks from work throughout the day.
Most people’s schedules are more unstructured now than they were pre-pandemic, and some end up working more than they did before.
Most of them miss the social aspects and in-person interaction of the pre-pandemic workplace.

User Personas and Storyboards

We designed 3 user personas based off of our interview findings, and mapped out user journeys.

To brainstorm before wireframing, we took some of our personas and created storyboards to better understand the direction of our product.

Low-Fidelity Wireframing

*Browser extension pop-up screens: Link Accounts and Work Boundaries screens*

*Browser extension pop-up screens: Login and Preferences*

*Browser extension pop-up screen: Goal Setting*

*Browser extension pop-up screens: Break Reminders and Blocked Sites*

Design Goals

Although we were able to identify some patterns in our interviews, our findings showed that the work-from-home experience varied greatly—some struggle with it while others thrive. We believe that for a digital solution to succeed, it would have to be accompanied by reform to office and labor culture.

But for this design challenge for the client, we needed to deliver a digital product. We decided to design a product focused on setting better boundaries with work and home life.

Key features:

Set goals, work hours, and break reminders
Integrate calendars and email accounts
Block distractions

Wireflows

This is the most comprehensive wireflow for users setting up preferences through the web extension.

Brand Assets

After we created personas, user journeys and wireflows, I created brand assets and a small design system for the web and mobile high-fidelity wireframes.

High-Fidelity Wireframes

Working from our wireflows, low-fidelity wireframes, and brand assets, I created high-fidelity screens and prototypes for web and mobile.

*This is the extension accessed from the browser extension bar.*

*All web extension interfaces, accessible from the browser extension bar while users are on other sites.*

*This page in the browser is where users set up all preferences. Users can change limited preferences using the mobile app.*

*Users can link multiple email accounts and calendars. This will allow them to manage auto-replies from linked email accounts and manage time from linked calendars.*

*Time Boundaries allows users to set regular work hours, extended time away from the office/workplace, and send auto-replies from their email accounts when they are not working.*

Users can set break reminders for themselves throughout the day, and they will be reminded through the browser extension when to take their break and how much time they have left when they’re taking a break.

Users can set simple goals for themselves—our prompts are focused on general wellness and promoting work-life balance. Users can choose one of the pre-generated goals or write their own, and set a reminder to hold themselves accountable to achieving the goal.

Prototypes

I created prototypes for web and mobile to prepare for usability testing.

This flow shows how users set their preferences for the extension in the browser. It includes linking their accounts, setting time boundaries, blocking sites and applications, setting goals, and breaks.

This flow shows what it looks like when a user is on a blocked website and using the extension to unblock the website.

This flow shows what it looks like when a user is taking a break, then goes to Break Reminders to view their settings.

This is the prototype for the mobile app companion to the web extension. It has less functionality than the web version, but allows users to make quick changes on the go.

Usability Testing

We conducted usability tests with 6 users, asking them to complete 3 tasks using our web and mobile prototypes. In our tests, we asked users to:

set their goal preferences to remind them of their goals via a mobile notification
turn on a break reminder in the browser, remove the a preset break and save their preferences
turn on auto-reply from the mobile app

Findings from Testing

All users mentioned ease of use at least once throughout the test. Overall, it was straightforward and features were clearly marked.
“Things are clearly marked and it functions like a lot of websites that I use”
A few users mention liking the colors and visual design; one specifically found the color contrast of the buttons to be useful.
“Very minimalistic design, it's simple but doing a lot for the users."
“Doesn’t feel like a hassle to use”
One user was not sure if the “X” next to the break reminder was what they needed to click to delete that specific break reminder.
This was updated in the final prototype—I added in “remove” text that appears upon hover.
One user was confused by the terminology of “today, tomorrow” on the goal setting page.
One user found “time boundaries” to be a confusing term.
The auto reply was hard to find when asked to find it for half of users.