Transfer VIP Mobile Web App

User Experience | Information Architecture | Visual Design | User Interface Design | Mobile Web App

Overview

Personalised transport services on board of new luxury vehicles.

The Problem

They already have a website were the user can have a look at some information, their work and services, but they can’t book, the user can only fill a form to ask for a quotation and if they need immediate answer they have to call or chat with them via Whatsapp.

According to the company they need a booking web app were the users can book transfer pick-ups, transfer services by hours and to book activities and tours.

The purpose of the web app is to facilitate the users to check the availability, the prices, and as a result to book.

The challenge

I first started to dive into competitive analysis to know what the users could find on the market. Cabify and Uber are the most used in Spain and Gett is really known in the UK and Russia.

All of them have the ability to order a car immediately in real time but only Gett has van services availability.

I interviewed the company and for logistic reasons they only book in advance, with 1h for the pick-up transfers and hourly services, and 1 day for the activities and tours. The company also told me that they have 2 type of users, professionals and private customers.

Based on the book in advance insight I researched some other competitors and I realised that all of them have a form or destination field at a first glance to easy access to it. Destinia has a chat button on the top right corner and Blacklane has solved the hourly service on a separate tab.

Research

I tried to stay focused through the research, by making it short and effective. I gathered as much data as possible from user interviews and surveys.

The most surprising result was to find out that almost half of them had difficulties finding private transportation for more than 5 people and groups. I also found out that they use it because is convenient and fast for Airport pick-ups, at night and during holidays. And if they had to book a transportation for a group they would first book a bus, then several vans and as a 3rd option to book several cars.

Company webpage

Primary persona

Secondary persona

Problem Statement

Passengers & logistics agents need to check availability & price in real time because they want a fast and convenient way to satisfy their transportation needs

Sketches and Wireframes

I always start any project by sketching first; quick wireframe sketching allows to painlessly seeing changes and alternative solutions almost immediately. After the main features were worked out on paper, I made wireframes.

This is the second paper prototype, the scrollable home screen is divided on 3 sections:

Quick Pick-up booking form
Destinations (region services)
Top activities & tours

The activity booking flow is formed by a destination image header with activities, an activity detail screen and pick the vehicle screen. Then you need to add the pick-up location, date and passengers. You can check your booking details and select the payment method.

Based on the company’s insights I added the hourly tab on the booking form and based on user tests the destination section could have horizontal scrolling and depending on the region showed, the top activities will be updated.

I did a couple of design iterations that I performed and tested with several users, one was made of cards and the other one was full width. The last mid fidelity result included:

Horizontal destinations
Cards
Clients trust section
Prioritise passengers
Footer more compact

Visual Design

After all the wireframes were designed I moved onto styling the user interface of the app. I focused on designing an interface that matched their existing branding but I restyled the logo to increase legibility and fit it better on the top menu of the web app.