Luxury ride — 2022
Mobile App
Buy, Sell & Service Cars
Company
Luxury Ride
My Role
UI/UX Designer
Timeline
2022-2023
Responsibilities
UI Design
UX Research
Design system
Overview
Luxury Ride (LR) is the destination that you've been looking for. With a fascinating collection of pre-owned luxury cars and offering best-in-class services. Luxury Ride has been successfully serving Indian clientele since 2012.
The LR app is a cutting-edge application designed to offer users a premium and exclusive buying and selling experience. This app aims to provide a seamless platform for users to not only buy and sell luxury cars but buy service packages, extend warranties, car loans and insurance as well.
Objectives
01
Enhanced User Experience
Develop a user-centric mobile application that provides an intuitive and seamless browsing experience for users looking to purchase pre-owned luxury cars and an easy-to-use application.
02
Streamlined Purchase Process
Create an efficient platform that simplifies the process of searching, comparing, and contacting sellers, ultimately leading to a smooth buying experience for car enthusiasts.
Design Process
Starting with comprehensive user research, our team conducted interviews and surveys to pinpoint potential users' preferences and pain points. This informed the creation of detailed user personas, guiding the development of intuitive wireframes and a sophisticated user interface. Iterative prototyping and rigorous user testing were essential, allowing the team to refine the app’s functionality and design continuously. This user-focused approach ensured that the app aligned closely with what users required, delivering an intuitive and premium car-buying experience.
Research
Conducted in-depth interviews and surveys to gather insights into user needs and preferences, forming the foundation for the app’s design strategy.
User Personas
Developed personas to represent typical users, providing critical direction for design decisions to align with real user expectations and optimise functionality.
Wireframing
Created initial wireframes to outline the app’s structure and navigation, ensuring a clear and user-friendly layout from the onset.
UI Design
Crafted the visual design with a focus on a luxurious aesthetic, utilizing a refined color palette and typography to enhance the user experience.
Prototyping
Built interactive prototypes to simulate user interactions, enabling early testing and feedback to refine functionality and design elements.
Usability Testing
Conducted rigorous user testing sessions to validate design choices & identify areas for improvement, ensuring the app met user needs.
Developer Handoff
Prepared detailed design specifications and assets for a smooth handoff to developers, facilitating accurate implementation of the design vision.
Iteration
Engaged in ongoing iterations based on user feedback and testing outcomes, continuously refining the app to optimize usability and satisfaction.
Personas
We built 3 personas, gathering data from our target audience, to understand their goals and pain points. This helped us develop empathy towards our users and make informed design decisions.
Aditya Pal
Characteristics
Highly values exclusivity and aesthetics in vehicles, often prioritizing brand prestige and luxury features.
Goals
Looks for rare or high-end models that reflect their sophisticated lifestyle and personal brand. Aims to purchase multiple cars.
Pain Points
Desires a streamlined browsing experience with detailed, high-quality images and specifications to quickly assess a vehicle's luxury attributes.
Sansa
Characteristics
Embraces technology and modern conveniences, focusing on cars with cutting-edge features & connectivity options.
Goals
Seeks vehicles with the latest tech integrations, safety features, and a contemporary design that suits an urban lifestyle.
Pain Points
Needs clear, detailed information on tech features and user reviews to make a decision, preferring a well-designed interface that aligns with modern digital experiences.
Konark Anand
Characteristics
Values safety, space, and reliability in vehicles, often considering features that cater to family needs and convenience.
Goals
Seeks a car with ample space, advanced safety features, and practical functionalities for everyday family and personal use.
Pain Points
Needs straightforward information on safety ratings, space configurations, and family-friendly features, with easy access to reviews and recommendations.
Design System
Our aim was to design an user-friendly and user-centric design, where the most important objective is to increase productivity and ensure users can complete their tasks. This proved to be a challenge because of our target audience that ranged from ages 30-60+, having such a vast range of users, we had to ensure that the design was easy to understand and easier to learn.
A website without color is
like a song without melody
Colours
Color is an important element of our brand, as it helps to distinguish the brand and reinforce a consistent experience across products. We used color design tokens to manage the color palette and are categorized into four main groups: brand, semantic, text, and palette.
they bring order to chaos,
constructing a perfect harmony
Grid
Our design system employs a responsive grid system that adapts to different screen sizes and devices, providing a seamless and cohesive experience across all platforms.
the voice of our website
so we made it sing
Typography
The typeface plays a crucial role in how our users perceive our brand and interact with our products. We chose Helvetica as our default typeface because of its clarity, legibility, and versatility.
A great icon speaks for itself
No user manual required.
Iconography
Icons helps to represent common actions and convey information to users in a clear and concise manner. We have designed our icons aiming to balance our human side with function.
Inter I Regular I 16px
Paragraph 01
Inter I Regular I 14px
Paragraph 02
Paragraph (Website)
Rajdhani I Semibold I 18px
Heading 03
Rajdhani I Semibold I 24px
Heading 02
Rajdhani I Semibold I 42px
Heading 01
Heading (Website)
Fonts
Paragraph (Mobile)
Rajdhani I Semibold I 18px
Heading 03
Rajdhani I Semibold I 24px
Heading 02
Rajdhani I Semibold I 42px
Heading 01
Heading (Mobile)
Inter I Regular I 16px
Paragraph 01
Inter I Regular I 14px
Paragraph 02
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuwwxyz
1234567890
Rajdhani
Type Face
Style Guide &
Components
240 240 240
RGB
FOFOFO
HEX
Light Grey 2
208208208
RGB
DODODO
HEX
Light Grey
95 95 95
RGB
5F5F5F
HEX
Dark Grey
Neutral
2261090
RGB
E26000
HEX
Orange
55182100
RGB
37B664
HEX
Green
221 64 64
RGB
DD4040
HEX
Red
Secondary
RGB 255255255
HEX FFFFFF
RGB 333333
HEX 212121
White
Black
RGB 25 25 112
HEX 191970
Midnight Blue
Primary
Colours
16px
16px
122px
122px
122px
10px
10px
81px
81px
81px
81px
Web - 4 Grid columns
Column width: 81px I Gutter width :10px
Web - 12 Grid columns
Column width: 122px I Gutter width : 16px
Custom Grid System
Select from dropdown
Dropdown
vcvbeivber87viv
Please enter correct details
Title*
Error
Dropdown
Dropdown
Dropdown
Dropdown
Select from dropdown
Dropdown
Veer Protop
Title*
Clicked/Focus/Typing
Select from dropdown
Dropdown
Enter First Name
Title*
Normal
Form Elements
Secondary Arrow
Primary Arrow
Links
Tertiary
Secondary
Primary
Read more
Button
Button
Button
Clicked
Read more
Button
Button
Button
Hover
Button, Links & Icons
Read more
Button
Button
Button
Touched
Read more
Button
Button
Button
Disabled
Font: Rajdhani 16 Medium Border: Inside 1px
Calculate
40px
16
16
Website & Backend
10
10
Font: Rajdhani 16 Medium Border: Inside 1px
Calculate
40px
16
16
Mobile/Responsive
10
10
Read more
Button
Button
Button
Normal
Toggle
Others
Selected
Checked
Unchecked
Unchecked
Radio Button
CheckBox
24x24px
Error
24x24px
Other Main Components
Sold
Booked
Approved
Rejected
Approval Pending
Labels/Tags
Hover (Web)
Cards
Normal (Web)
Wireframing
Wireframing turned out to be the most essential part of our design process, owing to the numerous changes that we had to make to the design, because of evolving company services and requirements.
Final Designs
Wireframing turned out to be the most essential part of our design process, owing to the numerous changes that we had to make to the design, because of evolving company services and requirements.
Key Learnings
My journey through this project provided several key insights.
Gaining Trust with High-Fidelity
While wireframes are valuable, in this case, a high-fidelity
prototype proved indispensable in gaining the client's trust. This
trust, in turn, allowed for deeper discovery work and adaptation
to the project's unique needs.
Pick Your Battles Wisely
Knowing when to make trade-offs and when to prioritize critical
elements is essential, especially when collaborating with external
clients and your tech team.
Importance of Early Product Discovery
Engaging in early product discovery can prevent unnecessary
resource expenditure. Interviewing potential users and partners
can bring essential insights to light, challenging stakeholder
assumptions and aiding in informed decisions.
Be Prepared to Adapt
User testing can present surprising challenges, emphasizing the
need for adaptability and quick adjustments when an
unexpected situation happen.
Next Project
Food Management
HCI Research Project
Take me back
2024 · Ashvin Negi
Designer. Researcher.
Created with ❤️
Made in Framer
Drop me a line