workWELL

UX Design Case Study

Giving remote workers a way to stay organized,
live healthy, and work well.

A collection of screens from the CBC mobile app after its redesign

Project Overview


What did we do?

My team and I designed an application that helped remote workers stay healthy. WorkWELL helps users by reminding them to take breaks, drink water, etc., as well as giving remote workers closure at the end of their workday to provide mental separation between work and home life.

Why did we do it?

Since the Covid pandemic, remote work has become an increasingly popular reality. However, this new work style comes with unique challenges, and many have found themselves struggling to work healthily from home. At the 2023 Dubhacks Hackathon, my team realized that this was a problem we had all faced, so we decided to design a solution for it.

My Role

Interaction Design
Visual Design
Info Architecture

Timeline

Oct 14 - 15, 2023
2 days

Project Details

Design Sprint
Hackathon
Team Project

Tools

Figma

Thinking of User Needs


Our Design Focuses

To begin our design sprint, we spent time thinking of what remote workers needed based on our experiences and secondary research. By holding a brainstorming session where we quickly noted problems we thought of, we defined four categories that remote workers were likely to struggle with:
focus, motivation, health and activities.

Ideation


Generating Ideas

After identifying areas of focus for our project, we began generating ideas for how we might address them. We came up with some primary topics we wanted to explore: form factor, gamification, and activities. We picked these categories because we felt we had lots of room to ideate within them, and that's what we did. After writing down and reviewing ideas together, we began identifying ideas that we thought had great potential in our design.

From Ideas to Features


Key Features

Our ideation session helped us define four features that our design would offer to users. Our first feature was a "wellness timer" could help users plan breaks, hold focus sessions, and remember to stay healthy. Next, we wanted our app to help users make the most of their breaks by suggesting activities that could refresh them. We highlighted the importance of onboarding users and letting them customize their work day as well. And lastly, we felt that giving users a dedicated "wrap-up" process would help them mentally end the work day and could give users an opportunity to review how they did.

Flowchart

We then made a flowchart to outline how our design would flow for users. This helped us break up workloads and think of where each feature would be for users.

Making it Pretty


Branding Ideas

Now that we had an understanding of what we wanted to build, we began thinking of how we wanted it to look. As a team, we created a small mood board and began thinking of ideas for what to name our design. We ended up choosing the name "workWell", which I felt emphasized putting health and work together.

We chose a professional yet lively style for our design, blending bright colors and simple fonts that were easy to process. I designed our logo, and after many ideas and iterations, we settled with a simple blend of bold text and capitalized letters. We felt that this logo captured the work-life balance we wanted to emphasize while maintaining simplicity.

Final Design


Interactive Prototype

You can try our interactive prototype using the Figma window below, or click here to open it in a new tab!

Design Breakdown


Onboarding

When users first begin using workWELL, they are presented with a set of options to customize their work day. These options allow users to tell the app how long they work, how many breaks they have, etc. There are also two template options to help users customize their experience quicker.

The App in Action

The home screen is where users will spend most of their time in the app, allowing them to start timers, access settings, and more all on one page. Throughout the day, the user will receive notifications reminding them to take breaks and stay fueled. When on break, users are encouraged to do activities, such as walking and getting snacks, to make sure the break actually feels like a break from work.

Ending the Workday

When users are finished with their work for the day, we want to give them a clear-cut transition back into their home life. To do this, we added a "wrap-up" process, where users can rate their day and see what they accomplished. This helps users reflect on their work and feel like their workday is complete.

Reflection and Impact


Considering that my team only had 2 days to design workWELL, I am quite proud of the work we did together! Designing this at the Dubhacks 2023 Hackathon gave me the opportunity to practice working in agile teams, taking leadership roles, and making design decisions quickly, as well as learning new tricks for visual design and in Figma.

While this project only made it to a proof of concept stage, I think that it does bring a unique twist to the office-health-assistant type of tool. There are plenty of examples for software that helps employees by reminding them to stretch and take breaks, but none of us had heard of good ones for personal or remote work. In our experiences working on projects remotely, we found ourselves struggling to exit that work mindset or totally forgetting to drink water for hours, and we wanted to provide a solution that felt homey and intuitive for remote workers.

If I were to continue working on workWELL, I would want to take time conducting research with users to see what other features they needed. There are also some visual elements I would want to clean up, such as wording and confusing icons. This app was also made to run in the background, so designing how pop-ups would look and work would be a cruicial next step as well (we had designed a simple windows pop-up example, but I think that a custom designed pop-up would be more effective for users).

Let's Connect!