A to-do list that's Pomodoro powered
Time is our most valuable resource and possibly the greatest luxury. The Pomodoro technique breaks down focus into manageable chunks of time dedicated to a specific task. I felt that the Pomodoro method could be used for any manner of to-do list and set out to envision a product that could help everyone to improve their focus.
The challenge
User need
Staying focused in todays world where a myriad of distractions are always around can be a challenge.
Product need
Nucleus is a mobile based Pomodoro timer than allows you to create customized timers from to do lists.
The approach
How might we help people improve their focus by breaking tasks into manageable, distraction-free chunks of time?
Key insights
Findings from interviews with five users about their focus habits and knowledge of Pomodoro timers.
The desire to improve focus habits is unanimous.
Users would like to prioritize or list tasks but require a simple UI.
It would be ideal to be able to split tasks into categories such as personal, work, and so forth.
Greyscale colors are desired, with any colors used to accentuate or "highlight." It's best to keep an application like this clean and not too distracting.
Users would like to track the rate of completion, as well as the time spent on individual tasks and categories.
Process & iterations
Observing and iterating: research, personas, brand, and wireframes.
User research & personas
Using my research results, I created two personas to better understand the user's needs and goals for using Nucleus.
Colors
I knew that I wanted to use greyscale hues with pastel accents, and that I wanted the app to have a modern feel. I looked at smart home apps and the Tesla app to find some inspiration. Based on the user interviews, I knew that blues, greens, and greys were often associated with focus and were preferential to use for Nucleus. I experimented with palettes online until I found a complementary teal blue that anchored the entire color scheme.
Logo
I designed the logo in Adobe Illustrator, using numerous icons and illustrations of atoms as inspiration. My final design represents focus in the center of the atom, as the nucleus, with the rings (usually used to represent protons and neutrons) representing the container for focus that the product provides.
Typography
Geist embodies the design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement. The minimal nature of this monospace font aligned well with the purpose of the app.
User flows & wireframing
After prioritizing the necessary features, I began drafting site maps and user flows to help better understand how the user will navigate the app and ultimately hone their focus.
With the prioritized flows and features in mind, I began creating low fidelity wireframes to help understand how the UI for Nucleus will feel. This included experimenting with a light and dark mode, for which I decided to implement the light mode.
Testing & outcomes
Testing and refining, then the final high-fidelity prototype.
Initial prototype
Using my design system, user flows, and wireframes, I created an initial prototype to test with users for feedback. This initial prototype consisted of a splash screen, timer view, and statistics/metrics. Because the aim of this project was to create a unique visual design, I focused most of my attention on the visual identity of the screens.
User testing results
One of the main takeaways from the initial tests was that there was a lack of clarity in the navigation. Users requested methods to complete the Pomodoro timer ahead of time, as well as navigate through the app freely using closing "X" buttons and back navigation.
High-fidelity prototype
The final wireframes, refined into a high-fidelity prototype.
By the numbers
Reflection
This case study gave me valuable insight into "glassmorphism" and "neomorphism" design styles and also taught me how to prioritize the user and simplicity when building an interface.