Car Showroom

Roles

Deliverables

Project Specification

UX Designer

UI Designer

Researcher

Competitive Analysis
User Surveys
Sketching
Wireframing
Prototyping

Duration: 3 weeks

Project Summary:

Portfolio project as part of the Google UX Design course. The purpose was to focus on designing a website for different screen sizes.

Tools used:

Adobe XD

Project Overview

The primary objective behind the design of this website is to enhance the overall customer experience by simplifying the process of purchasing both new and pre-owned cars, while also facilitating the booking of test drives. This was achieved by offering high-quality images and comprehensive information on each vehicle, creating a more visually appealing and informative platform for users. The focus was to empower customers with the tools they need to make informed decisions, whether they are in the market for a new car or considering a pre-owned, thereby ensuring a seamless and satisfying user experience.

The Problem

Car showroom websites are often too simplistic and text-heavy.
This complexity overwhelms the average car buyer.
Aim: to design a more user-friendly website using fresh, innovative approaches.

The Goal

Simplify car data and details for easy understanding by the average car buyer.
Use creative, user-centric design.
Redefine how people interact with car listings.

Define

The initial phase of user research for this project revolved around unraveling the factors that either engage or repel users when they navigate a car-related website. It was pivotal to understand how a website's design and layout contribute to user retention and eventual conversion. A compelling design often correlates with higher user engagement and increased car sales.

Key findings:

Users appreciate a wide selection of cars, facilitating their search.
Well-designed websites with evident thought and effort are highly valued.
Thoughtful design leads users to believe the seller offers a high-quality buying experience.

The success in designing an effective website lies in striking a balance. It entails not only cultivating a strong brand identity but also ensuring that users can seamlessly accomplish their goals.

Result:

Larger and more satisfied customer base.
Positive and streamlined car purchasing experience.

John is a Financial Analyst who would like a better way to search cars he’s interested in and then book a test drive without the the hassle of going to the showroom.

Problem Statement

Digital Wireframes

My goals when creating digital wireframes was to keep the design as simple as possible to ensure an easy flow would be created when progressing from these designs. Creating space for the car images was a high priority so that the page didn’t become cluttered. This way each car is given the space it needs on the page and the user can move slowly through each car and the details without being bombarded with a number of different types and brands.

Car overview and spec low fidelity design

Usability study: Parameters

Study type:
Unmoderated usability study

Location:
Remote

Participants:
5 participants

Length:
15 minutes

Usability study: Findings

Users thought a live chat feature would be useful as well as the contact/enquiry page.

Users would like a way to filter through cars by brand, price etc

Site Map

In the initial stages of the design process, I created a site map to provide me with a visual representation of the website's structural layout. This served as the blueprint for organising and navigating the website, outlining the fundamental sections and their hierarchical arrangement.

This simple structure provides a clear overview of the main components of the website. Each section was positioned to ensure an intuitive and user-friendly flow, while also facilitating an efficient user journey through the site.

Develop

High Fidelity Design

The selection of the color palette was driven by the intent to create a website design that radiates simplicity, allowing car images to be the focal point. A key principle was the intentional restraint in using the accent colour, applying it with great discretion, exclusively for essential navigation elements like buttons. This strategy draws users' attention to critical interactive components, enhancing the overall user experience.

Key points:

Intent: Simplicity and focus on car images.
Accent colour: Used sparingly for essential navigation elements.
Result: Enhanced user experience.

Moreover, by expanding the colour palette to include a range of darker and lighter shades, the visual dynamics of the website are elevated, making it even more aesthetically pleasing. This expansion heightens the visual appeal and adds depth and dimension, ultimately contributing to a more engaging and memorable user experience.

Impact:

Heightened visual appeal.
Added depth and dimension.
More engaging and memorable user experience.

The primary objective I had in mind while designing this page was to maintain a sleek and minimalist layout, ensuring that all the information presented is easily comprehensible. To enhance user interaction and support, I incorporated a live chat icon in the corner of each page, offering users quick access to assistance. Additionally, I integrated a filtering feature, providing users with a convenient tool to refine their search and find the information they need efficiently.

The initial design was a product of my participation in the Google UX Course. Upon reevaluating the design, I saw an opportunity to enhance the user interface for improved clarity and accessibility. The earlier iteration had a predominance of dark colors, which presented potential contrast challenges. Changes involved reducing the dark blue and transitioning from light grey to a cleaner white background.

Key adjustments:

Live chat icon: Quick access to assistance.
Filtering feature: Convenient tool for refining search.
Colour scheme: Reduced dark blue; switched from light grey to white for better contrast.

This transformation not only elevates contrast but also creates a more visually balanced and user-friendly experience.

Further enhancements:

User-friendly filter option: Facilitates smoother navigation and searching.
Alignment with user needs: Conscious effort to align the design with user preferences.

The effectiveness of these alterations will be evaluated through user testing, ensuring the design evolves in line with user expectations and needs.

Before

After

Pop up chat icon added to the corner to assist users with any questions they may have.

Filter feature added smoother navigation and searching.

Filter feature added smoother navigation and searching.

Main Screen

The process of adapting this project to various screen sizes presented an opportunity to delve into the dynamics of content adjustment. Whether scaling content down for smaller screens or expanding it for larger displays, I delved into the optimising information delivery to the user. This posed the challenge of maintaining information clarity while eliminating clutter, as it was crucial to convey the same content seamlessly, regardless of the screen size.

Going Forward

Next Steps

Review the design again and see what can be improved further.

Explore the architecture of the site in more detail.

Carry out further user testing to see how the website can be improved further. A/B testing will be used to compare both design options.

What I learned

Through my experiences, I gained valuable insights into streamlining webpages to present information with clarity and user-friendliness. Additionally, I honed my skills in adapting layouts to accommodate various screen sizes, ensuring a consistent and responsive user experience across different devices. Taking a step back from these designs and revisiting also helped to add clarity to why a certain feature was designed a particular way and also to be able to see the overall design fresh helped to improve it as a whole.

About Me

Shane Kenrick