Here is a little test I completed for a recent job application. I completed this in two days as per time restrictions.

The Brief

Design a mobile user interface for a person booking in and receiving service from one of our workshops.

please note this process will be based on assumptions which for this mock situation is acceptable but would never be encouraged for a ‘real world’ project where proper user research should be undertaken.

Description

This solution would be placed on mobile application downloadable from the app store for anyone to use.

It would allow anyone to book in a service with AFS workshop by selecting one of AFS workshop’s, selecting one or more desired services and picking a time that suits them to drop off/pick up their vehicle.

Minimum time for pick up should be implied from selected services, and we should allow waiting in the lobby if it takes up to 2 hours and beyond that time we would allow picking pick up time.

Once the user has booked in services we should show them progress on the mobile app and when it is ready to be collected.

Objective

Please upload the design that you would invision would best suit the brand and solve this specific problem, explaining on design or on the side the journey for the user.

The software you use is completely up to you, but would we prefer this to be uploaded as an image or PDF.

Problem/Goal

Problem: Booking in a service can sometimes be a very challenging experience and may require you to call the servicing to book in or get an update on the progress of the booked in service.

Goal: The mobile app would allow customers to book in a service at the workshop closest to them, and required service and see the status update so that they know when they need to collect the vehicle.

Types of Services

The following types of services should be offered to users to pick from:

  • Vehicle Safety Inspection
  • MOT
  • Tyre Change – A person can choose to change 1 or more tyres and has to provide tyre size or use ‘lookup against registration’ to get suggested sizes.
  • Full Service – General servicing implies that it is an oil change with oil filter, but user can have a choice to additionally choose to change fuel filter and cabin filter and battery.

Users Needs

The experience should be quick, simple and very transparent on what the cost will be to the user for agreed services, and what the selected services include.

Person should be able to pay from mobile phone to speed up the collection process.

Constrains

Service could be delayed from the initial estimated time. Parts may be required, further delaying the collection time.


My Submission

I solved this problem by:

  1. Carrying out research into various garages/car workshops, looking at the services they offered, along with their websites/apps. I also looked into different couriers, as well as apps like Uber, those using maps and geolocation, as well as various e-commerce websites and apps.
  2. After my research, I had a few ideas of how I thought things might be presented so I began planning on paper, doing rough sketches of the IA and basic flow/layouts.
  3. I then put my plans into wireframes, which I made in Adobe XD. I have mapped out the main stages for solving the problem presented in the brief, however the pages I do refer to for ‘My Account’ are not yet planned out properly. I have a good idea of how they might look and have described some of the main attributes on p1 of the wireframes.

Throughout my design I was careful to try to work within the most comfortable parts of the screen for one hand usage, you’ll see that rarely do interactions take place in the top third of the screen and generally they are in the lower half. All of the buttons and interactive elements are a good size for thumbs and it’s clear when they can and should be pushed. I have also tried to keep it as simple as possible, focussing on the order of text and interactive elements. However this has been made without in-depth research and I would likely make some changes if I were to spend more time working on this. For example, on the first overview page (5.0) – It would be useful to test the app and see whether this page is necessary at that particular point. I think that it could be best to remove it completely.

Sketching

Flow

Wireframes