Shutterstock (Graphic by Vitechek)
Anthony Ra
UX designer
What is monitime?
Constantly leaving work to the last minute?
Always on social media when you shouldn't?
Endlessly staring at your screen for most of each day?
Monitime is a productivity application focused on those who aspire to be more conscious and healthy in their daily schedule.
Role
Individual project, UX Research, UX, UI
Tools
Adobe XD, Illustrator, Photoshop, InVision
Timeline
August 2020 - November 2020
I want to be more productive, and I'm not the only one.
What are the common trends in the way users work?
What do these productivity apps actually achieve?
Can a mobile app really drive a user to rethink their working habits?
Let's do some discovering.
24
Respondents to my productivity and work survey.
87.5%
Rely heavily on at least 1 personal device for their work.
75%
Use or have used at least 1 productivity or planning related app.
62.5%
Believe their work habits can be better than what it currently is.
Something doesn't seem to add up.
One HUGE takeaway from these responses is that many respondents use at least 1 productivity or planning related app; however, a large amount still thinks their work habits have much to be desired. In order for me to develop concrete solutions, I needed to conduct in-depth interviews - listen to their stories, their struggles, and their goals.
Affinity mapping gathering trends from surveys and interview responses
Talking to potential users.
I conversed with 5 potential users in a virtual setting. Some of the major quotes include:
“I find myself leaving [assignments] to the last minute. If I have two weeks left on a deadline, I feel like I don’t have to do it today.”
"Constantly staring at a screen can be mentally exhausting."
"Many times when I'm doing projects or homework, my hands go straight to [social media]."
"[Productivity apps] are good for reminders, but they don't affect my working habits too much."
Setting a baseline.
Going in-depth with some of my potential users allowed me to better understand common problems through these trends. But to hone in on concrete solutions to these problems, I developed 2 user personas to guide me throughout this study.
Put everything together
After observing 24 survey responses, listening to 5 potential users, and created 2 user personas, I went forth and provided concrete pain points that can generate pathways to multiple solutions.
(Graphics left to right by Vitechek, Victoria Kurpas, Victoria Kurpas, Letters-Schmetters)
Visualize plans effectively
How might we present the user’s plans, so that they’re more inclined to work earlier and smarter?
Eliminate multitasking
How might we help users in minimizing their use of nonessential apps and programs during their time of work?
Balance work and life
How might we provide users their overall screen time in conjunction with their daily schedule?
Operate with flexibility
How might we solve these multitudes of problems in one singular interface?
(Image screens from left to right: Google, Monday.com, Todoist, Trello)
Model precedents
Before engaging in user experience design, I want to get a better understanding of the most important heuristic processes in a productivity-related program. I analyzed 4 popular apps used for calendar and planning. These were my important takeaways:
Aesthetic & Minimalist Design - The last thing users want is an app that adds to the stress.
Recognition of Routes - If users have to learn it, then they're not going to use it.
Consistency & Standards - The app can't be provided as different features in one app. Consistency is key.
Flexibility & Efficiency of Use - Provide diversity and variability in an app.
User flow of their experience and interaction of the app
Mapping the journey
My essential goals for the user flow involve:
simplicity in the user routes
consistency in the user tasks
flexibility in the user inputs
cohesion in its information architecture
Now that I have a scheme for how the app operates, let's get to designing!
Sketches of potential screens and layouts
Putting pen on paper
I dove right into the drawing board (or index cards), and focused on these essential features:
Generating visual solutions for user struggles.
Presenting a story that is familiar but unique.
Creating a model for consistency in every screen.
Testing different gesture options and transitions.
Building a skeleton
My main incentives in building low-fidelity wireframes are functionality, usability, and adherence to mobile design guidelines.
Entire wireframe and routes of all of the screens
Presenting a mood
I really thought about what emotions appropriately tell the story of creating a brighter tomorrow. I really enjoy the idea that all users are striving to pursue brighter dreams, and it is important to provide the notion that those dreams are tangible.
Like auroras - keep moving forward and the real beauty will show.
Collection of photographic and vector works taken from Pinterest, Behance, Dribbble
Style guide cheat sheet for quick high-fidelity design and prototyping
Providing a style
Typography
What can Manrope do for a productivity app? Manrope is professional but not overly strict. It carries a neutral personality with hints of originality. And it carries familiarity but uniqueness.
Colors & Hues
With inspiration from my mood board, the color sets step away from your typical productivity app. With the navy as the background color, green as a primary represents success and growth, while purple as a secondary represents individualism and drive.
Iconography
This app will be heavily reliant on iconography, so visual and universal comprehension to all users is imperative.
Callouts & Actions
I aim for a minimal but pleasing layout for users to keep coming back for more. Combining typography, colors, and iconography results in a productive, modern experience.
Try the clickable prototype here.
High-fidelity featured screens
Cohesive user experience
Monitime presents plans, calendars, and monitor features in maximizing provisions for user's time management and screen time capabilities. Users will now be able to answer:
Which tasks should I be prioritizing?
How to prepare and visualize upcoming plans?
Am I making the best use of my time?
What can I do to take advantage of my productivity and health?
High-fidelity red route: create a new plan
Maintaining consistency
Monitime strays from conventional layout but maintains consistency in essential user routes - recognizable and straightforward.
Users are also provided an option to regulate distracting apps to stay ahead of their game.
High-fidelity red route: create a new off time
Managing work time
Monitime gives users a complete visual breakdown of their screen time usage and how it lines up with their daily schedule. Users will be able to take action, including:
frequent app/program breakdown and on-site notification and access settings
customized off time to turn the screens off once in a while
timed limit on the most secondary frequently used apps
High-fidelity diversity screens
Diversity of use
Monitime caters to users in different visual themes and personal screens to appease all audiences and users.
What will my users think?
Now that Monitime has a working, high-fidelity prototype, I went ahead and conducted testing sessions with 9 potential users. My biggest questions were their initial thought on the visual layout and the fluidity of the user journeys.
Here's what my users thought:
First Usability Testers: E. Lehner, M. Masuda, J. Park, J. Tsai, Y. Wilson
Organization and Colors
Giving such restricted options resulted in much confusion for their intended purpose. Am I categorizing by type? Are these progress indicators? Are they showing levels of priorities?
Expanding to wider and more colorful options cleared up all initial confusion. Users can now categorize their plans in any palette of their desire.
SecondUsability Testers: A. Chong, E. Fischer, R. Freeman, R. Jin
Functionality and Naming
There were two main issues with this screen.
A screen time graph filtered by length of time is pointless.
The naming conventions, 'Notifications', and 'Free Time' are misleading in their actual intent.
The graph now shares the same filters as the plan's layout to provide more cohesion to users while visualizing their plans with their screen time. The naming conventions have been improved for increased sensibility.
What have I learned?
One of my most important takeaways is that designing solely on assumptions and personal opinions make it much harder for the work to be successful. I have learned how reliant I've become on recruitment, user interviews, and usability testing in carrying my solutions and driving my design. The work is pointless if you don't let your users take part in your vision.
Another takeaway from this case study is documenting every step of your work is key - especially for those like myself who have just entered the user experience community. The journey is as important as the destination.