United Airlines Cargo
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.
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.
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.
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.
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.
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.
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.
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.
Give users the ability to edit and save important contacts.
A clear, concise, and inclusive display should present all possible flights for our users’ required shipment
Users should be able to search an AWB or chose from saved bookings, and then clearly see a descriptive movement details page
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.
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.
- Pick flight to lead to booking
- Filter flights
- Calendar picker
- Search by company name
- Follow iOS design guidelines
- Search filter for bookings
- Interactive map
- One clear status
- Use cards for timeline
- Utilize color for status
- Plane type sort
- 5 screens
- Collapsible pieces
- Duplicate piece
- Nickname shipment
- Save template
- Progress bar
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.
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.
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.
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.
- 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
- 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
- The user should be able to add three pieces, two of them being duplicates and the user duplicated a package
Date - text too small and tough to read.
Flights - distinguishing between direct flights and others more easily.
- Timeline - further clarify current step in process.
- Filter - redesign to differentiate abilities and improve ease of use.
- Flight Results - make more obvious you can select flights.
Pieces - change location of 'Quantity' option to be more obvious to user.
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.
We edited tracking steps to clearly visualize the steps the package has finished, is on, or will be in before arrival.
We made a few iterations from the testing results. Among improving and standardizing the design, we made adding pieces easier.
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.