Neumorphism design examples.

Neumorphism design examples.

My first designs were inspired by glassmorphism

My first designs were inspired by glassmorphism

I was first inspired by the visual style of glassmorphism and started practicing by making wireframes within the style. However, I then shifted my focus to neumorphism.

Nucleus

Mobile widget icon

Mobile widget icon

The vectorized logo

The vectorized 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!

Logo

Building the UI

Prioritization Matrix

Maps & 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.

Sitemap

Sitemap

Close up of user flow

I then presented my prototype to the four participants I had presented the concept to, in hopes to find what could be revised and iterated upon. I asked them to navigate the flow and envision that they were uploading a collaborative track.

  • Users aligned with the UI / aesthetic

  • It was noted that there should be a way to end the Pomodoro timer and complete the task early, in case the user wanted to log finishing the task ahead of time.

  • (1) User noted he would like an introductory screen (upon opening the app for first time) that explained a Pomodoro timer.

  • (2) Users noted that the navigation buttons could use work, mainly by adding 'back' and 'X' buttons to close out where relevant.

  • The 'home' button from hamburger menu goes to Timer interface, when it could go to the main opening menu.

  • Users aligned with the UI / aesthetic

  • It was noted that there should be a way to end the Pomodoro timer and complete the task early, in case the user wanted to log finishing the task ahead of time.

  • (1) User noted he would like an introductory screen (upon opening the app for first time) that explained a Pomodoro timer.

  • (2) Users noted that the navigation buttons could use work, mainly by adding 'back' and 'X' buttons to close out where relevant.

  • The 'home' button from hamburger menu goes to Timer interface, when it could go to the main opening menu.

Results


Usability Testing

  • Navigation clarity. In this case, displaying a color change on a date to indicate there is an existing task scheduled.








  • Navigation clarity. In this case, displaying a color change on a date to indicate there is an existing task scheduled.








  • Adding outlines to timer interface play/pause button to reinforce state.

  • Adding outlines to timer interface play/pause button to reinforce state.

  • Adding 'Complete' button on Timer which finishes the task, even if the timer has not stopped running so the user can track the time it took to finish.

  • Adding 'Complete' button on Timer which finishes the task, even if the timer has not stopped running so the user can track the time it took to finish.

Revisions

Must Have

  • Timer interface

  • Metrics Tracking

  • Task creation

  • Category sorting

  • App whitelisting

  • To do lists (scheduled organized tasks)

  • App whitelisting

  • To do lists (scheduled organized tasks)

Should Have

  • Introduction to Pomodoro technique

  • Light/Dark modes

Could Have

Defining Goals

Adding to the personas, affinity mapping was used to establish takeaways that would lead into prioritizing the feature set for the product.

Honing our focus

SYNTHESIS AND IDEATION

Look and feel

BUiLDING A UI

I felt that the largest room for improvement was in the UI and aesthetic of the apps. I decided to focus this case study on developing a visual style that felt modern and suited to this type of app.



…more on that in a little!




I felt that the largest room for improvement was in the UI and aesthetic of the apps. I decided to focus this case study on developing a visual style that felt modern and suited to this type of app.



…more on that in a little!




Pomodoro interface

Focus tracking

Custom timers

Competitor Analysis

I analysed three of the leading focus timer / pomodoro timer applications on the app store, Focus Timer, Pomofocus, and Pomodoro. Customers seemed drawn to these apps for similar features:

First, we need to synthesize our research into the best priorities to focus on while building out Nucleus.

Two personas were created, to paint a picture of a typical Nucleus user and how the app could benefit them. The personas and the varying aspects of their pain points and aspirations already demonstrates that the app's ability to help focus can apply to work, personal matters and overall time management as a whole.

Pomodoro interface

Focus tracking

Custom timers

Custom 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/ categories.

  • 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.

User Interviews

5 Users were interviewed, ranging from ages 29-65. Users were asked about their familiarity with the Pomodoro technique, their usage of timers in every day life, as well as aesthetic and style choices that might accompany their perfect timing application.

Users were asked about their familiarity with the Pomodoro technique, their usage of timers in every day life, as well as aesthetic and style choices that might accompany their perfect timing application.

Key Findings

Key Findings

Putting in time

RESEARCH

The Pomodoro effect

OVERVIEW

A to-do list timer that's Pomodoro powered

A to-do list timer that's
Pomodoro powered

Nucleus

Nucleus

Roles

Research

UI design

Branding


Tools

Figma

Framer

Adobe Illustrator


Timeline

3 Weeks

Industry

Self-improvement


High Fidelity Wireframe

First Iteration

Staying focused in todays world where a myriad of distractions are always around can be a challenged. The Pomodoro technique is based around a timer that breaks down periods of focus into manageable pieces, interspersed with short and long breaks. Nucleus is a mobile based Pomodoro timer than allows you to create customized timers from to do lists, as well as track your focus progress and temporarily disable apps while in focus mode.

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 manage focus their time.

Finding a solution

Final Wireframe + Prototype

Final Wireframe
+ Prototype

To- Do List module

Adding timers to list.

Naming a new To - Do List

Pomodoro timer in action

Loading + Splash screen.

Calendar view

To- do list module

Weekly metric tracking

Final interactions overview.

Prototype

I felt that neumorphism worked well for an app of this nature, and began to build out the UI and visual identity of the product. It had a minimal feel and I enjoyed the use of shadows to create elements. I began building the UI.

In order to define these must-have features, we need to contextualize the user journey in some manner. For this I move into user/task flows and site mapping.

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.

Conclusion

Next Case Study

This end-to-end envisioning of an application elevated my branding skills as well as introduced me to new styles of design such as Neu and Skeumorphism. Overall, there is so much in design to explore, combine and create your own UI styles that speak volumes about the designs you are creating.

This end-to-end envisioning of an application elevated my branding skills as well as introduced me to new styles of design such as Neu and Skeumorphism. Overall, there is so much in design to explore, combine and create your own UI styles that speak volumes about the designs you are creating.

Sketching

LOW FIDELITY WIREFRAMING

At first, I experimented with a dark/ light mode for the Timer.

At first, I experimented with a dark/ light mode for the Timer.

I knew I wanted to implement metric tracking and scheduled Timers / To - Do lists from my

user research and market analysis.

I knew I wanted to implement metric tracking

and scheduled Timers / To - Do lists from my

user research and market analysis.

Low fidelity sketch for creating a timer, and
a to do list composed of three editable timers.

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.

Low fidelity sketch for creating a timer, and a to do list composed of three editable timers.

Adding timers to list.

Roles

Research

UI design

Branding


Tools

Figma

Framer

Adobe Illustrator


Timeline

3 Weeks

Project Type

Case Study