The Uber Design Exercise

We’ve all been there... standing at the crowded baggage belt &  impatiently wondering why our bags are taking so long to arrive. This proposal is an attempt to take the stress out of getting our bags from the belts, safe and sound without getting anxious in large crowds & waiting unnecessarily.

The design prompt

A traveler has landed at San Francisco International Airport and needs to find her checked bag. Create a low-fidelity interaction flow that helps the traveler find her bag from her mobile app. Show one high fidelity mobile screen from your flow.


Image source:

So, Let's get the story straight!

Understanding the story intimately will help us develop a user specific POV. Through the story we form a mental model of what's going on in the user's mind and how to initiate a design process that proposes to solve the identified problems. It's mentioned that the traveler has landed so we assume user's primary goal at this point is: To track the status of their checked-in baggage.
Taking this mental model forward, some of our assumptions will be:
  • Immediately after landing the user has to go through a scuffle right from the aircraft gate to the baggage belts.
  • Amidst the scuffle, the user might or might not remember the baggage belt on which their luggage is supposed to arrive.
  • The user has landed at an airport that they've never been to before. Hence they wouldn't exactly know how to navigate to the baggage belts.
  • The user is planning to book an Uber immediately after they get their checked-in luggage.

Understanding the sequence of events

This phase will guide how the proposed design will assist the user in accomplishing their goals. Given that the user has just landed, we will assume that they want to first know what is the status of their baggage. The possible status points could be:
  • Have my bags been unloaded?
  • Are my bags already on the carousel?
  • What's the carousel number and how do I navigate to its location?

Here, we identify some early parameters to work with:

  1. Notifying the Belt number where the bags are going to be unloaded
  2. Status of each bag and the ETA to the belt
  3. The physical Route to the baggage belt

Let's map this out visually to reveal the nuances of the entire experience of the user collecting their baggage.

User flow map

Sketching out the proposed flow

Our first step will be to notify the user (as soon as they're connected to the internet) about the status of their baggage. So upon tapping the notification the user will reach a landing where they should get to know the status of arrival of their bags. Here I propose the following flow based on exploring the different scenarios that the user might have to go through during the process of collecting their bags..
1. Intimating the user ASAP

This notification is critical to alerting the user about their baggage information and is giving them a clear call to action of Tap to Track.

2. Helping them track their baggage
Track my bags_ Unloading

Tapping the notification takes them to this screen where they can see:

  • Their total number of bags.
  • The current status of the bags. (will keep updating)
  • A map view which indicates the carousel at which the bags are going to arrive as well as their location from the carousel.
  • The ETA of the bags.
  • The details of each bag by the tag number.
  • A link for accessing help, if needed.
3. Going into individual bag details
Bag status

Once the user taps on a particual bag, they can see the exact journey path that it has taken in the entire journey till now.

4. Updating statuses regularly
Track my bags_ Enroute

The track my bags screen is what the user will keep scanning time to time so we have to ensure that we keep updating the status to inform them about the ETA of their bags in case they are stuck at immigration or want to shop at the airport.

5. Predicting sensitively
Track my bags_ Arrived

Once we know that the bags are on the carousel, we can intelligently suggest them to book a cab right from the status screen.

6. Taking care of edge cases

Things often do not go as we expect them to so we must also be prepared to handle circumstantial scenarios like baggage being misplaced or status not visible. What do we do then?

Track my bags_ Unavailable

In a scenario where upon landing on Track my bags, baggage status can't be fetched we can provide functionality to manually add baggage or contact the airline staff.

6.1 Manually adding baggage
Track my bags_ Scan tag

Tags can be scanned by a camera and upon successful scanning we can get baggage details thereafter.

6.2 Contacting the airline staff

A support chat bot could help resolve user queries as user might not have an active mobile network or credits to make a call. As an addition, we can provide a voice call functionality as well.

High fidelity representation

For digital products, a high fidelity representation isn't just about the layouts, fonts & iconography. It's much more than that and extends beyond how we breathe life into it and turn it into a responsive interface that adapts to human needs rather than the opposite. In this exploration, we will look at a representation of the status screen as well as how it would ideally transition into another state during the course of the user's interaction.
high fidelity mock

This mock is a representation of how the information architecture cohesively comes across as a single unit to serve the needs of the user in accordance of:

  • Leveraging the map view to inform the user about the ETA
  • The overarching status of the baggage & the carousel of delivery
  • Individual statuses of the two bags and the functionality to deep dive (denoted in the low fidelity flow)
  • Clear call to action for help, in case something goes awry
High Fidelity Arrived

An exploration in motion of the baggage path, the ETA and the final notification of arrival along with serving the call to action for booking an Uber

Assumptions & Conclusion

This proposal is one way of tackling how we can help the user to track their baggage and I also understand that it is proposed under certain assumptions that are:

  • The airline app provides the user with the functionality to track their baggage.
  • The bags are being tracked with RFID chips tagged on the baggage tags that send across checkpoint locations for the bags wherever they are scanned.
  • The user's airline has an integrated service API with the airport authorities to enable tracking
  • The user has access to a network connection (preferably the free airport wifi)
  • The user has an Apple device (in this case an iPhone 8) that lets us leverage native transitions experienced in the interface.
  • The user has enabled location gathering permissions to the airline app.

This exercise was done in a total of 450 minutes distributed as follows:

Scenario extrapolation (50 mins) + Mapping the sequence (75 mins) + Sketching & Wireframing (150 mins) + High Fidelity Representation & Motion Exploration (175 mins)

More projects