Redesigning the Onboarding Experience for Quin Ride
Redesigning the Onboarding Experience for Quin Ride
UI/UX Project
Project Objective
Project Objective
Project Objective
Redesigning the onboarding to be more intuitive, informative, and user-centered—minimizing friction and guiding users through a clear, well-structured first-time experience.
Redesigning the onboarding to be more intuitive, informative, and user-centered—minimizing friction and guiding users through a clear, well-structured first-time experience.
Redesigning the onboarding to be more intuitive, informative, and user-centered—minimizing friction and guiding users through a clear, well-structured first-time experience.
Timeline
Timeline
Timeline
1.5 Months
1.5 Months
1.5 Months
Team
Team
Team
1 Designer
1 Designer
1 Designer
1 PM
1 PM
1 PM
2 FE Developers
2 FE Developers
2 FE Developers
1 BE Developer
1 BE Developer
1 BE Developer
My Role
My Role
My Role
UX Research
UX Research
UX Research
Visual Design
Visual Design
Visual Design
Interaction Design
Interaction Design
Interaction Design
My Tools
My Tools
My Tools
Figma
Figma
Figma
Google Meet
Google Meet
Google Meet
Google Forms
Google Forms
Google Forms
Before we get started,
let's understand Quin
Before we get started,
let's understand Quin
Before we get started,
let's understand Quin
Quin develops smart helmet technology with patented sensors that
detect impacts, alert emergency contacts, and provide real-time
ride analytics and much more.
Quin develops smart helmet technology with patented sensors that detect impacts, alert emergency contacts, and provide real-time ride analytics and much more.
Quin develops smart helmet technology with patented sensors that
detect impacts, alert emergency contacts, and provide real-time
ride analytics and much more.
Thought behind Quin
Thought behind Quin
Thought behind Quin
The Problem Statement
The Problem Statement
The Problem Statement
The existing onboarding experience lacked clarity and structure—poor information hierarchy, inconsistent UI patterns, and weak visual feedback led to user confusion.
The existing onboarding experience lacked clarity and structure—poor information hierarchy, inconsistent UI patterns, and weak visual feedback led to user confusion.
The existing onboarding experience lacked clarity and structure—poor information hierarchy, inconsistent UI patterns, and weak visual feedback led to user confusion.
Design Strategy
Design Strategy
Design Strategy
Evaluated the Existing Flow
Identified usability issues, gaps in UI consistency, and lack of user guidance.
Evaluated the Existing Flow
Identified usability issues, gaps in UI consistency, and lack of user guidance.
Conducted User Research
Identified usability issues, gaps in UI consistency, and lack of user guidance.
Conducted User Research
Identified usability issues, gaps in UI consistency, and lack of user guidance.
Aligned with Business Goals
Collaborated with stakeholders to define priorities and success metrics.
Aligned with Business Goals
Collaborated with stakeholders to define priorities and success metrics.
Competitor Audit
Analyzed onboarding flows of leading apps in similar domains.
Competitor Audit
Analyzed onboarding flows of leading apps in similar domains.
Re-architected the Flow
Used card sorting and user journey mapping to define a more intuitive structure.
Re-architected the Flow
Used card sorting and user journey mapping to define a more intuitive structure.
Validated with Wireframes
Created low-fidelity prototypes to test feasibility and content coverage.
Validated with Wireframes
Created low-fidelity prototypes to test feasibility and content coverage.
Refined Through UI Design
Developed high-fidelity mockups focusing on clarity, hierarchy, and accessibility.
Refined Through UI Design
Developed high-fidelity mockups focusing on clarity, hierarchy, and accessibility.
Tested & Iterated
Conducted usability testing and implemented feedback to ensure a seamless onboarding experience.
Tested & Iterated
Conducted usability testing and implemented feedback to ensure a seamless onboarding experience.
Self Evaluation of the Existing Flow/Screens
Self Evaluation of the Existing Flow/Screens
Self Evaluation of the Existing Flow/Screens
The existing onboarding flow faces major usability challenges due to poor contrast, visual clutter, and unclear CTAs. Key screens lack guidance, accessibility, and logical structure, resulting in a fragmented and cognitively heavy user experience.
The existing onboarding flow faces major usability challenges due to poor contrast, visual clutter, and unclear CTAs. Key screens lack guidance, accessibility, and logical structure, resulting in a fragmented and cognitively heavy user experience.
The existing onboarding flow faces major usability challenges due to poor contrast, visual clutter, and unclear CTAs. Key screens lack guidance, accessibility, and logical structure, resulting in a fragmented and cognitively heavy user experience.
From Clicks to Concerns: Observing the Onboarding Journey
From Clicks to Concerns: Observing the Onboarding Journey
From Clicks to Concerns: Observing the Onboarding Journey
To understand real user struggles, I conducted moderated online sessions with current and potential users. They were asked to register and complete the onboarding flow while I observed their behavior, hesitation, and confusion. This helped surface genuine pain points to inform the redesign.
To understand real user struggles, I conducted moderated online sessions with current and potential users. They were asked to register and complete the onboarding flow while I observed their behavior, hesitation, and confusion. This helped surface genuine pain points to inform the redesign.
To understand real user struggles, I conducted moderated online sessions with current and potential users. They were asked to register and complete the onboarding flow while I observed their behavior, hesitation, and confusion. This helped surface genuine pain points to inform the redesign.
The questionnaire was part of a broader user interview session, the key observations highlighted below focus specifically on the onboarding experience to identify usability breakdowns, cognitive loads, and emotional friction. Questionnaire
The questionnaire was part of a broader user interview session, the key observations highlighted below focus specifically on the onboarding experience to identify usability breakdowns, cognitive loads, and emotional friction. Questionnaire
The questionnaire was part of a broader user interview session, the key observations highlighted below focus specifically on the onboarding experience to identify usability breakdowns, cognitive loads, and emotional friction. Questionnaire
Key Insights from the Onboarding Experience
Key Insights from the Onboarding Experience
How would you rate the onboarding process (1 = Poor, 5 = Excellent)?
How would you rate the onboarding process (1 = Poor, 5 = Excellent)?
Average rating: 2.7/5 (Majority rated between 2 and 3)
Average rating: 2.7/5 (Majority rated between 2 and 3)
Did you find the device selection process intuitive?
Did you find the device selection process intuitive?
75% No – Users found scrolling through the list tedious
75% No – Users found scrolling through the list tedious
Was the country code selector easily discoverable?
Was the country code selector easily discoverable?
81% No – Many missed it entirely or found it confusing
81% No – Many missed it entirely or found it confusing
Did you face any visual clarity issues (text contrast, button visibility)?
Did you face any visual clarity issues (text contrast, button visibility)?
68% Yes – Reported poor contrast and unreadable red-on-black text
68% Yes – Reported poor contrast and unreadable red-on-black text
Were you able to complete onboarding without external help?
Were you able to complete onboarding without external help?
52% No – Slightly over half needed help or had to reattempt pairing
52% No – Slightly over half needed help or had to reattempt pairing
Did you understand why your personal information was being collected?
Did you understand why your personal information was being collected?
64% No – Users were unsure why it was required or how it was used
64% No – Users were unsure why it was required or how it was used
How would you rate the ease of device selection?
How would you rate the ease of device selection?
Avg. rating: 2.5/5
Avg. rating: 2.5/5
Where User Empathy Meets Business Strategy
Where User Empathy Meets Business Strategy
Aligning User Needs with Business Goals. To ensure the redesign addressed real user pain points and supported the company’s objectives, I took a collaborative, evidence-backed approach
Aligning User Needs with Business Goals. To ensure the redesign addressed real user pain points and supported the company’s objectives, I took a collaborative, evidence-backed approach
Aligning User Needs with Business Goals. To ensure the redesign addressed real user pain points and supported the company’s objectives, I took a collaborative, evidence-backed approach
Shared User Research Insights
Shared User Research Insights
Facilitated Discussions
Facilitated Discussions
Mapped UX Improvements
to KPIs
Mapped UX Improvements to KPIs
Maintained Feedback Loops
Maintained Feedback Loops
Competitor Analysis
Competitor Analysis
Competitor Analysis
Most apps limit steps to 3–5 and focus on core actions (device pairing, location permissions, profile setup).
Conversational tone (e.g., Tocsen, Life360) reduced user hesitation around permissions and emergency contact setup.
Helmet or device pairing upfront (Tocsen, UClear) sets user expectation clearly, but caused friction when pairing failed or skipped.
Only Life360 showed a clear, linear journey with consistent progress indicators; most others were fragmented.
None of the apps had onboarding completion feedback (e.g., a summary screen or a “You’re all set!” moment).
Optional paths (Equilab, Eat Sleep Ride) sometimes gave users too many choices, leading to early drop-offs or confusion.
Most apps limit steps to 3–5 and focus on core actions (device pairing, location permissions, profile setup).
Conversational tone (e.g., Tocsen, Life360) reduced user hesitation around permissions and emergency contact setup.
Helmet or device pairing upfront (Tocsen, UClear) sets user expectation clearly, but caused friction when pairing failed or skipped.
Only Life360 showed a clear, linear journey with consistent progress indicators; most others were fragmented.
None of the apps had onboarding completion feedback (e.g., a summary screen or a “You’re all set!” moment).
Optional paths (Equilab, Eat Sleep Ride) sometimes gave users too many choices, leading to early drop-offs or confusion.
Most apps limit steps to 3–5 and focus on core actions (device pairing, location permissions, profile setup).
Conversational tone (e.g., Tocsen, Life360) reduced user hesitation around permissions and emergency contact setup.
Helmet or device pairing upfront (Tocsen, UClear) sets user expectation clearly, but caused friction when pairing failed or skipped.
Only Life360 showed a clear, linear journey with consistent progress indicators; most others were fragmented.
None of the apps had onboarding completion feedback (e.g., a summary screen or a “You’re all set!” moment).
Optional paths (Equilab, Eat Sleep Ride) sometimes gave users too many choices, leading to early drop-offs or confusion.
Why Quin Stands Out
Why Quin Stands Out
Why Quin Stands Out
Leveraging these insights, I refined the brand’s user persona to align better with our target audience, setting the foundation for the ideation phase.
Leveraging these insights, I refined the brand’s user persona to align better with our target audience, setting the foundation for the ideation phase.
Leveraging these insights, I refined the brand’s user persona to align better with our target audience, setting the foundation for the ideation phase.
Ideating the Direction
Ideating the Direction
Ideating the Direction
Using all the insights gathered, we sorted the feature list by grouping similar functionalities together. This helped us create a clear and logical structure for the redesigned app architecture.
I structured the new features into intuitive categories, ensuring logical organization for better discoverability and seamless navigation.
Using all the insights gathered, we sorted the feature list by grouping similar functionalities together. This helped us create a clear and logical structure for the redesigned app architecture.
Onboarding
Onboarding
Onboarding
Dash Board
Dash Board
Dash Board
Safety
Safety
Safety
Ride
Ride
Ride
Profile & Settings
Profile & Settings
Profile & Settings
Register
Register
Register
Login
Login
Login
Health
Details
Health
Details
Health
Details
Add
Responders
Add
Responders
Add
Responders
Add
Device
Add
Device
Add
Device
Device
Overview
Device
Overview
Device
Overview
General
Analyics
General
Analyics
General
Analyics
Connection
Status
Connection
Status
Connection
Status
Notifications
Notifications
Notifications
Live
Alerts
Live
Alerts
Live
Alerts
Crash
Details
Crash
Details
Crash
Details
SOS
Details
SOS
Details
SOS
Details
Responder
Details
Responder
Details
Responder
Details
Alerts
Alerts
Alerts
All
safety
Event
All
safety
Event
All
safety
Event
Crash
Pro
Crash
Pro
Crash
Pro
Live
Event
Live
Event
Live
Event
Mark
Safe
Mark
Safe
Mark
Safe
Call
Emergency
Call
Emergency
Call
Emergency
Start
Ride
Start
Ride
Start
Ride
Plan
Ride
Plan
Ride
Plan
Ride
Save
Ride
Save
Ride
Save
Ride
Preview
Journey
Preview
Journey
Preview
Journey
Ride
Stats
Ride
Stats
Ride
Stats
Membership
Membership
Membership
Profile
Info
Profile
Info
Profile
Info
Units
Units
Units
Policies
Policies
Policies
Safety
Setting
Safety
Setting
Safety
Setting
Log Out
Log Out
Log Out
Considerations for Onboarding
Considerations for Onboarding
Considerations for Onboarding
single registration form that collects essential user information
single registration form that collects essential user information
single registration form that collects essential user information
Phone number verification via OTP to ensure secure and authentic user sign-up.
Phone number verification via OTP to ensure secure and authentic user sign-up.
Phone number verification via OTP to ensure secure and authentic user sign-up.
Offer distinct user type options with simple descriptions to guide users
Offer distinct user type options with simple descriptions to guide users
Offer distinct user type options with simple descriptions to guide users
Simplify the product selection process
Simplify the product selection process
Simplify the product selection process
Emergency Info under a single screen to prioritize safety
Emergency Info under a single screen to prioritize safety
Emergency Info under a single screen to prioritize safety
State clear reasons for collecting the data points
State clear reasons for collecting the data points
State clear reasons for collecting the data points
Mapping the Onboarding Flow: Optimizing for a Simpler, More Direct Interface
The onboarding was designed to be comprehensive yet structured, capturing essential user data—especially for safety—without feeling overwhelming.
Mapping the Onboarding Flow: Optimizing for a Simpler, More Direct Interface
Design In Action
Design In Action
Design In Action
Added language selector to support a diverse, global user base and improve accessibility for non English speakers right from first interaction.
Added language selector to support a diverse, global user base and improve accessibility for non English speakers right from first interaction.
Added language selector to support a diverse, global user base and improve accessibility for non English speakers right from first interaction.
Simplified onboarding by combining key registration fields into one cohesive form, enabling a faster and more efficient user journey.
Simplified onboarding by combining key registration fields into one cohesive form, enabling a faster and more efficient user journey.
Simplified onboarding by combining key registration fields into one cohesive form, enabling a faster and more efficient user journey.
Inline Error States & Feedback to support self-correction without overwhelming alerts.
Inline Error States & Feedback to support self-correction without overwhelming alerts.
Inline Error States & Feedback to support self-correction without overwhelming alerts.
Implemented a dedicated country code selector with flag icons and a map symbol, enhancing recognizability and ease of use.
Implemented a dedicated country code selector with flag icons and a map symbol, enhancing recognizability and ease of use.
Implemented a dedicated country code selector with flag icons and a map symbol, enhancing recognizability and ease of use.
OTP verification step to ensure account authenticity, enhancing both security and trust, especially critical for emergency-response and location-based features.
OTP verification step to ensure account authenticity, enhancing both security and trust, especially critical for emergency-response and location-based features.
OTP verification step to ensure account authenticity, enhancing both security and trust, especially critical for emergency-response and location-based features.
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
Didn’t receive the OTP? Resend
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
6
6
6
Invalid OTP
Didn’t receive the OTP? Resend
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
6
6
6
Invalid OTP
Max limit reached! Please try again later after
57 Mins 45sec.
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
Didn’t receive the OTP? Resend
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
6
6
6
Invalid OTP
Didn’t receive the OTP? Resend
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
6
6
6
Invalid OTP
Max limit reached! Please try again later after
57 Mins 45sec.
OTP verification step to ensure account authenticity, enhancing both security and trust, especially critical for emergency-response and location-based features.
OTP verification step to ensure account authenticity, enhancing both security and trust, especially critical for emergency-response and location-based features.
OTP verification step to ensure account authenticity, enhancing both security and trust, especially critical for emergency-response and location-based features.
Implemented real-time error states for invalid or expired OTP entries.
Implemented real-time error states for invalid or expired OTP entries.
Implemented real-time error states for invalid or expired OTP entries.
Clear Success Confirmation Builds user confidence with positive reinforcement and clear instructions on what happens next.
Clear Success Confirmation Builds user confidence with positive reinforcement and clear instructions on what happens next.
Clear Success Confirmation Builds user confidence with positive reinforcement and clear instructions on what happens next.
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
Didn’t receive the OTP? Resend
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
6
6
6
Invalid OTP
Didn’t receive the OTP? Resend
OTP Verification
Enter the OTP sent to +00-11234-567-890
6
6
6
6
Invalid OTP
Max limit reached! Please try again later after
57 Mins 45sec.
Clear role distinction & Descriptive copy under each option helps users self-identify easily, reducing confusion during setup.
Clear role distinction & Descriptive copy under each option helps users self-identify easily, reducing confusion during setup.
Clear role distinction & Descriptive copy under each option helps users self-identify easily, reducing confusion during setup.
Progressive Disclosure & Exit Option : Prevents unnecessary friction by allowing early exits without forcing users into rigid flows.
Progressive Disclosure & Exit Option : Prevents unnecessary friction by allowing early exits without forcing users into rigid flows.
Progressive Disclosure & Exit Option : Prevents unnecessary friction by allowing early exits without forcing users into rigid flows.
Implemented brand filters and search functionality to help users locate their specific helmet model quickly.
Implemented brand filters and search functionality to help users locate their specific helmet model quickly.
Implemented brand filters and search functionality to help users locate their specific helmet model quickly.
Personalization Through Configuration
Personalization Through Configuration
Personalization Through Configuration
Users are reassured that their emergency data is securely stored and used only when necessary.
Users are reassured that their emergency data is securely stored and used only when necessary.
Users are reassured that their emergency data is securely stored and used only when necessary.
By integrating explanatory text, we create a seamless, reassuring experience, ensuring users feel informed, secure, and in control when providing their emergency details.
By integrating explanatory text, we create a seamless, reassuring experience, ensuring users feel informed, secure, and in control when providing their emergency details.
By integrating explanatory text, we create a seamless, reassuring experience, ensuring users feel informed, secure, and in control when providing their emergency details.
Old Vs New
Old Vs New
Old Vs New
User Testing & Key Iterations
User Testing & Key Iterations
User Testing & Key Iterations
We conducted user testing with new and existing users to observe interactions and gather insights on the onboarding experience.
We conducted user testing with new and existing users to observe interactions and gather insights on the onboarding experience.
We conducted user testing with new and existing users to observe interactions and gather insights on the onboarding experience.
Key Findings & Design Adjustments:
Key Findings & Design Adjustments:
Key Findings & Design Adjustments:
User Hesitation in Providing Personal Details
User Hesitation in Providing Personal Details
User Hesitation in Providing Personal Details
Users were reluctant to share emergency information, citing privacy concerns and a lack of clarity on its purpose.
Solution: We introduced contextual explanatory text to establish transparency and build trust, resulting in a notable increase in form completion rates.
Users were reluctant to share emergency information, citing privacy concerns and a lack of clarity on its purpose.
Solution: We introduced contextual explanatory text to establish transparency and build trust, resulting in a notable increase in form completion rates.
Users were reluctant to share emergency information, citing privacy concerns and a lack of clarity on its purpose.
Solution: We introduced contextual explanatory text to establish transparency and build trust, resulting in a notable increase in form completion rates.
Challenges in User Type Selection
Challenges in User Type Selection
Some users mistakenly selected the wrong user type, leading to frustration and unnecessary friction in the onboarding process.
Solution: We implemented a seamless option during device addition, allowing users to correct their selection without restarting the flow, improving overall task success rates.
Some users mistakenly selected the wrong user type, leading to frustration and unnecessary friction in the onboarding process.
Solution: We implemented a seamless option during device addition, allowing users to correct their selection without restarting the flow, improving overall task success rates.
Some users mistakenly selected the wrong user type, leading to frustration and unnecessary friction in the onboarding process.
Solution: We implemented a seamless option during device addition, allowing users to correct their selection without restarting the flow, improving overall task success rates.
Cognitive Load in Product Selection
Cognitive Load in Product Selection
Users struggled with an overwhelming filtering process, affecting efficiency.
Solution: We refined the UI with quick selectors, autofill, and structured filtering, reducing selection time.
Users struggled with an overwhelming filtering process, affecting efficiency.
Solution: We refined the UI with quick selectors, autofill, and structured filtering, reducing selection time.
Users struggled with an overwhelming filtering process, affecting efficiency.
Solution: We refined the UI with quick selectors, autofill, and structured filtering, reducing selection time.
Lengthy Onboarding Process
Lengthy Onboarding Process
Users felt the onboarding took too long, especially with the device connection step.
Solution: We eliminated the mandatory device connection during onboarding, allowing users to jump into the app faster and connect later when needed.
Users felt the onboarding took too long, especially with the device connection step.
Solution: We eliminated the mandatory device connection during onboarding, allowing users to jump into the app faster and connect later when needed.
15% increase in valuable user data capture, enabling better personalisation and safety features.
15% increase in valuable user data capture, enabling better personalisation and safety features.
15% increase in valuable user data capture, enabling better personalisation and safety features.
10% improvement in onboarding completion rates, thanks to a more intuitive and streamlined experience.
10% improvement in onboarding completion rates, thanks to a more intuitive and streamlined experience.
10% improvement in onboarding completion rates, thanks to a more intuitive and streamlined experience.
We leveraged analytics tools to track user behavior(Google Analytics)
We leveraged analytics tools to track user behavior(Google Analytics)
We leveraged analytics tools to track user behavior(Google Analytics)
Critical Analysis & Areas for Improvement
Critical Analysis & Areas for Improvement
Critical Analysis & Areas for Improvement
While our redesigned onboarding process significantly improved data capture, user confidence, and completion rates, there is still room for optimisation—particularly in reducing onboarding length.
While the design includes general insights and metrics, deeper personalization could further engage users. Incorporating tailored content or recommendations based on user behavior would improve relevance.
While our redesigned onboarding process significantly improved data capture, user confidence, and completion rates, there is still room for optimisation—particularly in reducing onboarding length.
While the design includes general insights and metrics, deeper personalization could further engage users. Incorporating tailored content or recommendations based on user behavior would improve relevance.
While our redesigned onboarding process significantly improved data capture, user confidence, and completion rates, there is still room for optimisation—particularly in reducing onboarding length.
While the design includes general insights and metrics, deeper personalization could further engage users. Incorporating tailored content or recommendations based on user behavior would improve relevance.
5+
years of experience
6+
App Designs
8+
International Brands
4+
Website revamps
30%+
incrase in user engagement
5+
years of experience
6+
App Designs
8+
International Brands
4+
Website revamps
30%+
incrase in user engagement
5+
years of experience
6+
App Designs
8+
International Brands
4+
Website revamps
30%+
incrase in user engagement
Projects
More Crafted Experiences
More Crafted Experiences
More Crafted Experiences
Ride Smarter, Ride Safer
Track, plan & analyze rides, smarter journeys with performance insights.
Track, plan & analyze rides, smarter journeys with performance insights.
Ride Protection, Redefined
Explore the Quin App’s Safety Module built for smarter crash detection and SOS alerts, ensuring a safer ride.
Explore the Quin App’s Safety Module built for smarter crash detection and SOS alerts, ensuring a safer ride.
Available for Work
Back to top
Back to top
Let's create
something
extraordinary
together.
Let’s make an impact
Devesh Kumar
UX/UI Designer
Contact me
medevesh090@gmail.com
+91 8790061001
Hit me up if you’re looking for a fast, reliable UI/UX designer who can bring your vision to life
Available for Work
Back to top
Back to top
Let's create
something
extraordinary
together.
Let’s make an impact
Devesh Kumar
UX/UI Designer
Contact me
medevesh090@gmail.com
+91 8790061001