background

United Airlines Cargo

Project Overview

United Cargo currently supports online booking and tracking through two websites resources; unitedcargo.com and their cargo portal services website. These sites are not responsive and limit the ability for cargo customers to view information from smaller devices such as phones and tablets.

Problem Statement
Businesses who ship cargo with United need an effective mobile application, in order to provide more accessibility and reassurance when tracking their shipments from manifestation to fulfillment.

My Role

UX Designer

Team

Elizabeth Finley
Greg Sirko
Kevin McDonald
Anna Ding
Deanna Bell
Andrew Vetter

Length

3 Months

My Impact

I was the team lead for this project, specifically I managed the design efforts. I focused on our ideation, wireframes, and final high fidelity mockups.

What I Learned

I learned a lot about mobile design on this project. It was great opportunity for me to see how desktop interactions have to really be reworked for mobile. The smaller screen, and limited capabilities provided a fun challenge.

Research

background
Competitive Analysis

For this project it was important we understood exactly what others in the market were doing to see where we could build our competitive advantage. We conducted a competitive analysis to learn about the methods that competitors use in their mobile tracking applications. These methods could lead to insights about methods that are effective and methods that are not.

Secondary Research

After we better understood what industry competitors were doing, we wanted to see what best practices and methods were for mobile design. We conducted secondary research to gain a better understanding and more knowledge about a few topics, including design of mobile forms and existing UX research of tracking. These topics would help us with ideation and the design of the app.

Design Review

Now that we understood the competitive landscape much better we had to finalize the features of United Cargo’s current solution. For the current solution, one of our sponsors, Bill Phillips, was kind enough to share his screen with us via a video call and walk us through the Booking, Tracking, looking up Schedules, and Address processes of a United Cargo customer account.

Next Steps

Now that we understood what our competitors were doing, what the best practices were, and how United currently completed the different tasks we felt confident moving into ideation. We finalized our core features for the mobile experience and continued on in our design process.

Ideation

Application Flow

To begin the ideation process, we created process flows of each function of the app. This would help us determine the number of pages each function would include and ensure that we are including all necessary information.

Addresses

Give users the ability to edit and save important contacts.

Schedules

A clear, concise, and inclusive display should present all possible flights for our users’ required shipment

Tracking

Users should be able to search an AWB or chose from saved bookings, and then clearly see a descriptive movement details page

Booking

The flows here are a bit more complex. Our users should be able to easily input dates of shipment, details about nature of the goods, AWB, different codes, and also clearly present rates upfront.

background

Primary Ideation

Once we decided our 4 core functions as a team, we diverged and moved into individual ideation. We sketched ideas for each of the 4 core functions of the application to get a wide range of ideas and interactions. 

After doing all the previous sketches as individuals, we came together as a group and discussed common themes we saw in our sketches, unique elements we saw in sketches, and pros/cons of everyone's sketches. Seeing all these different ideas about the design enabled us to create a criteria list, based off of elements in everyone's sketches that we liked and thought would be beneficial to carrying into our wireframing.

This criteria list helped us to ideate more specifically moving into our next round of sketching. 

Schedules

- Pick flight to lead to booking
- Filter flights
- Calendar picker

Addresses

- Search by company name
- Follow iOS design guidelines

Tracking

- Search filter for bookings
- Tabs
- Interactive map
- One clear status
- Use cards for timeline
- Utilize color for status

Booking

- Plane type sort
- 5 screens
- Collapsible pieces
- Duplicate piece
- Nickname shipment
- Save template
- Progress bar

background

Secondary Ideation

After we established the criteria list for our sections, we did further ideation as individuals, making sure to narrow in on key components and aspects that should be included in each section. The screen sketches in this section are refined versions of previous ideas.

Wireframing

After completing two rounds of sketches and further discussions and iterations, we moved on to wireframing our ideas on Figma. With the criterias for each section of wireframes in mind, we created screens of the processes in booking, tracking, viewing the address book, and checking flight schedules.

These wireframes are combination of the criterias list, items we wanted to fulfill,
ideas we brought up in group discussions, and ideas we brought up in individual sketches.  

image

Next Steps

Once we had our wireframes in a working state we decided to ideate on them based off sponsor feedback and them move into testing our concepts.

Iterate Version 1 wireframes into Version 2 using sponsor feedback

Make testing protocol to use with Version 2 wireframes

Validate testing protocol with sponsors 

Test Version 2 wireframes with validated testing protocol. 

Testing

The goals of usability testing included establishing a baseline of user performance, establishing and validating user performance measures, and identifying potential design concerns to be addressed in order to improve the efficiency, productivity, and end-user satisfaction.

The users were presented with scenarios and a set amount of information, and then asked to complete the desired tasks. The tasks will include tasks within Schedules, Booking, and Tracking. 

Schedules

- The user should know to select the type of plane to ship on
- The user should be able to understand the flight information on the schedule page
- The user understands how the filter changes the results

Tracking

- The user should be able to filter their shipments to find a specific package
- The user should be able to locate where the package is
- The user should be able to tell where the package going

Booking

- The user should be able to add three pieces, two of them being duplicates and the user duplicated a package

Results

image

Schedules
Date - text too small and tough to read.
Flights - distinguishing between direct flights and others more easily.

Tracking
- Timeline - further clarify current step in process.
- Filter - redesign to differentiate abilities and improve ease of use.

Booking
- Flight Results - make more obvious you can select flights.
Pieces - change location of 'Quantity' option to be more obvious to user.

Deliverables

Image

Login & Landing Page

We created a mockup of the landing page to establish the design style for the rest of the screens. We also wanted to incorporate United Cargo’s style guide more to give a feel for what the design of the app could actually look like.


Image

Tracking

We edited tracking steps to clearly visualize the steps the package has finished, is on, or will be in before arrival. 


Image

Booking

We made a few iterations from the testing results. Among improving and standardizing the design, we made adding pieces easier. 


Image

Schedules

We changed the design slightly to emphasize the number of stops between destinations. Also, we emphasized the card layout of the different flights to afford that the user can click on a flight to learn more information about it. The drop-down arrows also signify to the user that there are more details about the flight.


View more work