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.
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.
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.
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.
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.
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.
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.
Feeling unsatisfied with the original rewards page, I went back and used the Crazy 8’s Technique to see what other variations I could explore. Combing a couple of elements from different sketch ideas, I ended with something everyone loved.
After some usability testing issues with the “Tasks Builder” and the “Day at a Glance” panels, I went back and made some new sketches that I then applied throughout my design iterations.
For user stories, I created three that were high priority and one medium priority.
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
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.
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.
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.
