Merrie's Portfolio

Uber Design Exercise

Uber Design Exercise

May 2019, Time Spent ~8h

Resources: Figma File, Invision Prototype, Slide Deck




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 1 high fidelity mobile screens from your flow. 


Understanding the task

Guiding Research Questions

  • How might we identify the bag?

  • How might we locate/track the bag?

  • How might we map out the bag’s journey?

  • How might we direct the traveller to the bag?

  • How might we alert the traveller the bag’s status?

User Tasks

  • Put in bag information into the app

  • Navigate a map / follow directions to bag

  • Keep track of bag’s status throughout journey

User Goals

  • Find and collect luggage upon arrival at San Francisco Airport.

  • Know bag status and location.


Pain Points

  • Not knowing the airport well enough / getting lost

  • Not knowing if the bag has successfully made it to the destination

  • Someone taking the wrong bag

  • Not knowing how long it will take for the bag to arrive to the luggage carousel.


  • Time

  • Locating the bag

  • Tracking the bag real time

  • Getting to the bag via directions


User Journey

User Story

Untitled_Artwork 2.png

After getting off the plane at SFO,
I want to see my bag status,
So I can get directions and get to it quickly.



  • John cannot see any of his past or future trips.

  • John cannot contact the airline through the app, if his bag was missing - he would still have to go to a help desk.

  • He cannot opt out of push notifications at this stage.

  • John can start getting directions to his bag once he has passed security check.

  • He cannot log in or sign up.


  • John’s bag has a Bluetooth token similar to Tile  to track it.

  • Hiss bag is being scanned at several checkpoints during its journey

  • John is connected to the Internet / has data.

  • The airline and airports John is going through, are being supported by this app

  • He has his booking information/barcode available

  • John only has 1, regular checked-in bag (suitcase/duffle bag, ~23kg, no dangerous items, not fragile etc.)

  • He speaks English.

  • John is a first time user of the app.


App Flow



Low-Fi Wireframes: Welcome & Enter Bag Information

The first step to locating a bag would be to identify it. A bag can usually be found under the reservation number and surname or through scanning the barcode put on the bag when checked in. That’s why I decided to give the user 2 options to find their bag - by scanning the same barcode they also have on the small sticker received or by manually typing out their details.

lowfi1uber copy.png

Low-Fi Wireframes: Track Bag / Bag Details

The next step would be the core screen of the app. In my research, I identified 2 key features the passenger needs to meet their goals and decrease pain points - get directions to the bag and view its location history.

One of the bigger challenges when designing this screen was deciding what the priority was - does the passenger need directions more than they need the bag’s history or vice versa? Or are they equal? I started out by exploring all the above options.

Iteration 1

Iteration 1

Iteration 2

Iteration 2


After exploring what the different approaches might look like and going back to my initial research & user statements, I decided to move forward with focusing on getting the passenger to their bag. Although the bag location history is still an important feature to have, I decided to make it more of a secondary element on the page.

delete1 copy 2.png

Low-Fi Wireframes: Get Directions

I didn’t want to go too crazy with the directions, because the user’s number 1 priority is to get to their bag as quickly as possible, without getting lost. Excessive UI and crazy interaction might slow them down, instead of help. I tried one version exploring how AR directions might work, but I decided to keep it simple for the v1.


Low-Fi Wireframes: Bag History

Ideally I think the bag history page could be a great place to be able to report if there’s something wrong with your bag or contact the airline, but it definitely wasn’t in scope for this particular project. I decided to show timestamps and checkpoints as the main information the user will need.


Wireframe Flow


High Fidelity Mockups