The CometFocus Case Study

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

Overview

What is the CometFocus App?

CometFocus is an iOS app concept to help the user find a calmer mind through the sounds of outer space. This is a look at the start and finish of an idea for a prototype app.

The Problem

Designing from concept to inception, CometFocus needs a hassle-free onboarding process and a visual interface to navigate and use a variety of sounds to focus. I also learned how people learned about the app and how they applied it in their life.

The Goal

I am creating a navigation workflow from signing up and listening to sounds in 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

Goals & Features

👤 User Goals

Have a clear mind and feel more at ease
Feel confident in their ability to focus
Simple learning curve
Know all details of space news and special events to watch in the sky
Easy to access favorites
Achievements to work towards

💼 Business Goals

Become an industry leader in the productivity category
Create a new logo, branding, and UI design to position the app in the market
Utilize technology to optimize focus retention for every listener
Sell products through external media
Keep product information and newsfeed up to date
Recommend focus tips to users

🙏 Common Goals

Have a delightful listening experience
Develop new astronomy tending hobby for users
Catalog and information on products
Learn and attend upcoming sky events
See illustrations of space objects

‍

💻 Technical Specifications

Ability to log in and sign up
Account creation and control
UI can work for a listening experience
UI that works under iOS material design
Accessible and usable to all groups

User Persona
Through user testing, I found out who is the ideal person who would enjoy CometFocus. Many people from a variety of life enjoy stargazing, but not all would enjoy a mindfulness app to bridge that into their work-life.

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.
I've also sketched out the illustrations that will be used throughout the app.

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.

The Typography
The challenge of finding the correct font painting is to fit a sci-fi feel but not to compromise easy readability. As much as I love a lot of cool sci-fi fonts, a lot were designed for top headers only. I found the Equinox typeface to accomplish that without being overbearing.
I balanced a readability font through a geometric style with the Avenier typeface.

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.

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

The Sound Screens
The sound player screen is the crucial feature where the user will spend the most time on the app.
- Features visually beautiful illustrations with personality titles
- Accessible User inputs
- airplay and timers to listen to how the user wants to

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

The Achievement Screen
The screen 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.

The Prototype

You can view the finished product of Cometfocus below.

The Project Learnings

What did I learn from this project?

Playful and colorful illustrations bring the experience to life needed in the market.
Simplicity in 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 with the user and their desired outcome.

Let's Work Together

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