• Designmodo
    • Home
    • Portfolio
    • About
    • Contact

The CometFocus Case Study

The UI and UX process of the app allows you to focus or relax from the sounds of space.

Name

Overview

Project Brief

The car rental business — used usability tests and analytics and indicated that users are having a hard time navigating the website. 


The Problem

 

Designing from concept to inception, CometFocus needs a hassle-free onboarding process and the visual interface to navigate and use a variety of sounds to focus.

The Goal

I am creating a navigation workflow from signing up and listening to sounds as few steps as possible while designing a visually pleasing experience.
Responsibilities

User flow mapping, wireframing, and visual design
Tools
Figma, Adobe Illustrator, Adobe Photoshop

 

 

The Process

My process is consistent of: 

  • RESEARCH

    Find what other sound-generating apps navigate and their visual experience.

  • IDEATION

    It is wireframing the layout and size of the content.

  • DESIGNING

    I add design principles to create an engaging visual experience with illustrations and colors.

  • TESTING

    I am prototyping the design and engaging feedback on the user’s input.

Research

Understanding the core of the project.

Before designing, I want to see what this focus noise industry is doing well. Analyzing reviews on the App Store, experiencing their onboarding process first hand, and why certain apps no longer exist.

The Key Findings

  • Not visually engaging enough to invest time.
  • It lacked a personality in the branding of the app. 
  • Too many steps to get the user to listen to sounds. 

Proposed a design with easy access to critical sections (Focus, mission, and favorite) and simplified as much as possible.

  • Design principle: clean, playful, and colorful
  • Home Screen showing what’s new and relevant to the user
  • Navigation and inputs are easy to use and understand
  • Inspiration


  • Mode


  • Ideation

    Sketching and wireframes

     

    Design layouts from the screen opening to signing up, logging in, and if the user forgets the password.

    To design layouts of the three main sections of the app and an achievement screen for incentive usage.

    The Login Wireframe 

  • Name
  • The Login Wireframe

    Achievements screen: The place to see stats and other information on what the user has accomplished.
    Adventure screen: The main menu where the user finds sounds and other content within the app.
    Sound screen: The user will spend the most time listening to specific space theme sounds for focusing or relaxing.

  • Name
  • The Equinox Typeface

    The font usage is Equinox which captures the space-themed branding. Its uppercase and lowercase of the same font create a duality while being simple.

     

  • Name
  • The Navigation Bar Icons

    The three main colors of the navigation are the primary colors to give as much contrast at a glance, so every input is intentional.

  • Name

 

User Flows

Laying the foundation

 

 

Creating user flows is how the app will start and why the user wants to use the app.

By simplifying the process to get the workload of the developers as smooth as possible.
I am crafting a cohesive and friendly feel.

Here are the styles that were used in the design process of CometFocus:

 

 

 

  • The Onboarding Process

     

    When users start the app, they go through a sign-in or sign-up and onboarding before proceeding to their default screen, the focus screen, which has a footer navbar. The navbar has three tab options: 

     

    Focus -  where users go to see and explore the different sounds to focus with

    Mission - where users go to learn more about space and how to enhance their productivity beyond the sounds

    Favorite - where the users go to find their favorite sounds and other content without having to search for it

  • Name
  •  

    The Sound Screens

    The sound player screen is the crucial feature where the user will spend the most time on the app on.

    • Features visually beautiful illustrations with personality titles
    • Accessible User inputs
    • airplay and timers to listen to how the user wants to 

     

  • Name
  • The Splash Onboarding

     

    When users start the app, they go through a sign-in or sign-up and onboarding before proceeding to their default screen, the focus screen, which has a footer navbar. The navbar has three tab options:

     

    Focus -  where users go to see and explore the different sounds to focus with

     

    Mission - where users go to learn more about space and how to enhance their productivity beyond the sounds

     

    Favorite - where the users go to find their favorite sounds and other content without having to search for it

     

  • Name
  •  

    The Achievement Screen

    The screen that records and displays the stats and accomplishments the user has made. This screen can implement a reward system to enhance more prolonged and more frequent usage.

     

  • Name

The Project Learnings

What I've learned from this project?

  • Playful and colorful illustrations bring the experience to life needed in the market.
  • Simplicity signing up and navigation will always be the most significant deciding factor in why someone would want to stop using the app.
  • Incentivizing reasons to explore the app will build a stronger connection to the user and their desired outcome.

 

 

Are You Ready to Have Your Visual Problems Solved?

You can call me at 253.670.5440 or email me at Nick@NickMannDesigner.com.

  • Name
  • Car Rental Navigation Case Study

    An analysis of wireframing and implementing a great user experience for a car rental business.

    Take a look ›

  • Name
  • The Paymetric Onboarding 

    Process Case Study

    A look at the process to enjoy transferring money with the Paymetric app.

    Take a look ›