Merrie's Portfolio
uber-design-mockup.png

Uber Design Exercise

Uber Design Exercise

May 2019, Time Spent ~8h

Resources: Figma File, Invision Prototype, Slide Deck

 

Technology

Brief

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. 

 
uber-design-mockup-long.png
 

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.

Priorities

  • 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.


 

Constraints

  • 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.

Assumptions

  • 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

Flow01.png
 

Development

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.

 
directions.png
 

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.

bagdetails.png
 

Wireframe Flow

FlowWireframes.png

High Fidelity Mockups

uberhf.png