![AdobeStock_522522669-[Converted].png](https://static.wixstatic.com/media/e510d0_26d3eace71994e939768cb2be21f443f~mv2.png/v1/fill/w_980,h_484,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/AdobeStock_522522669-%5BConverted%5D.png)
PROJECT OVERVIEW
Redesigned Online Booking Flow for India's Second Largest Automobile Manufacturer
As the brand expanded its electric bike lineup and grew to 100+ cities, our existing booking flow couldn’t handle the complexity. We needed a redesign to accommodate multiple scenarios seamlessly.
This project became a career milestone, as I balanced stakeholder needs with scalable design solutions. It sharpened my UX skills and leadership abilities, guiding a diverse team toward a common goal.
Role
Project Lead
Team Members
Project Manager * 1
Jr UX Designer *1
UX Designer (me)
Developers * 12
Timeline
Dec 2021 - March 2022
OBJECTIVE
Make it Simple but Significant
The main challenge we faced was consolidating three different availability scenarios, which varied based on the user’s selected location, into a single, easy-to-use interface. Our goal was to ensure users could complete their bookings without confusion or frustration, all while minimizing the number of steps involved. How can we simplify the booking process to enhance usability, while ensuring the solution remains technically feasible and scalable?
Process
Business Goals
1. Seamless Booking
2. Scalability
3. Market Growth
User Needs
1. Quick Booking Process
2. Price Transparency
3. Customizable Options
Target Users
1. Budget-conscious buyers
2. Indian Families
Success Metrics
1. Avg Task Completion rate
2. Booking growth rate
SOLUTION
Redesigned Booking Form: A Simplified Process
Our solution simplifies the booking process with a streamlined form, replacing the traditional 4-step wizard. This new approach offers an enhanced visual interface, price transparency, and a clear display of the two-wheeler’s availability date. It also supported the tremendous 117% growth of sales from the previous year.
Before
![AdobeStock_522522669-[Converted].png](https://static.wixstatic.com/media/e510d0_26d3eace71994e939768cb2be21f443f~mv2.png/v1/crop/x_0,y_87,w_3119,h_1526/fill/w_511,h_250,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/AdobeStock_522522669-%5BConverted%5D.png)
After
Process
Business Needs
Define the launch timeline & need for new booking flow
Expert Evaluation
Recognize inefficiencies in current booking flow. Highlight critical issues & present it to client
Explore User-Flows
Map out simplified user flow solving critical issues check technical feasibility
Design & Prototype
Design wireframes & create wire-flows
Design Hand-off
Hand off design to visual design & dev team.
Product Manager
UX Designer
UX Designer
Developer Team
UX Designer
Jr UX Designer
UX Designer
Developer Team
EXPERT EVALUATION
What’s Not Working in the Current Flow?
To understand the current flow, I conducted a UX audit based on Jakob Nielsen's 10 usability heuristics, identifying the usability issues with current flow. What are the critical issues that directly impact product scalability & user efficiency?
A comprehensive 45-page report of the expert evaluation conducted by me
Major Findings:
Recall Rather than Recognition
When the user enters the booking flow, there is no clear indication of which bike the user is booking.
Lack of User Control & Freedom
The wizard functionality does not allow the user to go back and edit the information. Once the user goes back, it loses all the data
Poor Aesthetics & Minimalist Design
The booking summary and personal details page contain too much information, leading to a cluttered interface
Lack of Visibility of System Status
In the booking summary card, the total price and estimated delivery timeline are not visible to the user.
Key Insights
1. Simplify the navigation by grouping related items and removing unnecessary fields like residence type, full address, and dealership selection from the personal details section.
​
2. Replace the robust wizard with a more flexible and editable interface to give users the freedom to easily backtrack and edit their information.
​
3. Prioritize essential information like total price & delivery timeline.
4. Provide visual feedback for bike selection with available color options.
​
DEFINE
Identifying gaps & redundancies
I presented the insights from heuristic evaluation to our client, highlighting the importance of implementing our findings to simplify the booking process. To make our flow efficient and scalable, what are some redundacies that are increasing the steps to complete the booking?
Duplication of Address Field
Combine the registration process with the personal details step. Only request the city and pin code in the Personal Details section, avoiding duplicate fields on the Registration page.
Selection Screen Missing
Replace registration with a selection screen to allow users to select which bike they want to book as a priority.
Real-time Availability Missing
Users are unable to view bike availability after selecting a location. This field needs to be dynamic to display real-time availability.
How do we ensure user-centered design but also accommodate technical feasibility?
Our research showed that consumers prioritize the bike availability timeline when making booking decisions, often opting for a different location if it offers a shorter delivery time. With the bike launching in multiple cities, both the delivery timeline and booking amount varied based on the launch status. The challenge was how to clearly display this information to users while overcoming technical hurdles such as real-time updates and integration with the location-based system.
Technical Constraints
1. Real-time updates
2. Scalability
3. Accuracy
Solution
1. Define 3 availability scenarios
​
2. Assign specific delivery timelines for each scenario in the backend
​
3. Set a booking amount based on the availability scenario.
​
User Needs
1. Delivery timeline
2. Quick booking decisions
3. Price transparency
Introducing three availability scenarios based on location in the backend.
A solution that defines three scenarios—Launch, Pre-launch, and Not Available—based on the launch status in the user’s selected location. Each scenario has a set delivery timeline and a refundable booking amount, ensuring users get location-specific information.
User Selects Bike & Enter Pin-code
Check availability in backend
Launch "Bike has launched"
Pre-launch "Bike is set to be launched"
"Bike not launched yet"
User see's delivery timeline basis launch status
Delivery timeline 1-2 weeks
Delivery timeline 3-4 weeks
Inquiry Form
Impact
By categorizing each location into one of three fixed statuses, we reduced complexity in the backend. Instead of needing real-time updates for every possible location, each is tagged with one of these predefined states, which can be easily managed and updated.
This decision not only made our development more efficient but also demonstrated our ability to adapt and maintain practicality in our design strategy.
DESIGN & PROTOTYPE
Wireframing
We took the approach of wire-flows to explain the scenario in detail with wireframes. I laid the foundation by doing the mobile view wireframes and delegated the web view wireframes to my junior associate
Mobile View
Web View
DESIGN HAND-OFF
Smooth hand-off to visual design team
After finalizing the wireframes, I documented availability scenarios and edge cases through wireflows, adding notes for clarity. I then presented the designs to the visual design team to explain the thought process and address any questions.
Scenarios
Annotations
Edge Cases
SHIPPED DESIGNS
Improvements
Visual design team used the branding guidelines provided by client. Following the resolution of any QA issues, the design is handed over to dev team.
IMPACT
iQube crosses the 100,000 sales mark
Following the launch of the new variant and revamped online booking flow, iQube surpassed 1,50,000 sales, with a remarkable 117% increase in online bookings since 2021.
​
By streamlining the process, users were able to complete their bookings 1.5 times faster, which also resulted in a 32% reduction in delivery timeline inquiries.
REFELCTION
Gaining Confidence as a UX Designer
1. Delegation
This project taught me the importance of delegation. In the past, I struggled to trust my team members and would often take on too many responsibilities myself, overwhelming my workload. Mentoring a junior associate helped me realize the power of effective delegation and how it improves team productivity.
2. Gaining Confidence
I also gained confidence as a UX designer by collaborating closely with senior stakeholders and a large development team. Through this process, I learned that thinking on my feet, bridging communication gaps, and finding common ground are essential skills for success in UX design. These experiences have been invaluable in shaping my approach moving forward.
