The CometFocus Case Study
The UI and UX process of the app allows you to focus or relax from the sounds of space.
Overview
Project Brief
the car rental business, — used usability tests and analytics and has indicated that users are having a hard time navigating around 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
Wireframing the layout and size of the content
DESIGNING
adding design principles to create an engaging visual experience with illustrations and colors
TESTING
Prototyping the design and engaging feedback on the user’s input
Research
Understanding the core of the project.
Before any designing, I want to see what this focus noise industry is doing well and not. 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
- Lacking 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
Gathering of ideas
Sketching and wireframes
Designed layouts from the screen opening to signing up, logging in, and if the user forgets the password.
Designed layouts of the three main sections of the app and an achievement screen for incentive usage.
The Login Wireframe
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 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.
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
By creating user flows is how the app will start and get to the reason the user wants to use the app. By simplifying the process to get the workload of the developers as smooth as possible.
Crafting a cohesive and friendly look and 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 on.
- 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 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.
The Project Learnings
What I've learned from this project?
- Playful and colorful illustrations bring the experience to life that is much 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?
Let's get in touch to see how I can make your users fall in love with your product.
