Challenge
Staying focused in todays world where a myriad of distractions are always around can be a challenge.
Solution
Nucleus is a mobile based Pomodoro timer than allows you to create customized timers from to do lists.
Role
Visual Identity, Research, Prototyping
CREATIVE DESIGN
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 smarthome apps and the Tesla app to find some inspiration.
01 /
Colors
Based on the user interviews, I knew that blues, greens, 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.
02 /
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.
02 /
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!
I interviewed five users, asking them questions regarding their focus habits, desired improvements, and knowledge of Pomodoro timers.
Summarized Findings
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/ categories.
I interviewed five users, asking them questions regarding their focus habits, desired improvements, and knowledge of Pomodoro timers.
OBSERVING AND ITERATING
Wireframing
01 /
Low Fidelity
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.
01 /
Creating Flows
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.
TESTING AND REFINING
Usability Testing
01 /
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.
02 /
User Testing Results
One of the main takeaways from the initial tests was that there was 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.
FINAL WIREFRAMES
SUMMARIZING
Reflection
In addition to interviewing users, I did competitive analysis via the SWOT method to break down what made some similar apps available, and what we could do differently.
