Industry Sponsored Project
United Airlines Cargo App
Project Overview
United Cargo currently supports online booking and tracking through two website resources: Unitedcargo.com and Cargoportalservices.com. These sites are not responsive and limit the ability for cargo customers to view information from smaller devices such as phones and tablets.
Challenge: Design a mobile app to allow United Cargo customers to track their shipment(s) status via airway bill(s), provide flight status, search for flight availability, and check rates.
Our Solution
A high-fidelity mobile app screen flow that will allow the users to engage with booking, shipping, tracking, and addresses.
Project Length
16 Weeks (Semester Long Project), August 2018 - December 2018
Learnings
Sketching, Competitive Analysis Wire-framing, Lo-Fi & Hi-Fi Prototyping
Team
Elizabeth Finley Anna Ding Kevin McDonald
Greg Sirko Deanna Bell
My Contributions
I conducted a competitive analysis on DHL’s mobile application
I researched pest practices for mobile form design.
I led the wire-framing activity that resulted in our app screen flow and layout.
I performed usability testing on the mid-fidelity screen flows we designed.
What I Learned
This my first real experience with mobile screen design. This project taught me a lot about the screen flow process and how to progress from wireframes to mid-fidelity to high-fidelity screens. I also learned a lot about converting desktop screen designs into mobile screen designs.
RESEARCH
Competitive Analysis
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. In total, we analyzed six different apps, including direct competitors such as Delta Cargo, UPS, USPS, and FedEX, and related services such as Amazon.
Takeaways
Keep jargon and technical terms to minimum.
UI changes based off how much the user uses the app.
Explore customization options within the app.
Keep clean and simple, don’t crowd with text.
Secondary Research
When design forms:
Make is clear what fields are required to fill out
Make it obvious that an error has occurred
Minimize the number of fields on each page
Don’t overwhelm the user visually
Group items by which category they belong to (i.e Shipping, Addresses, Payment…)
When designing for shipping:
Have a clear shipping process and focus on users.
Present the shipping days as “delivery dates” rather then “shipping speeds”.
Include different shipping styles, recurring shipments, and ways to get help with shipping.
SKETCHING
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. We also utilized secondary research and UX principles to establish basic form design.
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.
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. This the process we used to iterate:
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.
USABILITY TESTING
We then used the wireframes for usability testing. The users were presented with scenarios and a set amount of information, and then asked to complete the desired tasks. The tasks will include Flight Lookup, Booking, and Tracking. Each screen flow task was tested out by 5 different users.
Takeaways
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.
FINAL SOLUTION
Login & Landing Screen
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.
Tracking
We edited tracking steps to clearly visualize the steps the package has finished, is on, or will be in before arrival.
Booking
We made a few iterations from the testing results. Among improving and standardizing the design, we made adding pieces easier.
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.