The SMART riding
companion App
The SMART riding
companion App
The SMART riding
companion App
App Redesign Part-1
App Redesign Part-1
App Redesign Part-1
(Onboarding & Home)
(Onboarding & Home)
Project Objective
Project Objective
Project Objective
Redesigning the app to provide a seamless, user-friendly experience with smart safety features like Auto Crash Detection, SOS Beacon, and real-time ride analytics.
Redesigning the app to provide a seamless, user-friendly experience with smart safety features like Auto Crash Detection, SOS Beacon, and real-time ride analytics.
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
4 FE Developers
4 FE Developers
4 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.
The Problem Statement
The Problem Statement
The Problem Statement
The existing app fails to provide a seamless and enjoyable experience, with issues like complex login, unreliable helmet connectivity, unintuitive features, limited event detection, no ride analytics, leaving riders frustrated and dissatisfied.
The existing app fails to provide a seamless and enjoyable experience, with issues like complex login, unreliable helmet connectivity, unintuitive features, limited event detection, no ride analytics, leaving riders frustrated and dissatisfied.
Design Strategy
Design Strategy
Design Strategy
To improve the app, I conducted an in-depth evaluation to identify shortcomings firsthand. Aligning with business goals, I engaged directly with users to gain insights and guide the redesign process using design thinking.
To improve the app, I conducted an in-depth evaluation to identify shortcomings firsthand. Aligning with business goals, I engaged directly with users to gain insights and guide the redesign process using design thinking.
To improve the app, I conducted an in-depth evaluation to identify shortcomings firsthand. Aligning with business goals, I engaged directly with users to gain insights and guide the redesign process using design thinking.
To gain unbiased insights, I conducted user sessions with current and potential users, guiding them through key tasks to identify pain points and refine their app experience. This revealed clear challenges and opportunities for improvement.
To gain unbiased insights, I conducted user sessions with current and potential users, guiding them through key tasks to identify pain points and refine their app experience. This revealed clear challenges and opportunities for improvement.
To understand user needs and behaviors, I designed a structured questionnaire to uncover their expectations, pain points, and motivations. Analyzing responses provided key insights that guided user-centered design decisions.
To understand user needs and behaviors, I designed a structured questionnaire to uncover their expectations, pain points, and motivations. Analyzing responses provided key insights that guided user-centered design decisions.
To understand user needs and behaviors, I designed a structured questionnaire to uncover their expectations, pain points, and motivations. Analyzing responses provided key insights that guided user-centered design decisions.
PAIN
PAIN
Non-functional Info Buttons: Users couldn’t access key information when needed.
Low Contrast & Visual Clarity: Data entry fields blended with the background, reducing usability.
Overwhelming Screens: Too much unstructured data led to cognitive overload.
Lack of Help Text: Users had no guidance during key interactions.
Poor SOS Button Placement: The button's position was unintuitive and difficult to access quickly.
Confusing Highlights: Visual cues failed to effectively guide user actions.
Missing Ride Features: Engaging ride data and features were absent, limiting user interest.
Non-functional Info Buttons: Users couldn’t access key information when needed.
Low Contrast & Visual Clarity: Data entry fields blended with the background, reducing usability.
Overwhelming Screens: Too much unstructured data led to cognitive overload.
Lack of Help Text: Users had no guidance during key interactions.
Poor SOS Button Placement: The button's position was unintuitive and difficult to access quickly.
Confusing Highlights: Visual cues failed to effectively guide user actions.
Missing Ride Features: Engaging ride data and features were absent, limiting user interest.
Non-functional Info Buttons: Users couldn’t access key information when needed.
Low Contrast & Visual Clarity: Data entry fields blended with the background, reducing usability.
Overwhelming Screens: Too much unstructured data led to cognitive overload.
Lack of Help Text: Users had no guidance during key interactions.
Poor SOS Button Placement: The button's position was unintuitive and difficult to access quickly.
Confusing Highlights: Visual cues failed to effectively guide user actions.
Missing Ride Features: Engaging ride data and features were absent, limiting user interest.
These screens show the app’s focus on core safety features but lack seamless interactions, intuitive guidance, and engaging ride analytics.
These screens show the app’s focus on core safety features but lack seamless interactions, intuitive guidance, and engaging ride analytics.
These screens show the app’s focus on core safety features but lack seamless interactions, intuitive guidance, and engaging ride analytics.
Highlights from the section
Highlights from the section
Highlights from the section
Please note that certain details within this portfolio have been intentionally generalized or summarized to align with confidentiality agreements or organizational policies that restrict the full disclosure of information.
Please note that certain details within this portfolio have been intentionally generalized or summarized to align with confidentiality agreements or organizational policies that restrict the full disclosure of information.
Diversity
Diversity
User age groups range from 25-55 years, showing a diverse audience.
Data
Data
There is a high desire for riding insights.
Design & Build
Design & Build
The main reason for helmet purchase depends upon design and build.
Frequency
Frequency
For cycling enthusiasts, it's a part of their everyday routine.
For cycling enthusiasts, it's a part of their everyday routine.
Smart Device
Smart Device
A smart helmet with safety features enabled is a good to go fo mst of the users.
Feature Rich
Feature Rich
Users are most interested in products that are packed with features and have accurate info.
Understanding the Market Landscape
Understanding the Market Landscape
Understanding the Market Landscape
Why We Stand Out
Why We Stand Out
Why We Stand Out
Angi
Angi
Angi
Tocsen
Tocsen
Tocsen
Equilab
Equilab
Equilab
Uclear
Uclear
Uclear
Life 360
Life 360
Life 360
Eat Sleep Ride
Eat Sleep Ride
Eat Sleep Ride
Device Specification
Device Specification
Device Specification
Device Specification
Device Specification
Device Specification
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
IMU
IMU
IMU
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
Integrated Design
Integrated Design
Integrated Design
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
App Safety Features
App Safety Features
App Safety Features
Safety Event Detection
Safety Event Detection
Safety Event Detection
SOS Beacon
SOS Beacon
SOS Beacon
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
5 diamond monitoring & Crash Management
5 diamond monitoring & Crash Management
5 diamond monitoring & Crash Management
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
PSAP Integration
PSAP Integration
PSAP Integration
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
Rich data to emergency responders
Rich data to emergency responders
Rich data to emergency responders
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
Crash Analytics with Impact Graphs and Details
Crash Analytics with Impact Graphs and Details
Crash Analytics with Impact Graphs and Details
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
Helmet Health / Passive Impact Notification
Helmet Health / Passive Impact Notification
Helmet Health / Passive Impact Notification
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
Crash Analytics with Impact Graphs and Details
Crash Analytics with Impact Graphs and Details
Crash Analytics with Impact Graphs and Details
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
Authentication Algorithms
Authentication Algorithms
Authentication Algorithms
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
In-App SOS
In-App SOS
In-App SOS
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
Ride Analytics
Ride Analytics
Ride Analytics
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
After thorough research and market analysis, I shared key findings with stakeholders for alignment. I then designed a targeted questionnaire to refine business requirements, bridging user needs with strategic goals for a user-centric, business-driven ideation phase.
After thorough research and market analysis, I shared key findings with stakeholders for alignment. I then designed a targeted questionnaire to refine business requirements, bridging user needs with strategic goals for a user-centric, business-driven 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.
To design an intuitive information architecture, I strategically categorised the new feature set, grouping related functionalities to ensure logical organisation. This approach aimed to enhance discoverability, making relevant features easily accessible while optimising the overall user experience for seamless navigation.
I structured the new features into intuitive categories, ensuring logical organization for better discoverability and seamless navigation.
To design an intuitive information architecture, I strategically categorised the new feature set, grouping related functionalities to ensure logical organisation. This approach aimed to enhance discoverability, making relevant features easily accessible while optimising the overall user experience for seamless navigation.
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
Connect
Device
Connect
Device
Connect
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
While designing new onboarding, the focus was on creating a comprehensive yet structured experience that captures all essential user data without feeling overwhelming. While the process is lengthier, it ensures that every critical piece of information—especially those related to safety and emergency situations—is properly collected
The onboarding was designed to be comprehensive yet structured, capturing essential user data—especially for safety—without feeling overwhelming.
While designing new onboarding, the focus was on creating a comprehensive yet structured experience that captures all essential user data without feeling overwhelming. While the process is lengthier, it ensures that every critical piece of information—especially those related to safety and emergency situations—is properly collected
The flow outlined above represents the newly proposed structure for the onboarding process, detailing each step to enhance clarity, efficiency, and user experience.
The flow outlined above represents the newly proposed structure for the onboarding process, detailing each step to enhance clarity, efficiency, and user experience.
Design In Action
Design In Action
We implemented OTP verification during onboarding to ensure the authenticity of user accounts and prevent unauthorised access. This adds a layer of security and reliability, especially for emergency-related features, ensuring accurate contact information.
OTP verification secures user accounts, ensuring authenticity and accurate contact details for emergency features.
We implemented OTP verification during onboarding to ensure the authenticity of user accounts and prevent unauthorised access. This adds a layer of security and reliability, especially for emergency-related features, ensuring accurate contact information.
A clear and intuitive user type selection to ensure they receive a personalised and relevant experience from the start.
A clear and intuitive user type selection to ensure they receive a personalised and relevant experience from the start.
A clear and intuitive user type selection to ensure they receive a personalised and relevant experience from the start.
Allowing users to switch account types ensures flexibility and prevents frustration if they mistakenly select the wrong user type during onboarding.
Allowing users to switch account types ensures flexibility and prevents frustration if they mistakenly select the wrong user type during onboarding.
Allowing users to switch account types ensures flexibility and prevents frustration if they mistakenly select the wrong user type during onboarding.
Quick brand selectors, Autofill, Dedicated filter option to swiftly navigate to their preferred choices, reducing search time.
Quick brand selectors, Autofill, Dedicated filter option to swiftly navigate to their preferred choices, reducing search time.
Quick brand selectors, Autofill, Dedicated filter option to swiftly navigate to their preferred choices, reducing search time.
Providing an opt-in option for brand communications to ensure a user-centric and privacy-conscious approach to marketing. Respecting preferences and complying with regulations like GDPR. This approach builds trust and transparency.
Providing an opt-in option for brand communications to ensure a user-centric and privacy-conscious approach to marketing. Respecting preferences and complying with regulations like GDPR. This approach builds trust and transparency.
Providing an opt-in option for brand communications to ensure a user-centric and privacy-conscious approach to marketing. Respecting preferences and complying with regulations like GDPR. This approach builds trust and transparency.
Clarity & Accessibility – A well-structured form with clear labels and intuitive input fields for quick completion.
Clarity & Accessibility – A well-structured form with clear labels and intuitive input fields for quick completion.
Clarity & Accessibility – A well-structured form with clear labels and intuitive input fields for quick completion.
Privacy & Security – Users are reassured that their emergency data is securely stored and used only when necessary.
Privacy & Security – Users are reassured that their emergency data is securely stored and used only when necessary.
Privacy & Security – Users are reassured that their emergency data is securely stored and used only when necessary.
Multi-Language Support – Ensuring users receive critical information in the user's preferred language.
Multi-Language Support – Ensuring users receive critical information in the user's preferred language.
Multi-Language Support – Ensuring users receive critical information in the user's preferred language.
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.
By placing Profile and Notifications in the header, we enhance usability, efficiency, and consistency while aligning with established UX laws. This design ensures:
✅ Quick access to personal settings & alerts
✅ Intuitive navigation based on familiar design patterns
✅ Reduced cognitive load, improving user engagement
By placing Profile and Notifications in the header, we enhance usability, efficiency, and consistency while aligning with established UX laws. This design ensures:
Quick access to personal settings & alerts
Intuitive navigation based on familiar design patterns
Reduced cognitive load, improving user engagement
By placing Profile and Notifications in the header, we enhance usability, efficiency, and consistency while aligning with established UX laws. This design ensures:
✅ Quick access to personal settings & alerts
✅ Intuitive navigation based on familiar design patterns
✅ Reduced cognitive load, improving user engagement
We positioned the helmet-device information in the top section of the home screen because the helmet is the hero product, making it the primary focus for users. This placement ensures Users can quickly check connection status and battery life without extra steps.
The helmet-device info is placed at the top of the home screen, keeping the hero product in focus while ensuring quick access to connection status and battery life.
We positioned the helmet-device information in the top section of the home screen because the helmet is the hero product, making it the primary focus for users. This placement ensures Users can quickly check connection status and battery life without extra steps.
We added the overview section to the home page to provide users with quick, actionable insights into their safety score and key ride metrics from their last 7 rides.
This immediate visibility encourages users to track their performance and make improvements over time. Placing it on the home page ensures easy access, creating a more interactive experience that promotes regular check-ins. It also gives users a sense of progress and accomplishment, making the app feel more dynamic and personalized.
The home page overview provides quick insights into safety scores and key ride metrics, encouraging progress tracking and engagement through easy access and a dynamic, personalized experience.
We added the overview section to the home page to provide users with quick, actionable insights into their safety score and key ride metrics from their last 7 rides.
This immediate visibility encourages users to track their performance and make improvements over time. Placing it on the home page ensures easy access, creating a more interactive experience that promotes regular check-ins. It also gives users a sense of progress and accomplishment, making the app feel more dynamic and personalized.
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:
Increased Engagement with Ride Data & Metrics
Increased Engagement with Ride Data & Metrics
Users were highly engaged with ride analytics and performance data, leading to increased app usage.
Solution: Enhanced ride analytics with interactive visualisations and insights, making data more engaging and actionable.
Users were highly engaged with ride analytics and performance data, leading to increased app usage.
Solution: Enhanced ride analytics with interactive visualisations and insights, making data more engaging and actionable.
Users were highly engaged with ride analytics and performance data, leading to increased app usage.
Solution: Enhanced ride analytics with interactive visualisations and insights, making data more engaging and actionable.
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.
1
1
1
5
5
5
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.
App engagement time increased by 34%, as users found value in tracking and analysing their rides.
App engagement time increased by 34%, as users found value in tracking and analysing their rides.
App engagement time increased by 34%, as users found value in tracking and analysing their rides.
3
3
3
4
4
4
1
1
1
0
0
0
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 – Completion rates
☑️ Mixpanel – User flows
☑️ Hotjar – Heatmaps & session replays
We leveraged analytics tools to track user behavior:
☑️ Google Analytics – Completion rates
☑️ Mixpanel – User flows
☑️ Hotjar – Heatmaps & session replays
We leveraged analytics tools to track user behavior:
☑️ Google Analytics – Completion rates
☑️ Mixpanel – User flows
☑️ Hotjar – Heatmaps & session replays
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.
Start with Site Templates
Browse dozens of professionally designed templates. Click, duplicate, customize.
Browse dozens of professionally designed templates. Click, duplicate, customize.
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