time management that rewards
motiv is a mindful time-management desktop app that rewards its users for taking more off-screen breaks. The app’s ultimate goal is to help its users form a healthier relationship between their work/life balance while improving their overall work performance.
UX/UI Designer, Information Architect

Figma, Procreate, Zoom

15 days
Personas, Journey Map, Empathy Map, Competitive Analysis Chart, User Flow Charts, Sketches, Wireframe, High Fidelity Prototype

Target Audience:
People who work remote jobs and would benefit from better time management
The Problem
Since the COVID-19 pandemic started, more people have been working remotely. Many people found that the more time they had on their hands led them to create more as a coping mechanism in an uncertain time.

Work From Home (WFH) has caused a lot of people to have strained eyes and other physical, emotional, mental wear on their bodies. Staring at screens all day long and forgetting to take periodic breaks is a big reason for this. Over time, setting constant alarms or reminders becomes more tedious for people; let alone the lack of motivation to take a break outside of their will and understanding of the benefits from doing so.
The Solution
motiv utilizes the Pomodoro Technique – 25-minute work intervals, 5 minute short breaks, 15-30 minute long breaks after every four 5 minute short breaks – while motivating its users with short inspirational notifications and a soft alarm to not startle its users yet still pull them away from their deep concentration.

While the app cannot make people take breaks or physically stop users from looking at a screen on their breaks, it can tell when a user is using a device synced with the app and won't reward them if they fail to take off-screen breaks. The idea is to motivate; in addition to rewards, the app offers gentle alarms and light skim-able motivational tips on the importance of taking breaks.
Living with my partner for over a year during the pandemic, I witnessed her feeling so trapped in her routine, barely making any time for herself or able to break the habit of staring at screens to the point that she almost couldn’t see for a day. Just like many others who were attempting to adjust through a similar experience since the pandemic, this greatly affected her mental health.
After talking with her, some friends, and participants from my user interviews, I realized that despite a few approaches existing like the Pomodoro Technique, many people felt that they couldn’t motivate themselves enough to take the breaks, even if they wanted to – even I had a hard time doing so myself. This made me realize the need and desire from everyone I talked to for a motivational break app integrated into one’s workspace.
Competitive Analysis
I started by conducting a competitive analysis to define motiv’s uniqueness.

Pomofocus (albeit just a website) simplifies the Pomodoro Technique’s high success rate in people’s productivity and ability to take a break. Focus uses a minimalistic design, the ability to manage tasks, and prompts users when to take a break. toggl takes a more modern UI approach but seems to be ever-expanding which can feel a bit overwhelming for new users.
Proto-Persona & Maps
I created two personas, Marie and Miguel. To further develop my ideas, I chose Marie as the primary persona for motiv since she felt the most relevant to my users based on my research from my survey and interviews.
A persona for motiv case study.
Persona: Marie — a 35-year-old Product Designer and student who tends to get absorbed in her work desires to set boundaries for herself and manage her time better during the COVID-19 pandemic.
A persona for motiv case study.
Persona: Miguel — a 27-year-old freelance Graphic Designer who currently leads an unstructured lifestyle, due to the COVID-19 pandemic, and wants to form a more structured work routine.
A journey map for motiv case study.
Journey Map: After her morning routine, Marie tries out a time management app recommended by her coworker but feels frustrated and gives up, resigning herself to the Pomodoro Technique. Marie tries to follow along with the method but continues to delay her breaks. When she finally takes a break, she ends up anxiously scrolling through social media waiting to get back to work. Feeling unproductive and burned out, she takes a long break and finishes her tasks in the late afternoon. She ends her day dissatisfied with her work performance.
An empathy map for motiv case study.
Empathy Map: Marie is worried that an increase in breaks will disrupt her workflow yet she already feels exhausted from non-stop work and school. She wants to set boundaries and prioritize a healthy work/life balance.
User Stories
For user stories, I created three that were high priority and one medium priority.
User Flow
I then wrote out user flows for my high priority user stories to help Marie navigate through the app with ease.
High priority user stories that address how Marie would:

