D'Lux
Automotive
A comprehensive app redesign aimed at enhancing user experience, user interface design, and accessibility, with the goal of improving customer experience for two separate websites operating within the same parent company.
Timeline
February 2024
(3 weeks)
Role
UX UI Researcher & Designer
Project Type
UX UI Redesign
Industry
Luxury Car & Automotive
01
Situation
Company Overview
D'Lux Automotive (placeholder name used to maintain confidentiality as per NDA agreement) is Australia’s largest pre-owned car retailer and wholesaler, specialising in prestige, luxury, and general-purpose cars. D'lux Automotive reputation has been built on a consistently superior level of service, an enviable network of relationships, and an unmatched understanding of the automotive industry. D'Lux Automotive has several subsidiary companies, each operating independently as a pre-owned car dealership, with each specialising in different types or classes of vehicles.
Project Background
D'Lux Automotive is on a mission to update its outdated website. As part of a broader strategy, many of D'Lux's subsidiary company websites are being planned for redesign and will undergoing the process one by one. However, the D'Lux HQ is prioritising the updates for two key subsidiaries, let's call it Auto A and Auto B (name changed to comply with NDA obligations), because they represent the main premium brands. Updating these websites as soon as possible is crucial to maintaining the high standards and brand image associated with D'Lux Automotive's top-tier offerings.
02
Task
D'Lux Automotive, located in Australia, wants its design to reflect its heritage, brand, and market. Our task is to create a design that embodies these elements, serving as the foundational guideline for D'Lux Automotive's offshore development team in Sri Lanka.
Project Objectives:
-
Create a seamless site structure
-
Improve overall usability and engagement for a seamless and enjoyable visitor experience
-
Infuse the websites for two subsidiaries with a tasteful, museum-like ambiance tailored to their unique customer base
-
Maintain a cohesive visual identity while distinguishing between two subsidiary companies
Key Deliverables:
-
Wireframe Prototypes – Detailed wireframe prototypes for each page of the website & mobile showcasing the proposed layout, structure, and placement of key design elements
-
Diagrams or documents illustrating the interactive user flows
-
Wireframes with annotations detailing specific functionalities, features, and any additional notes relevant to the design and development teams.
03
Action
Step 1: Research & Exploration
Methods: Current app exploration, Client consultation & Competitor analysis
We begin our project by exploring the current websites for both Auto A and Auto B. This involves understanding the content and information architecture of each site, learning the strengths and weaknesses of each, identifying their similarities, and understanding the original style of each website.
Additionally, at the start of the project, we make sure to understand the client’s vision. While this redesign project allows for creative freedom, the client wants to keep the current colour theme of each website.
After several discussions with the client, we have gathered key points to help us brainstorm design ideas.
Client Preferences:
-
The website should represent the brand with a luxury, museum-like feel rather than a retail focus.
-
Focus on Lifestyle Marketing.
-
Emphasise imagery over price, showcasing cars as heroes to highlight their appeal.
-
Use 'pre-owned' instead of 'used' and feature sold cars for SEO and museum ambiance.
-
The site should be sleek, high-class, and minimal, reflecting D'Lux Automotive’s passion.
-
Explore potential 360-degree views of the cars.
-
Implement light and dark themes for each brand (Dark theme for Auto A and light theme for Auto B)
Next, we began researching competitors in the same industry, focusing particularly on those our client believes are performing exceptionally well and can serve as examples.
Step 2: Synthesising Challenges
Methods: Affinity Map & How Might We
To gain a deeper understanding of both websites, I grouped their strengths and weaknesses, identified their similarities, and brainstormed possible solutions using some inspiration from other competitor websites we researched earlier, organizing everything into an affinity map. This method allowed me to thoroughly understand each website and provided clear direction for the next stage, where we will possibly find solutions to address these challenges.
.png)
How Might We:
-
Create a sleek and minimalistic website design that showcases high class aesthetics for pre-owned luxury cars?
-
Design a museum like atmosphere website to showcase pre-owned luxury cars while also encouraging more visitors to experience the car showcase in our showroom?
-
showcase pre-owned luxury cars as iconic pieces of art rather than just products for sale on our website while optimising the user experience ?
-
Distinguish between the two subsidiary companies while maintaining a cohesive visual identity?
Step 3: Ideation
Methods: Mood Board & Crazy 8's
I began the ideation process by creating a mood board using images from various industry websites that our team considered to have great design. My goal in creating these mood boards was to use the images as inspiration for our ideas, facilitate communication within the team, and ensure that everyone shared the same vision and was on the same page with our client's preferences and expectations.
Mood Board
Auto A - Dark theme
Auto B - Light theme
Following the mood board creation, we conducted Crazy 8's activities with the team. I sketched ideas to show how we could showcase cars as art and give the website a museum feel, while other team members created mockups to present their concepts.
Crazy 8's Ideation
Step 4: Information Architecture
Methods: User Flow & Lo-Fi Wireframe
I suggested a new user flow designed to suit both websites. The main flow remains consistent since both websites are from the same parent company, with slight adjustments in the navigation menus to reflect the unique aspects of each site. While maintaining the overall structure, I tailored the flows to distinguish each subsidiary's offerings. My goal was to make the flow more compact and well-organized by grouping content into categories, allowing users to easily follow and find the information they need.
I presented the suggested flow to the team and asked for their opinions. After making a little adjustment, we agreed on the proposed flow. We then started putting together low-fidelity wireframes. I began by creating a low-fidelity wireframe template/style guide, which other team members used as the base for designing the menu for each section of the website.
Step 5: Design Review
Methods: Client feedback session via Canva
To ensure alignment with the client's preferences and facilitate a smooth transition to the high-fidelity design stage, I took responsibility for communicating the current design process and gathering client feedback. Using Canva for this feedback session allowed the client to comment directly on specific elements of each slide. This method made it easier to organise and track feedback and enabled team members to view and contribute to the comments, ensuring everyone stayed on the same page.
Overall, the client is quite satisfied with the current design process. However, there are some changes we need to make before moving to final deliverables, based on the client's suggestions and preferences.
These changes include:
​
-
Modifying a few CTA button labels
-
Slightly adjusting the user flow
-
Revising and replacing some menu items
-
Adding features from other subsidiary companies to maintain a consistent look and feel
04
Result
Final User Flow Refinement
Auto A - User Flow
Auto B - User Flow
Website High Fidelity Wireframe
.jpg)
The image above is one of the example mockups showcasing dark and light themes for two different website designs.
Mobile High Fidelity Wireframe
.jpg)
Dark theme
Vs
Light theme
with Similar UI style for Two Subsidiary Companies
Interactive Menu Item
Due to an NDA, I can't showcase all the designs here. Please contact me if you're interested in learning more about the designs I created for this project.
05
Conclusion
Project Overall
We successfully completed the project and delivered the key requested deliverables, including comprehensive guidelines and research for D'Lux in Sri Lanka. While the client seemed satisfied, I believe there are areas where we could have excelled further, so I hesitate to label it a complete success. There are numerous areas for improvement where we could have excelled further.
Project Challenges and Solutions
-
Team-related Challenges
We started with 10 people, but only 4 remained, including the team lead, who was absent for half the project. This left some tasks incomplete. I took the initiative to reassemble the team, ensuring communication and adherence to the timeline, while coordinating with the project manager and client to keep things on track.
-
Time and Resource Challenges
We faced challenges in accessing design system files and selecting photos for a car retail website, where our goal was to create a museum gallery feel. With limited photos from the client’s social media and a tight 3-week deadline, we couldn’t capture our own images. To address this, I used creative techniques like cropping, resizing, and applying filters to optimize the available photos. I focused on consistency by selecting images with similar angles and prioritized quality over quantity to ensure the website appeared seamless and polished.
What I've Learned & Area For Personal Improvement
-
Continuous learning and personal initiative are crucial. I’ve found that staying updated and conducting my own research, even when not explicitly required, greatly enhances my skills and contributions. Proactively engaging in additional research helps me improve and contribute more effectively, even if my work isn't always the final submission.
​
-
Be Proactive and Trust Yourself: Initially, I hesitated to address teamwork challenges and doubted my ability to assist with leadership tasks. However, stepping up was crucial, and I'm glad I did, as it ensured the project was completed on time.
​
-
Be Prepared for Opportunities: I didn’t expect to communicate directly with clients in a student project, but stepping up in my team lead's absence gave me valuable experience. It taught me effective communication, problem-solving skills, and how to better address client needs in the future.
Overall, this has been the most challenging student client project I've faced, but I'm grateful for the lessons learned. The difficulties have greatly contributed to my growth, especially in tackling design challenges. As the saying goes, 'what doesn’t kill you makes you stronger,' and I feel this experience has made me stronger.