BreakTime
This project began with my personal experience, where I often forgot to take my regular breaks when I was busy at work. To find a possible solution for users similar to my experience, I decide to create a mobile app that will help users to take regular breaks at work. Through the whole process from the user research, analysis of the findings, refine the concept, sketched out ideas to prototyping, testing, and Iterations. I am the UX/UI designer on this project from end to end.
Platforms
React Native (iOS/Android)
Disciplines
UX, UI, User Research, User Testing, Prototyping
Tools
Figma, InVision, Mirro
Problem Overview
According to a study in the Annals of Internal Medicine, published in 2017. Participants who often sat longer than 90 minutes at a time were about twice as likely to die than those who always limited their sitting time to less than 90 minutes at a time.
My project focused on the challenge of helping office workers maintain a balanced and healthy work by encouraging take regular breaks at work using my app.
Click the image to it larger
Discovery
Research & Analysis
During this project, I gained a few key insights through user interviews and surveys:
-
53.3% of the users like to a break in every 2 hours whereas a healthy break time should be every 90 mins or less, and 73.3% of the user doesn't use any apps for break reminder
-
Over 50% of the users are likely to skip a break when they are busy at work
-
26% of the users say too frequent reminders cause frustration
-
For user who likes to use an app for a reminder, they prefer fewer complications and fast responses for the app
" I prefer to take breaks during (job) tasks, because I want to finish what I was doing first."
Interviewee 1
" Unnecessary reminders too often is bad, it is worse than not have being remind at all, especially when I am in middle of something."
Interviewee 3
.jpg)
These insights meant that the current app or methods for break reminders do not work effectively for most users. The users have a hard time maintaining a healthy balance between work time and break time. These key findings helped focus the design solution on creating an app that encourages the user to take regular breaks with easy navigation features.
Concepts & Sketching
This is the most fun part of the project where we can explore the ideas. Based on the research and finding that we learned, it is the time we turn questions marks (?) to exclamation marks (!).
During the process, there were some complexities in prototyping and decision making, which led to a discussion and have an in-depth understanding of the user's needs. These helped me centralize my design on two goals: promo the action of taking a break and simplify the process.
Click the image to see my process on miro
Paper Sketch - Crazy 8
After the feature prioritization, It came to sketching.
I used the crazy 8 method to brainstorm the ideas, features, and possible UI.
I didn't like my sketch at first because of the roughness and short time. I find myself worried too early at the beginning to hope to get a perfect idea out.
I was realized later the tool and practice are used for diverging thinking and trying to get as many ideas out as possible, even if the ideas may seem crazy, silly, or impossible.
Low-Fidelity Prototyping 1
User Flow
Moving from paper sketching to low-fidelity prototyping and usability testing, I identified two issues in the initial setup process. The initial setup screen has all the drop down menu closed which doesn't allow the user to see the detail buttons. The test user experienced some frustration because the low-fidelity doesn't tell him what the menu is about. In addition, he prefer to see all the options at the beginning. Another issue was the timer display screen and setting screen are not together. User need to jump back to previous screen to make adjustments.
These feedbacks allowed me to make a few changes:
-
Made all the drop-down menus collapse at the beginning. This helps the user make quick decisions.
-
Combined the timer screen with the setting screen, so the user can easily go to the setting page.
Low-Fidelity Prototyping 2
Prototyping, Iteration, Testing
Moving from low-fidelity to high-fidelity prototyping, I began with the exact replicate of my sketch. I made a very basic style guide to just get the design going.
High-Fidelity Prototype1
While the first design works fine with the initial concept, I realized I focus too much on designing the specific settings screen for users who may only want access to a preset timer quickly. Going through all the settings each time may cause too much work for these users.
On the aesthetic side, this design is not very attractive in color choice and layout. After receiving users' feedback and getting UI inspiration from Mobbin, I made my first iteration by updating the color theme and rearranging the elements.
High-Fidelity Prototype 2
Design Iteration
-
Including a Points/Level and Daily Goal Checker to motivate the user
-
Adding Quick Timer Option to allow users to start the preset timer quickly without getting to much detail about making choices for the settings
-
Adding a clear hint for user to click on the video
-
Changing the overall color scheme to purple to give a more soft and relax feel
3
4
2
1
To test my Break Reminder App, I used Lookback to recruit 10 users from the Udacity community. I would like to learn how the users will interact with my app and what improvements I should make.
User Feedbacks
-
The content is crowded with some of the font hard to read
-
Labeling needs to be consistent and easy to understand
-
The way to exit is confusing some of the users
Next Steps
-
Using dialog screen to keep the user focus on one task at a time
-
Make the labels consistent
-
Put the exit (x) sign on each dialog screen, as well as allow the user to click the outside dialog area to return back to the main screen.
Dialog screen: 3 out of 10 users would like a easier navigation to a dialog screen.
Setting screen: 4 out of 10 users would like it to be less crowded and easy to understand.
Design Iteration
-
Make it less confusing by changing the break count as a number of breaks instead of percentage (%). A message under it to encourage the user to keep on track with their goal as well as keep using the app
-
Change “Timer” to “Reminder” all cross to keep consistency
-
Tone down the video hint by changing the solid purple to a box
-
Using an office workout photo to communicate the idea of exercise at work is doable
2
3
4
1
High-Fidelity Prototype 3
Solution & Impact Overview
After a couple of rounds of Iterations, I made the final version. You can test it here.
One thing that I would want to explore and expand more on is the smartwatch option. I think it will be a great option for a break reminder for office workers. Realizing the challenge of smaller screen sizes, I think the current design needs to be trimmed down to keep the essentials. I did the paper sketch and low-fidelity for the smartwatch option but didn't move forward due to the lack of time.
As a new designer enters into the UX field, doing this project has been a great journal. The most important lesson that learned from this project is things are not always going as planned, and consistently listening and understanding users’ needs is essential to improve the design over time.
