Productivity reimagined
A time management tool that keeps you on track
Procrastination, losing track of time, and distractions prevent us from making the most of our time. Like many of us, our client struggled with these problems. He spent many years developing a time tracking technique to maximize his productivity. He knew there are many out there who could benefit from his learnings and came to us to design an app based on his technique.
MY ROLE
I owned visual design, UI animations, and overall app design. My teammate Olivia focused on the dashboard. We collaborated on research, usability testing, and design strategy.
PROBLEM
“I’m not as productive as I would like”
It feels great to be productive but often times there’s that dreaded task we avoid. Or we believe the task is not going to take as long as it does. Or there's just simply so many distractions that we lose track of the things we should be doing. These are all scenarios that prevents us from being as productive as we could be.
SOLUTION
“Being productive can be fun and easy”
If the dreaded task is broken down into smaller steps it will not feel as scary. With a timer and unobtrusive alerts at regular intervals, we will be more aware of pacing. Having an agenda can help us better manage our time throughout the day. But most importantly, being productive can be like a game to complete the task before the time is up!
RESEARCH & INSIGHT
Client kickoff
In the kickoff meeting, we learned our client has a very specific technique in mind. His focus is on regimens or routine tasks. In his system one should complete as much as possible within a specific timeframe and then move on to the next task, even if it means the prior task is incomplete. His vision of the app breaks down into four steps.
Who can benefit from this technique?
To understand our target users and how can we help them, we started off with secondary research. We looked into time management techniques, procrastination traits, and solutions. Through this research, we identified three types of users who can benefit from this technique.
How will people react to this technique?
To get a glimpse of people’s attitude toward interval and time tracking techniques we conducted four interviews. A couple of key themes shaped our design decisions.
What we learned from our competitors?
To learn from our competitors we looked into some productivity and focus apps that feature a timer or use the Pomodoro technique.
Competitive analysis: Click image to enlarge
DESIGN PROCESS
Refining the technique
First, my teammate Olivia and I worked with the client to refine his technique to be more forgiving and relatable based on what we found from our research. Our main insight was that users want to be able to create single-task regimens when breaking into subtasks is difficult or impossible. Also, we felt it was important to allow the user to extend a task after time is up so they can finish it. At the same time, we wanted to log average time spent on each task (including extensions) to help users learn how much time they need on each task or regimen and make adjustments accordingly.
Avoid designing a Swiss Army knife
We got a little too excited with all the possible features. Everyone including the client was coming up with features and the app was becoming a bit too comprehensive. To ensure a simple and intuitive experience for the users we used the MoSCoW feature prioritization method to narrow our MVP.
DESIGN DECISIONS
Overview of the app
To keep the app simple there are only three main screens, which are stats, home, and settings. The primary actions all take place on the home screen.
Flow for creating regimen
To add or create a regimen, user go through four sections. The first section is naming the regimen. In the second section, the user chooses between adding subtasks or not. If the user choose not to add subtasks, they just simply set the duration for the entire regimen. If the user chooses to create subtasks, they will name and set the duration for each subtasks. In the third section, users get to pick how often they want to repeat the regimen. Since this app is focused on regimens and routine tasks, a non-repeat option is not provided. The fourth and final section is where users have the option to set a reminder. They can skip this section if reminder is not needed.
All four sections are separated by different colors to provide a strong visual distinction between different sections. All buttons start grayed-out and become colored as the user fills out the form. This guides the user through the flow. A tab bar is also included on this form so user can always exit out when needed.
Flow during regimen
To start on a regimen, users simply select the regimen and the timer screen will slide down. After the user presses start. They just focus on completing the task while the timer counts down. As the timer gets close to running out an unobtrusive alerts will notify the user. If the user finishes their task they can move on to the next one; otherwise, they have the option to extend until the task is finished.
We decided to add some fun to the app and use an animated hourglass for the timer. The hourglass is also the signature of this app. On this screen, users get to see their progress on their regimen. The number of dots below the hourglass represents the number of subtasks. The dots will be highlighted in color as the user progress. Users can swipe left to move to the next subtask if they finish early, then swipe right to go back and the timer will start where it left off. When users who did not complete a task in the allotted time choose to extend the time limit, the timer will start counting up to allow the users see how much time they are running over. Also, a chronometer will sound if the user extends their subtask with one tick per minute.
Accessibility
With accessibility in mind we provided several setting options for users. Enabling Siri shortcuts allow users to give verbal commands during their regimen without having to reach to their phone. The flash option blinks the screen when time’s up, useful for users with hearing impairment or those just simply in a noisy environment. The vibration option is helpful when a user puts their phone in their pocket during a regimen. The chronometer option helps users with visual impairments keep track of time during their regimen.
Color scheme
Being productive doesn’t have to be boring. I picked a warm, analogous color scheme to add a bit of fun and excitement. Each color is slightly muted so they complement each other harmoniously. As for the background, I use a muted off-white color on the light theme so it’s easier on the eyes. And for the dark theme, I chose a warm dark gray to compliment the rich colors.
CONCLUSION
Next step
Continue to improve usability and experience based on users’ feedback. Also, conduct further research about accessibility and make additional improvements. Possibly add a category feature to allow users to organize their regimens.
What I learned
One lesson this project taught me was to always do my research before diving in. Originally I wanted an animated splash screen to establish the theme of the app. So I dove right in to creating that animation, only to find out after delivering the animation to the developer that iOS doesn’t allow animated splash screens.
Another lesson was about the role of high-fidelity mockups. They are not just about putting on the final coat of paint. They can also be an opportunity for stakeholders & collaborators to provide additional input as the design becomes more real in their eyes. Low- and mid-fidelity mockups help a team focus on the big picture but the details are equally important. High-fidelity mocks can bring the team’s attention to those details, so a designer should be prepared for revisions at this stage as well.
A final takeaway for me was that visual design techniques applied on top of a strong UX is a powerful combination. Although UX is not about making things look pretty, an important component of the overall user experience is the look & feel of the app itself. Well-applied visual design techniques like careful selection of color scheme can help an app stand out among its competitors.