Service Booking

service booking ui design

Project overview

Service booking is an online platform for car owners to book in services. Users will be able to book services online using a booking widget and car dealers would manage the bookings by using an admin platform.

The admin system was designed to support complex pricing rules and manage bookings in specific time slots.


Customers were able to select multiple service types.

  1. While you wait: Customer wait at the dealership until the service is finished
  2. Dealer pickup: Dealer would pick up the vehicle from a desired location that a customer would set.
  3. Drop off: Customer would drop off the vehicle at the dealership with an option to drop it off the day before and leave the keys in a safe place

Dealers were able to set their availability for the above service types.

Dealers were able to manually add multiple services along with their duration and cost.

Dealers were able to set a number of available service bays. Those bays would determine the available time slots everyday.

Each vehicle based on model and year would have different service pricing. Dealers were able to import a spreadsheet and also manually change each individual price.

Design process

The plan was to design a Minimum Viable Product for the booking widget and the admin platform and at the end the product team created a functional demo.

An initial research took place in order to inform our design decisions.


At first I conducted competitive research to understand better the market and competitors.

Then I visited local car dealers to discover how they currently manage car servicing and learn about their current painpoints. They also shared insights about how customers currently book services. At this stage it was important to understand the relation between dealers and their customers.


After gathering insights and analysed them I discussed them with the product team. The next step was to meet with stakeholders and the Product Owner to translate those insights and define the key features of the product.

I created a mindmap for the customer booking widget and one for the admin platform. In that way it was easy to share the overall view of the product to stakeholders and developers.

Booking widget

User flow

The next step was to have a workshop and figure out the actions that customers would take in order to book a service for their vehicle.

After a couple of iterations we came up with the customer widget’s user flow.

User Interface

I designed some draft wireframes and discussed them with stakeholders. Then the final UI for the widget was designed.

The last step was to create an InVision prototype and conduct usability tests in order to validate the concept.

Observations & Improvements

The main thing that I observed from the testing sessions were:

  • The tab navigation on the service selection step wasn’t prominent.
  • There wasn’t visibility of the selected services until the last step of the booking process. Users had to navigate back to make any change.
  • The above issues caused an increased time of booking completion.

A new layout was introduced for the service selection step which was similar to an eCommerce concept. Users had a list of services to select and on the right side the were able to add them to their “cart”.

With the new concept it was proved that it was easier to add and remove extra servicing options. By having visibility of the selected options, made users confident to complete the last step of the booking process.

After the above changes the improved booking widget prototype was ready to be developed for the upcoming demo.

Admin platform

Going back to the admin platform, after the research phase and defining the features, we had a number of meeting to discuss the challenges of the admin platform.


A sitemap was created in order to define the structure of the admin platform and have a clear overview of the screens that we had to design.

User Interface

Pricing Grid

The main complexities were around the configuration of the prices and time availability. We had discussions with local dealers in order to understand how they currently manage the above problems. So we came up with design solutions that would support their current workflow.

For example they used excel spreadsheets to update prices, so we designed an interface that would be familiar to them.

After design iterations and collaborative workshops this was the final pricing grid concept:

The pricing grid had different service prices for each model based on vehicle’s year and variant. Inline editing made the grid similar to an excel spreadsheet.

The main enhancement was the ability to expand and collapse vehicle groups so users could easily override prices.

Time and Availability

Configuring time and availability is a complex task. Especially if we include variables such as opening hours, how many vehicles can be serviced per hour, capacity of each service centre and support of different service types (drop off, collection, while you wait).

Through a number of workshops, myself and the product team, analysed all the above. We broke down the dependancies and how those could be introduced efficiently in a digital platform.

We also included developers in conversations, due to the complexity of the design concepts.

User Interface

In collaboration with the design team a number of draft wireframes were designed. Also we gathered feedback from stakeholders and made design improvements.

The final step was to design the final User Interface based on our branding and design principles.


Conducting research in the beginning of the project was helpful, because we were aware of the challenges early in the process. This gave us time to find the right design solutions through workshops and validate them with stakeholders.

Design a Minimum Viable Product is challenging because of its timescale. Research, Design and Iteration needs to be done in every stage of the process.

Important lessons learnt:

  • Conduct research in the beginning of the project to undestand users’ painpoints and how the new product will help them.
  • Conduct guerilla research to answer questions that you may have in the middle of the design process.
  • Collaborate frequently with the product team. Get input from developers early on the design process.