PoojaArora

UX UI Audit followed by a redesign

Car Crown - an online tool to buy and sell old cars

UX and UI audit of a customer’s login page, followed by redesign — Case Study

Steps to follow while redesigning a landing page

With this case study, I’ll be sharing the steps and the thinking behind the design decisions that I took to redesign the customenr’s login landing page of Car Crown in order to increase the sales and business growth.

Car crown is an inventive online store for the examined used cars, helping customers to buy used cars easily, reliably, and transparently. You can buy your dream car completely digitally and the vehicle will be delivered to your doorstep.

The Challenge

The challenge was to help win customers’ confidence by redesigning the login landing page and increasing sales and the growth of the business.

Quick observation

Old page —

The first thing you want to do is motivate users by giving them a tool to achieve their goals after landing them on the login landing page instead of showing many paths at once.

If I were working for the company and had access to the data, I would love to conduct two different types of research. This will enable me to gain information regarding poor conversion rates.

1. Feedback from existing customers.

2. Using quantitative methods like Google Analytics / Hotjar to get data on how long users stayed, how they found the site, and their online activity while on the site.

Since I had less time and budget, I decided to take these steps to solve the challenge.

Steps to solve the challenge

UX Analysis

  1. Repetitive links on the navigation.
  2. Cluttered interface, no clear path for user.
  3. User should get the search option to find the vehicle right on the login landing page rather than an additional click of ‘Find your vehicle now’.
  4. The page falls short of several usability guidelines; Visibility of System Status, Consistency and Standard, UX Flexibility, and Efficiency.
  5. Overall, the website looked outdated.

UI Analysis

  1. My UI analysis came up with lack of many design principles; Hierarchy, Proportion, Emphasis, Proximity etc.
  2. Hero Image, a large high quality image, reinforcing the purpose of the brand has the power to grab user’s attention and take them to explore further.
  3. Create a luxurious feeling for such an expensive purchase.

‘Attractive things work better’
- Don Norman

Competitive Analysis

Consequently, in order to gain a comprehensive understanding and be more efficient in designing the page, I decided to closely examine two competitors’ sites. While analyzing mobile.de and autoscout.de, I discovered their UX strategies and strengths.

1. Mobile.de

Website

Company Info

Mobile.de offers a search tool to its customers for buying and selling vehicles.

Social Presence

Product

For now, since I need to design only the customer page, I consider it my product. The customer page of mobile.de consists of top navigation, an extended search box, Trade-In (CTA), Create an advertisement (CTA), Offers, Nearby car dealers, and footer navigation.

Strengths

  1. Well-organized and optimized user experience with clear navigation in the header and footer motivates visitors to explore more to achieve their goals.
  2. Having a search box with multiple filters makes it stand out from the competition.
  3. Having mobile apps for both Apple and Android helps users to use them on the go.
  4. Social media presence: mobile.de has an active presence on Youtube, Facebook, WhatsApp, Twitter, and Instagram.

Weaknesses

  1. According to Trustpilot, rating of mobile.de is poor.

2. Downloading time of the page is higher than usual, I believe it’s because of the image they are using for the background as a hero image.

2. Autoscout.de

  1. autoscout24 offers its customers a search tool for buying and selling new /used vehicles.

Social Presence

Product

The customer page of autoscout24 consists of top navigation, an extended search box, current offers (CTA), trade-in (CTA), offers (CTA), and footer navigation.

Strengths

  1. It feels the webpage has been laid out following various UX strategies and design principles making it easy for customers to find the desired results.
  2. The search feature has detailed filter options that give users an advantage over other competitors.
  3. Mobile apps for both Apple and Android make the site more accessible.
  4. Autoscout24 has a presence on Youtube, Facebook, Xing, Twitter, and LinkedIn.
  5. Autoscout24 presents two supporting products on their website — https://www.financescout24.de/ and https://www.leasingmarkt.de/

Weaknesses

  1. According to Trustpilot, mobile.de has a low rating.

2. There is too much content on the page, which may lead the customers less focused on the target.

User Research

Having prepared an interview script, I conducted user interviews to understand the customer’s behavior and their existing mental model. The interview questions were focused on the pros and cons of the in-webpage buying and selling process as well as the offline experience.Two moderated remote interviews were conducted, one has recently bought a used car through one of these online tools and other was looking for to buy a car. My goals behind it to understand users motivations and pain points going through the whole process of buying a car.

Research Findings-

“Trading a car starts online only! The large majority conduct ample examinations online before going to a dealer store.”
-Providing an optimized and enjoyable experience encourage them to buy it online.

“Many times the process is not transparent enough.”
-Including a chatbot/customer service support would help them to clear all the doubts”

“websites/apps do not include features like Bluetooth, navigation, sitting capacity, place of registration, seat-covers, etc.”
– an extended search filters can be included

“Drive-through is not possible if the seller does not live in the same city. “

The user (buyer) prioritised the filters in the following order-
Price, Brand, Mileage, First Registration, date, and place, Diesel/Petrol, Transmission -Automatic/Manual, Financing / Payment method, Delivery Time, Delivery Place, Return Policy, Navigation. Sitting Capacity.

The user (seller) prioritised the filters in the following order-
Evaluation / Price, Payment Method, Return Policy, Paperwork/formalities

Information Architecture

The sitemap resulting from the closed card sorting using optimalworkshop.

Wireframing

The research above and the existing website led me to create a rough draft by outlining all my ideas onto paper using a pencil.

Mid Fidelity Mockup

Since handwriting is sometimes difficult to understand when describing it with teammates, I decided to translate it digitally before spending time creating a high fidelity mockup.

Hi-Fi Mockup

This high-fidelity screen has been designed by following the brand design guidelines of the company and the material design guidelines.

The Solution

Next Steps

If would have more time to work on it, I would like to take the following steps-

  • Shall conduct the A/B testing for high fidelity designs after creating one more UI Design screen.
  • Shall take team’s/developer’s feedback and validate it.
  • Shall create a design system (reusable styles, texts, colors, icons, and components to publish a shared library with the team) after implementing the required changes and finalizing the UI Design.
  • Shall create more screens and conduct usability testing during different stages of the development process and implement the required changes.