This is a project created at the design agency "Bästa Kompisar".
Client: Mercedes-Benz Malmö
My responsibilities: UI redesign of company car rental page & contact page.
Project team members: Digital Project Manager, Developer
Final deliverables: UX Audit documentation, High fidelity mockups, Documentation of interactions
The task & problem
Mercedes-Benz came to us with the need to improve the design and user-friendliness of the contact and opening hours pages, as well as a company car booking page for ordering and test-driving company cars. These pages were especially important for Mercedes-Benz Malmö's sales. The division of contact information for the different departments was perceived as unclear by the users, and the information about different opening hours was perceived as difficult to understand. Additionally, they wanted to make it easier for the customers to find their location. The user interface on the company car rental page is needed to support quick and easy ordering and test driving of company cars, as well as comparison of car specifications.
The process
Before starting the redesign, the main user tasks and business goals for the pages were specified through information about the company's customers/users from the customer meeting, a competitor analysis, and best practices. Our main goal was to stay focused on these tasks and objectives during the design process, ensuring a task-oriented approach. An UX audit was then conducted by analyzing the pages based on Nielsen Norman's guidelines for contact pages and David Travis' 44 design principles for task-oriented design.
Contact & opening hours page
The specified user tasks:
● Contacting Mercedes-Benz Malmö (general questions)
● Contacting Mercedes-Benz Malmö (specific questions/departments)
● Finding the location
● Finding the opening hours to Mercedes-Benz Malmö and to specific departments
● Contacting Mercedes-Benz Malmö (specific questions/departments)
● Finding the location
● Finding the opening hours to Mercedes-Benz Malmö and to specific departments
The specified business goals:
● Getting customers to contact Mercedes-Benz and the different departments with the goal to convert them into future customers and to retain them as customers.
● Increasing visitors to Mercedes-Benz Malmö
● Increasing visitors to Mercedes-Benz Malmö
After analyzing the interface, additional potential issues were identified:
● The contact details for different departments were presented first, instead of general contact details. This forces the user to think unnecessarily and choose a category. When clicking on a department, it takes up a lot of space on the interface and the user has to scroll down a long way to reach the other information. It was also not possible to reset the action of the contact cards folding out.
● It was not easy to understand which number to contact, the general number was not visible.
● The user had to click on a category to view email addresses, there was no clear general email address to write to if you couldn't choose from the different categories, which could frustrate the user.
● Opening hours and contact information were mixed in the same three blocks called "opening hours" and there was no logical visual division of the information.
● On mobile device, the user had to scroll past contact info for the various departments and all opening hours to see the general number. The high banner could also contribute to the fact that it took longer for the user to reach important information.
The following improvements were made based on the identified problems:
● The page content of contact and opening hours were divided into separate columns, to make it easier for the user to access the info they are looking for and thus meet their goals.
● The most important information was presented first to reduce the number of choices users have to make: The general phone number, email address and visiting address first to make it easier for users to directly reach contact information.
● The block with contact information to specific departments was moved down to the bottom, and a link to this block was added next to the general email address with the link text "or contact specific department".
● The opening hours for each department were presented with a drop down list to unclutter the design, with the general department at the top. The differing opening hours was presented at the top.
● In the mobile version, the content was presented in a different order with the contact details, address and map presented first and then the opening hours.
● The height of the banner image was reduced, in order to display important information more quickly.
Before redesign - desktop
After redesign - desktop
Before redesign - mobile
After redesign - mobile
Company car rental page
The specified user tasks:
● View all available cars for rental
● Read and compare information about each rental car available.
● Book a test drive for the preferred car model
● Book a company car
● Read and compare information about each rental car available.
● Book a test drive for the preferred car model
● Book a company car
The specified business goals:
● Receive bookings for test drives and company car rentals
After analyzing the interface, additional potential issues were identified:
● There was no option for the user to book a test drive on the page that featured all company cars.
● Text blocks with equipment could be perceived as confusing as the user might not understand which car it refers to.
● No CTA button for each car, just one option available (read more), which does not support the user behaviour of knowing what car they are interested in.
The following design improvements were made based on the identified potential issues:
● Popup box with car information and pictures was added to keep the user on the page and make it easy to compare the car specifications. The choice of the interface element was made because there was a need to scroll through the information and because images would be displayed as well. Once on the pop-up page, it would be easy to click down the box and continue viewing other cars. The possibility to proceed to either book a test drive or order the car was also added.
● CTA button with the option to book a company car was added in addition to the "read more" button.
● Block to book a test drive was added to the page with all cars to reduce the number of steps the user with this need had to take.
Before redesign - desktop
After redesign - desktop
Before redesign - mobile
Before redesign - mobile
Before redesign: information about the individual car - desktop
After redesign: information about the individual car - desktop
Before redesign: information about the individual car - mobile
After redesign: information about the individual car - mobile
