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.
The Responsibilities
User flow mapping, wireframing, and visual design
The 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
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 hobbies 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
Goals & Features
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.
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.
Ideation
User Flows
Laying the foundation
Creating user flows is how the app will start and why the user wants to use the app.
I also want to simplify 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 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 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 Avenir typeface.
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 sound.
Favorite - where the users go to find their favorite sounds and other content without having to search for it
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 sound.
Favorite - where the users go to find their favorite sounds and other content without having to search for it
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.