1.   Quickly learn how to use the app
2.   Set reminders that motivate her to take breaks and when to return to work
3.   Create a habit of using motiv to change her work/life balance
User flows for motiv.

Afterward, I created my wireframes in Figma. I redesigned my notifications to match those of the macOS and the Human Interface Guidelines (HIG) and included them due to their integral role to fully benefit from using motiv. The notifications alert you when to take your off-screen breaks, when to return to work, and how many “coins” you earned after a day’s worth of breaks.

A low-fidelity wireframe made in Figma for the motiv case study.
Usability Testing
I then tested this design with a handful of participants from my usability testing. While the app’s intentions and rewards page proved to be as exciting and promising as expected from the testers, there was a major roadblock that practically demanded iterations if this design was going to be anywhere near intuitive enough for new users in an MVP. While some issues were minor prototyping issues that were easily fixed and wouldn’t be present in the actual design, the biggest common issue was found on the “Day at a Glance” panel.

As much as it originally pained me to hear it over and over, 4 out of 5 participants did not like the way it was set up and felt overwhelmed looking at it. Although participants were able to work past the panel, 4 out of 5 agreed that they wanted a simpler display to look at and a way to utilize more color in the UI. The overall intention of the panel was well received for most participants as well, just not visually translated in a way that they preferred it to be.

Iteration/Testing 3 - The app’s most recently tested design addressed the majority of the feedback received and made for a cleaner, simpler, and more intuitive and pleasing UI for those who previously tested the prototype and those new to it as well.
Next Steps
After compromising with myself to reach an appropriate point to match the MVP standards for the app, I plan to come back and add a few more features, design for light mode, and explore ways to further improve any hierarchy and accessibility issues through animation, hues, alternative colors, branding, etc.

I intend to design the responsive applications for this app as well: mobile phone and tablet.
For the branding, I wanted to try my hand at a “Dark Mode” UI. I did some research on available Dark Mode color palettes and looked on Dribble for inspiration. I chose exciting colors, complemented each other, and modern. For legibility reasons, I chose a soft black and white to avoid a harsh contrast on the user’s eyes and help the app blend into the user’s pre-existing workspace as well.

I also chose the rounded sans-serif font Omnes (Semibold and Regular) to give motiv a modern, playful, yet professional feel. I use the semibold typeface for headers, important text, and buttons while reserving the regular typeface for the rest of the body text.

Additionally, Omnes is used in the logotype, which I altered in Figma. I added an arrow to the end of the ‘V’ in motiv to symbolize an increase in one’s work performance and path to a healthier work/life balance.

To create the full logo, I hand-illustrated the coin in Procreate, using gold (#DCB153) as its primary color. Then I put the logotype and logomark together in Figma. I wanted the overall feel of the app to be a little playful and resemble that of an arcade where the games are your tasks/projects and taking some well-needed breaks.

Mock up of motiv app's high fidelity prototype.
high-fidelity prototype
I discovered that people really want an app like motiv. Despite some discouraging moments throughout usability testing, interviewees would make a few jokes about investing or hinting that they wanted the idea to be a real thing which kept me motivated to keep pushing for improvements and further iterations.

I initially slacked a little on my UX Research and patterns when I began sketching out my wireframes and digitalizing them in Figma. I realized later on that I could have saved a lot more time and energy if I had prioritized extra time at this stage.

I realized after I had completed my user surveys that I could have obtained clearer and more organized data had I originally split the divide in my questions sooner.

I learned that designing with a desktop background can be more complicated if made too large. Text, icons, and buttons become compromised when condensed on a smaller resolution screen. To save time and energy on my next work, I plan to utilize more components when wireframing and branding.

I gained experience in resolving frustrations regarding communication issues between myself and another designer while they were attempting to offer feedback that ended up being irrelevant to the app’s medium. I kept a level head and tried to offer other ways to communicate, along with references. In the end, I took what I could from their suggestions and made reasonable decisions that worked best for the app.

Unsplash images:

Logos & Icons

Designed by Nima Wheeler in Figma