BEAUTY BAE
BEAUTY BAE
BEAUTY BAE
BEAUTY BAE
BEAUTY BAE
Overview
Overview
Overview
Overview
Overview
Beauty Bae, a inclusive beauty platform, we aimed to prioritizes transparency and encourages authentic feedback, fostering a sense of reliability among users. Honest reviews are valuable as they provide genuine insights into the quality of services and customer experiences.
Beauty Bae is an inclusive beauty platform,
we aimed to prioritizes transparency and encourages authentic feedback, fostering a sense of reliability among users.
Honest reviews are valuable as they provide genuine insights into the quality of services and customer experiences.
Beauty Bae is an inclusive beauty platform,
we aimed to prioritizes transparency and encourages authentic feedback, fostering a sense of reliability among users.
Honest reviews are valuable as they provide genuine insights into the quality of services and customer experiences.
Beauty Bae is an inclusive beauty platform,
we aimed to prioritizes transparency and encourages authentic feedback, fostering a sense of reliability among users.
Honest reviews are valuable as they provide genuine insights into the quality of services and customer experiences.
Beauty Bae is an inclusive beauty platform,
we aimed to prioritizes transparency and encourages authentic feedback, fostering a sense of reliability among users.
Honest reviews are valuable as they provide genuine insights into the quality of services and customer experiences.
Client
Client
Client
Client
Client
Case Study
Case Study
Case Study
Case Study
Case Study
Industry
Industry
Industry
Industry
Industry
Beauty Service
Beauty Service
Beauty Service
Beauty Service
Beauty Service
Service
Service
Service
Service
Service
UI / UX Design
UI / UX Design
UI / UX Design
UI / UX Design
UI / UX Design
Web Development
Web Development
Web Development
Web Development
Web Development
Digital Design
Digital Design
Digital Design
Digital Design
Digital Design
Duration
Duration
Duration
Duration
Duration
8 Weeks
8 Weeks
8 Weeks
8 Weeks
8 Weeks
PROBLEM STATEMENT
PROBLEM STATEMENT
PROBLEM STATEMENT
PROBLEM STATEMENT
PROBLEM STATEMENT
The problem
The Problem
The Problem
The Problem
The Problem
The existing onboarding process for the FitLife app was confusing and cumbersome, leading to high drop-off rates and user frustration. New users struggled to navigate the app, understand its features, and set up their profiles, which negatively impacted user retention and overall satisfaction.
There is no CUTE beauty booking platform
that provide enough trustable details to convince me to book?
There is no CUTE beauty booking platform
that provide enough trustable details to convince me to book?
There is no CUTE beauty booking platform
that provide enough trustable details to convince me to book?
There is no CUTE beauty booking platform
that provide enough trustable details to convince me to book?
Eva Elle
Insight 01
Insight 01
Insight 01
Insight 01
@evaelle
HMW
HMW
HMW
HMW
Thank you for building such an empowering tool, especially for designers! The site went from Figma to Framer in less than a week!
create a platform that encourage users to give honest reviews
create a platform that encourage users to give honest reviews
create a platform that encourage users to give honest reviews
create a platform that encourage users to give honest reviews
Guy Mccoy
Insight 02
Insight 02
Insight 02
Insight 02
@mccoy
HMW
HMW
HMW
HMW
Playing around with @framer while building a landing page for a side project. I’m terrible at animations, but they make it so easy!
include a filtering system that generate worthy beauty services
include a filtering system that generate worthy beauty services
include a filtering system that generate worthy beauty services
include a filtering system that generate worthy beauty services
Kayla Ray
Insight 03
Insight 03
Insight 03
Insight 03
@kayray
HMW
HMW
HMW
HMW
I’ve built pretty handy sites powered by Craft or WordPress in the past, but seeing @framer tackle CMS stuff so effortlessly is mind-boggling
provide inclusivity for the unique beauty concerns of diverse racial group
provide inclusivity for the unique beauty concerns of diverse racial group
provide inclusivity for the unique beauty concerns of diverse racial group
provide inclusivity for the unique beauty concerns of diverse racial group
DESIGN SOLUTION
FINAL DESIGN
BEAUTY BAE
BEAUTY BAE
BEAUTY BAE
BEAUTY BAE
You can add what outcomes has this project brought after your design! For example, can show some real data.
Beauty booking platform that provides designs for all the beauty baes out there! 💅
Beauty booking platform that provides designs for all the beauty baes out there! 💅
Beauty booking platform that provides designs for all the beauty baes out there! 💅
Beauty booking platform that provides designs for all the beauty baes out there! 💅
Tell me more
Hi Baes! Are you ready to GLOW UP✨
Hi Baes! Are you ready to GLOW UP✨
Hi Baes! Are you ready to GLOW UP✨
Hi Baes! Are you ready to GLOW UP✨
Design Solution
Product Description
Product Description
Product Description
Product Description
The onboarding process for the FitLife app was chosen for exploration because it is the first interaction users have with the app. A smooth and engaging onboarding experience is crucial for user retention and satisfaction.
We promote transparent and credible beauty searching platform, NO SCAMs, NO FAKE REVIEWS, full refund if service is not Giving✨
We promote transparent and credible beauty searching platform, NO SCAMs, NO FAKE REVIEWS, full refund if service is not Giving✨
We promote transparent and credible beauty searching platform, NO SCAMs, NO FAKE REVIEWS, full refund if service is not Giving✨
We promote transparent and credible beauty searching platform, NO SCAMs, NO FAKE REVIEWS, full refund if service is not Giving✨
Feature 01
Home Page (Community)
Home Page (Community)
Home Page (Community)
Home Page (Community)
Feature 01
Tag
Reviews
Reviews
Reviews
Reviews
Tag
Honest
Honest
Honest
Honest
Tag
Trust-Worthy
Trust-Worthy
Trust-Worthy
Trust-Worthy
This flowchart illustrates the steps a user takes during the onboarding process, from initial app download to completing the onboarding tutorial and accessing the main app features.
Verified Review System
Only users who have booked through the platform can leave reviews, and anonymous feedback is allowed to make users feel safer when being honest.
Verified Review System
Only users who have booked through the platform can leave reviews, and anonymous feedback is allowed to make users feel safer when being honest.
Verified Review System
Only users who have booked through the platform can leave reviews, and anonymous feedback is allowed to make users feel safer when being honest.
Verified Review System
Only users who have booked through the platform can leave reviews, and anonymous feedback is allowed to make users feel safer when being honest.
Feature 02
This flowchart illustrates the steps a user takes during the onboarding process, from initial app download to completing the onboarding tutorial and accessing the main app features.
Top-Rated Filter with Smart Tags
Users can filter services based on verified ratings, service quality, cleanliness, price and location(distance).
Top-Rated Filter with Smart Tags
Users can filter services based on verified ratings, service quality, cleanliness, price and location(distance).
Top-Rated Filter with Smart Tags
Users can filter services based on verified ratings, service quality, cleanliness, price and location(distance).
Top-Rated Filter with Smart Tags
Users can filter services based on verified ratings, service quality, cleanliness, price and location(distance).
Browsing Filter
Filtering System
Filtering System
Filtering System
Filtering System
Tag
Cleanliness
Cleanliness
Cleanliness
Cleanliness
Tag
Price
Price
Price
Price
Tag
Quality
Quality
Quality
Quality
Tag
Distance
Distance
Distance
Distance
Feature 03
This flowchart illustrates the steps a user takes during the onboarding process, from initial app download to completing the onboarding tutorial and accessing the main app features.
Personalized Beauty Profile
During onboarding, users select their skin type, hair texture, cultural beauty needs, and preferred treatments, allowing the platform to recommend services that truly fit their identity.
Personalized Beauty Profile
During onboarding, users select their skin type, hair texture, cultural beauty needs, and preferred treatments, allowing the platform to recommend services that truly fit their identity.
Personalized Beauty Profile
During onboarding, users select their skin type, hair texture, cultural beauty needs, and preferred treatments, allowing the platform to recommend services that truly fit their identity.
Personalized Beauty Profile
During onboarding, users select their skin type, hair texture, cultural beauty needs, and preferred treatments, allowing the platform to recommend services that truly fit their identity.
Appointment Book
Personlized Booking
Personlized Booking
Personlized Booking
Personlized Booking
Tag
Inclusivity
Inclusivity
Inclusivity
Inclusivity
Tag
Diversity
Diversity
Diversity
Diversity
Tag
Personlize
Personlize
Personlize
Personlize
Tag
Feature 02
This flowchart illustrates the steps a user takes during the onboarding process, from initial app download to completing the onboarding tutorial and accessing the main app features.
Feature 03
This flowchart illustrates the steps a user takes during the onboarding process, from initial app download to completing the onboarding tutorial and accessing the main app features.
Design Process
Research
Research Objective
Research Objective
Research Objective
Research Objective
The onboarding process for the FitLife app was chosen for exploration because it is the first interaction users have with the app. A smooth and engaging onboarding experience is crucial for user retention and satisfaction.
To understand users' needs, trust factors, and diverse beauty concerns in order to design a platform that encourages honest reviews, surfaces trusted services, and supports inclusive beauty experiences.
To understand users' needs, trust factors, and diverse beauty concerns in order to design a platform that encourages honest reviews, surfaces trusted services, and supports inclusive beauty experiences.
To understand users' needs, trust factors, and diverse beauty concerns in order to design a platform that encourages honest reviews, surfaces trusted services, and supports inclusive beauty experiences.
To understand users' needs, trust factors, and diverse beauty concerns in order to design a platform that encourages honest reviews, surfaces trusted services, and supports inclusive beauty experiences.
User
Research
User
Research
User
Research
User
Research
User
Research
Ideation
Ideation
Ideation
Ideation
Ideation
Prototype
Prototype
Prototype
Prototype
Prototype
User Test
User Test
User Test
User Test
User Test
Final Design
Final Design
Final Design
Final Design
Final Design
Success metrics
Product Goals
Product Goals
Product Goals
Product Goals
01
01
01
01
01
Retention Rate: Increase the percentage of users who complete the onboarding process.
Honest Review: Encourage honest, safe, and authentic user reviews.
Honest Review: Encourage honest, safe, and authentic user reviews.
Honest Review: Encourage honest, safe, and authentic user reviews.
Honest Review: Encourage honest, safe, and authentic user reviews.
02
02
02
02
02
User Satisfaction: Improve user satisfaction scores from post-onboarding surveys.
Filtering System: Highlight worthy beauty services through smart filtering.
Filtering System: Highlight worthy beauty services through smart filtering.
Filtering System: Highlight worthy beauty services through smart filtering.
Filtering System: Highlight worthy beauty services through smart filtering.
03
03
03
03
03
Feature Adoption: Track the usage of key features post-onboarding.
Personalize Booking: Support diverse beauty needs across all racial groups.
Personalize Booking: Support diverse beauty needs across all racial groups.
Personalize Booking: Support diverse beauty needs across all racial groups.
Personalize Booking: Support diverse beauty needs across all racial groups.
Research
User Interview
User Interview
User Interview
User Interview
Conducted surveys with current and new FitLife app users, including fitness enthusiasts, casual users, and beginners, to understand onboarding issues and identify improvement opportunities.
70%
70%
70%
70%
70%
User confusion
Cleanliness matters
Cleanliness matters
Cleanliness matters
Cleanliness matters
70% of surveyed users reported feeling confused and disoriented during the onboarding process, indicating a need for a clearer and more intuitive introduction.
70% of users prioritize salon/service cleanliness when choosing beauty services.
70% of users prioritize salon/service cleanliness when choosing beauty services.
70% of users prioritize salon/service cleanliness when choosing beauty services.
70% of users prioritize salon/service cleanliness when choosing beauty services.
50%
50%
50%
50%
50%
Drop-off rate
Affordability is important
Affordability is important
Affordability is important
Affordability is important
50% of users abandoned the onboarding process before completion, underscoring the urgency to streamline and simplify the flow.
50% of users say price heavily influences their decision.
50% of users say price heavily influences their decision.
50% of users say price heavily influences their decision.
50% of users say price heavily influences their decision.
85%
85%
85%
85%
85%
Feature overload
Trust in Reviews
Trust in Reviews
Trust in Reviews
Trust in Reviews
85% of users felt overwhelmed by the number of features presented at once, suggesting a need to prioritize and stagger feature introductions for better user comprehension and engagement.
85% of users rely on customer reviews to decide where to book.
85% of users rely on customer reviews to decide where to book.
85% of users rely on customer reviews to decide where to book.
85% of users rely on customer reviews to decide where to book.
User Personas
Maya Johnson
Occupation: Marketing Manager
Location: New York City
"I want to feel confident that I’m booking the right service — clean, trustworthy, and right for me."
Goals:
Find clean, reliable beauty services easily.
Book services that suit her skin and hair type.
Feel confident that her chosen services are worth the price.
Personality:
Detail-oriented
Trust-driven
Curious and open-minded
Pain points:
Skepticism about fake or filtered reviews.
Difficulty finding services that cater to her textured hair.
Overwhelmed by too many unverified options online.
Competitor Analysis
Competitor Analysis
Competitor Analysis
Competitor Analysis
Competitor Analysis
Analyzing competitors provided valuable insights into industry standards and opportunities for improvement in the FitLife app's onboarding process.
MyFitnessPal
Styleseat
Styleseat
Styleseat
Styleseat
Strength:
Comprehensive tracking
User-friendly onboarding
Strength:
Wide variety of professionals
Easy online booking & payment
Strength:
Wide variety of professionals
Easy online booking & payment
Strength:
Wide variety of professionals
Easy online booking & payment
Strength:
Wide variety of professionals
Easy online booking & payment
Weaknesses:
Limited social features
Basic wearable integration
Weaknesses:
Limited service verification
High booking fees for users
Weaknesses:
Limited service verification
High booking fees for users
Weaknesses:
Limited service verification
High booking fees for users
Weaknesses:
Limited service verification
High booking fees for users
Nike Training Club
Booksy
Booksy
Booksy
Booksy
Strength:
Personalized workout plans
Intuitive navigation
Strength:
Clean, user-friendly interface
Strong review & rating system
Strength:
Clean, user-friendly interface
Strong review & rating system
Strength:
Clean, user-friendly interface
Strong review & rating system
Strength:
Clean, user-friendly interface
Strong review & rating system
Weaknesses:
Limited wearable integration
Moderate social features
Weaknesses:
Not all services are well-vetted
Some areas have limited options
Weaknesses:
Not all services are well-vetted
Some areas have limited options
Weaknesses:
Not all services are well-vetted
Some areas have limited options
Weaknesses:
Not all services are well-vetted
Some areas have limited options
Strava
Glamsquad
Glamsquad
Glamsquad
Glamsquad
Strength:
Strong community engagement
Extensive device integration
Strength:
High-quality professionals
At-home service convenience
Strength:
High-quality professionals
At-home service convenience
Strength:
High-quality professionals
At-home service convenience
Strength:
High-quality professionals
At-home service convenience
Weaknesses:
Overwhelming for beginners
Feature overload
Weaknesses:
Premium pricing
Limited to major cities only
Weaknesses:
Premium pricing
Limited to major cities only
Weaknesses:
Premium pricing
Limited to major cities only
Weaknesses:
Premium pricing
Limited to major cities only
Takeaways
Takeaways
Takeaways
Takeaways
Takeaways
Importance of user research: Understanding user needs and pain points is crucial for designing effective solutions.
Importance of user research: Understanding user needs and pain points is crucial for designing effective solutions.
Importance of user research: Understanding user needs and pain points is crucial for designing effective solutions.
Importance of user research: Understanding user needs and pain points is crucial for designing effective solutions.
Importance of user research: Understanding user needs and pain points is crucial for designing effective solutions.
Iterative design: Exploring multiple design options and iterating based on feedback leads to better outcomes.
Iterative design: Exploring multiple design options and iterating based on feedback leads to better outcomes.
Iterative design: Exploring multiple design options and iterating based on feedback leads to better outcomes.
Iterative design: Exploring multiple design options and iterating based on feedback leads to better outcomes.
Iterative design: Exploring multiple design options and iterating based on feedback leads to better outcomes.
Scaling Your Site
Learn about hosting built for scale and reliability.
Optimize for SEO
Learn how Framer can optimize your site for search engines.
CMS Examples
Get inspired by blogs, job openings, events and more.
PORTFOLIO
CHECK OUT SOME MORE
Luxe Beauty
Luxe Beauty
Luxe Beauty
UI / UX Design
Web Development
Digital Design
Beauty Bae
Beauty Bae
Beauty Bae
UX Ui
Digital Design
HAVE A PROJECT
IN MIND ?
LET'S WORK TOGETHER
LET'S WORK TOGETHER
LET'S WORK TOGETHER
“
”
Enhancing FitLife app onboarding
During my internship at FitLife Inc., I redesigned the onboarding process for the FitLife app. The goal was to improve user retention and satisfaction by creating a more intuitive and engaging onboarding experience. FitLife is a fitness tracking app that helps users monitor their activities and progress.
Role: UX & UI design
Tools: Figma, Anima, Spline
Team: 2 product designers and a UX researcher
Timeline: 4 months (January 2023 - April 2023)
PROBLEM STATEMENT
The problem
The existing onboarding process for the FitLife app was confusing and cumbersome, leading to high drop-off rates and user frustration. New users struggled to navigate the app, understand its features, and set up their profiles, which negatively impacted user retention and overall satisfaction.
Success metrics
01
Retention Rate: Increase the percentage of users who complete the onboarding process.
02
User Satisfaction: Improve user satisfaction scores from post-onboarding surveys.
03
Feature Adoption: Track the usage of key features post-onboarding.
Surveys
Conducted surveys with current and new FitLife app users, including fitness enthusiasts, casual users, and beginners, to understand onboarding issues and identify improvement opportunities.
70%
User confusion
70% of surveyed users reported feeling confused and disoriented during the onboarding process, indicating a need for a clearer and more intuitive introduction.
50%
Drop-off rate
50% of users abandoned the onboarding process before completion, underscoring the urgency to streamline and simplify the flow.
85%
Feature overload
85% of users felt overwhelmed by the number of features presented at once, suggesting a need to prioritize and stagger feature introductions for better user comprehension and engagement.
Competitor Research
Analyzing competitors provided valuable insights into industry standards and opportunities for improvement in the FitLife app's onboarding process.
MyFitnessPal
Strength:
Comprehensive tracking
User-friendly onboarding
Weaknesses:
Limited social features
Basic wearable integration
Nike Training Club
Strength:
Personalized workout plans
Intuitive navigation
Weaknesses:
Limited wearable integration
Moderate social features
Strava
Strength:
Strong community engagement
Extensive device integration
Weaknesses:
Overwhelming for beginners
Feature overload
User Flow
This flowchart illustrates the steps a user takes during the onboarding process, from initial app download to completing the onboarding tutorial and accessing the main app features.
Exploration
The onboarding process for the FitLife app was chosen for exploration because it is the first interaction users have with the app. A smooth and engaging onboarding experience is crucial for user retention and satisfaction. By improving this component, we aimed to reduce user drop-off rates and ensure users understand the app's value proposition quickly.
Exploration one
Step-by-step walkthrough
Pros
Provides detailed guidance for each feature.
Reduces initial user confusion.
Cons
Can be time-consuming for users.
May overwhelm users with too much information upfront.
Exploration one
Interactive tutorial
Pros
Engages users through hands-on learning.
Allows users to explore features at their own pace.
Cons
Requires more development effort.
Some users may skip the tutorial, missing important information.
Exploration one
Minimalistic onboarding
Pros
Quick and straightforward, allowing users to start using the app immediately.
Reduces initial cognitive load.
Cons
May leave users unaware of key features.
Less guidance can lead to confusion later on.
Selected option
We chose the interactive tutorial because it balances user engagement with effective learning. This option allows users to learn by doing, which helps them retain information better and feel more confident using the app. Although it requires more development effort, the benefits of higher user engagement and better feature understanding outweigh the cons. By allowing users to explore at their own pace, we can cater to both novice and experienced users, enhancing the overall onboarding experience.
Workout tracking
The Workout Tracking Page features an improved layout that allows users to log their exercises quickly and efficiently. The page includes interactive charts and real-time feedback, helping users monitor their performance and make adjustments as needed.
Nutrition log
The updated Nutrition Log simplifies meal tracking with a user-friendly interface and comprehensive food database. Users can easily log their meals, view nutritional information, and track their daily intake to stay on top of their dietary goals.
Takeaways
Importance of user research: Understanding user needs and pain points is crucial for designing effective solutions.
Iterative design: Exploring multiple design options and iterating based on feedback leads to better outcomes.
User
Research
Works
About
Articles
Experiments
© 2021 your name
Back up
SaaS
Project title
You can add what outcomes has this project brought after your design! For example, can show some real data.
Tell me more
More works.
Project Title
Fill your project brief here. It can be the outcome of the project, or some success metrics, or a cheesy tagline.
Mobile App
Website
SaaS
Project Title
Fill your project brief here. It can be the outcome of the project, or some success metrics, or a cheesy tagline.
Mobile App
Website
SaaS
Reach out for more?
I regularly post my thoughts on twitter, and also write some articles on Medium. Otherwise, my linkedin is always welcoming.
😃 your email will be receiving goodies
Let me in!
Project title
Mobile App
You can add what outcomes has this project brought after your design! For example, can show some real data.
Tell me more
😎
I made you looked.
You can have the rest of the empty space here.
😎
I made you looked.
You can have the rest of the empty space here.
Project title
Mobile App
You can add what outcomes has this project brought after your design! For example, can show some real data.
Tell me more
More works.
Project Title
Fill your project brief here. It can be the outcome of the project, or some success metrics, or a cheesy tagline.
Mobile App
Website
SaaS
Project Title
Fill your project brief here. It can be the outcome of the project, or some success metrics, or a cheesy tagline.
Mobile App
Website
SaaS
Project Goals
To create an application that helps build & track healthy habit
Encourage / motivate users to take action
Create awareness about unhealthy lifestlyle
Personas
The personas were developed through a combination of user surveys, interviews, and analysis of user behavior. By synthesizing this data, we identified common patterns and characteristics that informed the creation of realistic and representative user profiles.
Sarah Johnson
Sarah is a busy marketing manager who uses fitness apps to maintain her health and track her progress.
Motivations:
Stay healthy and track progress.
Find efficient, user-friendly tools.
Explore new fitness features.
Goals:
Integrate a fitness app into her routine.
Access personalized workout plans.
Achieve fitness goals like increased stamina.
Technology:
Uses an iPhone.
Wears a Fitbit.
Syncs data with cloud services.
Pain points:
Confusing app interfaces.
Overwhelming onboarding processes.
Inconsistent tracking data.