#Case Study: “My Bookings” Section of a Travel App


A Bit of Context

The task was to design “My Bookings” section of a travel app. The challenge was to

  1. Differentiating bookings of Bus , Flights , Trains and Hotels in it.
  2. Differentiating between past , cancelled and upcoming bookings.

The Brief

The particular essence of “My Bookings” section is to allow users finding information at ease related to their bookings done or cancelled in past. In this travel app, the user is able to do four types of bookings i.e Bus , Trains , flights and Hotels.

The Concern

“My Bookings” section effortlessly proves the term “Design for Data” . The main task was to finding out different types of data a user sought frequently, in case of a bus, flight,train or hotel bookings. Apart arranging them in more meaningful and minimal way to address user needs and wants to find data’s in more pleasant ways !!!

Involved Processes

Out of 5 available days(Includes 3 working days) to complete the task , A hectic schedule at workplace almost took my 2 days out of it. On other 3 days , I divided the task as follows to complete the task.

  1. Discovery. User Interviews , Personas , Affinity Diagrams
  2. Development and Delivery: Pen and Paper Prototype , User Validations , Creating a visual prototype and finally taking it to invison for a clickable prototype. Along with writing this piece of article !!!

User Interviews

Out of 50 employees in office , I found nearly a total of 13 employees who frequently books hotel rooms or flight,bus or train tickets. Conducting a survey is always a best way to do it. However , I was lucky to discover them while having my lunch in cafeteria during office hours. I managed to save some of my time here ! I noted down the points from the interview sessions , marked the important nature of personas on sticky notes and drew an affinity diagram from it to prioritize the user needs.

A very raw capture of my sticky notes on walls and notebook

Affinity Diagram:

It records the activities of a user on “My Bookings” section in four different types of bookings under two conditional states : Upcoming Bookings and Completed Bookings. One interesting fact to note is that , the rate of cancellation of tickets is kind of negligible. We may consider to remove a dedicated “Cancelled” tab on available prototype. This can be another area to improve in near future. For this time being , I have kept it in v 1.0.

A raw affinity diagram within short span of time

Empathy Map:

Affinity diagrams helps us to create an empathy map with two quadrant.The red marked areas with heavier emphasis as “Pain Points” or Most needed things by an user while the others are like “Nice to Have” it on screen. I decided to put more focus on those data’s by playing with font weight and font size on screen with brilliant placement , to maintain the minimal yet playful look.

Pen Paper Prototype

I went through approx 3 to 4 iterations to bring a simple layout , easy of use and minimal things. I consider , pen and paper prototypes are faster than any other tool for creating a raw wire frame before entering into the phase of “Visual Designing” . Yet , I won’t deny the necessities of a clear wire frame in case of a complex applications.

A very first draw to bring out inception of layouts in different ways.
A visual flow of Information to display categorically
Included a “All Section” to quickly check out the status of all Bookings
Past Booking card where user specifically look the price tag or to book again the same route or for review purpose.
Cancelled Stage Card

Visual Designing

Now this point of time , We have raw paper prototypes with us to proceed. And We used “Material Design System” in this section.

Let’s repeat what was our main goal:

Arranging data’s in more meaningful and minimal way to address user needs and wants in more pleasant ways !!!

Choosing Colors:

A vibrant shades of Vibrant Purple from material design. Our Own sky bleeds one of such colors at some point of day. Where ever we go , where ever we travel , Sky is always on top of our head. Colors are chosen here in a relative to real world connections.

To add a more complementary looks , a shade of Pink has been chosen as an ascent color.

Icons:

All items used in prototype are from “Material Design System” to support consistency level.

Icons for Bus , Flight , Train and Hotel
A more meaningful way of using flight take off and landing in an “upcoming booking” section and “completed booking” section for flight journey !!!

Cards:

A curvy corner cards to bring the more focus to inner section of cards on choosing over a sharp corner of cards that drives out attention out of cards.

Different cards to showcase the “upcoming”,“completed” and “cancelled”state for a different types of journey:

Finally Summing it all together :

Interactive Prototype — Invison

Thank you very much for going through the process. It is been quite long. I loved how I ended up in designing those screens.