UPS Banner

UX design | UI design | App design

UPS Tracking Screen Redesign

Redesigned the tracking screen for UPS with better visual solutions and provided extra functionality to display the transiting information.
Role
‍UI/UX designer
Research
Time
January 2020 - April 2020
Team
Szu-Chin Wang
Utkarsha Joshi
Tool
Adobe XD
Figma
Miro
Qualtrics

Overview

Background

The project was based on my own experience that a gift I sent was delayed and disappeared on the tracking system due to the high volume of freight affected by the pandemic. I was not able to track the missing package even though I had contacted to the costumer service several times, it was a cumbersome and disappointed experience for tracking package.

Problem Statement

COVID-19 crisis has led to a significant increase in e-commerce around the world, wary consumers have been turning to online shopping in large numbers. UPS is one of the leading carrier companies that users will encounter, it sometimes confused users with their tracking screen.

Design Goal

Why is it important for the users?

The screen helps the users to track and ensure the package is on the way to them. When the package is delayed or missing, it may let the users worry less if the tracking page can provide more detailed information.

Why is it important for UPS?

As packages get delivered to the customers’ doorsteps, tracking pages are the first step in building trust. It helps the company to earn business value and customer satisfaction.

Solutions

We redesigned the tracking screen for UPS with a visual and intuitive interface and provided more functionality to show the shipping information status.
01 Map and Status Bar
The status bar and the map display data visualization of the shipping status on redesigned screen.
02 Title/Content Hierarchy
Only show the latest info and folded other minor information.
By highlighted the estimated delivery date and put the proof of delivery at the top of the package info details hierarchy, which information the user cares more about.
03 Map color change/Toggle switch
The iterated designs includes a map in grey color and also provided a toggle switch design to change the color of the map for accessibility.
‍
Map also show reroute when package gets delayed.
04 Icons for data visualization
We have shown different icons in correlation with map, status bar and in the package process details in different conditions.

Heading

Heading

Heading

Package delivered
Package in transit
Package delayed

Design Process

Design Process

To understand the user and evaluate the existing design

Research

Existing Design Breakdown

UPS Original Screen
The tracking screen is an essential part of keeping track of the location and delivery status of packages. 
  • Text heavy of package information
  • Hard to know package location
  • No notification for package delay or missing.

Survey

To identify people who had used UPS app before for tracking package and find suitable participants for our usability testing and interview, we used a survey to collect data and determine whether the user is still facing some issues with the existing design.
We analyzed data by observing user feedbacks on Qualtrics.
Survey Screenshot
Survey by Qualtrics

Usability Testing

By giving the participant a tracking number, we asked them to check the package status and transiting history.

Usability testing helped us understand how users interact with the UPS tracking screen and their satisfaction with using the tracking features, which can identify usability issues and improve the design.
Usability Testing
Participant doing usability testing

Interview

To understand the user preferences and views about the most helpful and least valuable features of the UPS tracking application and implement new features according to user preferences. 
After usability testing, we asked a few questions to our participants to gather more information on users’ feelings, motivations, and daily routines, or how they use various products.
Interviewing with participant

Affinity Diagram

We used an affinity diagram to map out similar feedback we collected from the participants, discovered new connections, and synthesized ideas into various discrete components allowed us to develop new solutions.
Affinity Diagram
Affinity Diagram created on Miro board

Insights from research to ideate

Insights

#1
Information on the tracking screen is unclear

  • Users don’t understand the current status of the package
  • Tracking screen lacks proper hierarchy
  • Incorrect delivery details of the package
  • Tracking information not scannable
  • Too much information caused a lack of understanding of the package tracking data

#2
User expects to have more features to finish their task

  • Users can't find package transit details
  • Notification for updated delivery details due to delays
  • No proof for package delivery
  • Extra steps involved in tracking information
  • Lack of features caused most usability issues on the package tracking screen

#3
Lack of visual design makes it difficult for users to check the package status

  • Hard to understand the transiting progress of package
  • Information should be shown in different colors
  • Hard to demonstrate the package route and status
  • Application color should be different
  • Lack of visual design on the package tracking screen caused inconvenience in terms of understanding the transiting progress of the package

Idea generation & solution

Iteration 1

These are the main design iterations we made on the UPS package tracking screen
01
Status Bar
The status bar that displays visual information of the package shipping status in our redesigned screen. The text below the status bar aid users in understanding the tracking status.
02
Map with Route Display
‍We included a map that demonstrates the real-time shipping route from the green gradient start point to the destination with a solid yellow maker icon. The freight icon with a solid green line shows the shipping route and length, which allows users to easily understand the package shipping route. User can point to the map to zoom in or zoom out to check more details.
03
Delayed Signal
‍If the package is delayed or missing, it will show a different color text and the alert icon on the status bar, which will indicate the delayed messages to inform the user about the inconvenience service, which calls to action to the users for checking their package update later. 
04
Content Hierarchy
‍We have shown the important information like the estimated time/place with a scannable interface. If the user wants to check more details like package information or tracking history, they can click on the foldable icon to see more.

Usability Testing

Usability testing with 6 students revealed some problems in our designs.
‍By giving the participant a tracking number, we asked them to check the package status and transiting history.

 “I also want to see some visual design for route change on the map in case of package delay.” 

“I feel that the package delay text should be bold and shown in different color than the rest of the information related to package delay.” 

“I want some visual indicator to correlate the map, progress bar and the information in the package delay portion to understand the package delay throughout the tracking process on this screen.”

“I prefer proof of delivery at the top as compare to the other details of the package.”

Insights from research to ideate

Insights 2

The usability testing revealed the following insights:

#1
Users expect data visualization on map

  • Would like to have visual design for shipping path changes or re-route on the map
  • Users expect package process details to get highlighted on current status when clicked on the map
  • Users suggested to display the map in grey color for color blinded people

# 2
Delivery status bar for package delay

  • Users want some visual indicator (icons) to co-relate map, package delay details part and the status bar in case of delay 

# 3
Hierarchy according to the user preferences

  • We changed the font size for delivery date to make scannable for users to know when the package will arrive
  • Users expect us to put the proof of delivery first as compared to other details in the package details hierarchy part

Iteration 2

Based on the results from our usability test, we iterated on our concepts
Title/Content Hierarchy
We highlighted the estimated delivery date and put the proof of delivery at the top of the package info details hierarchy part in our iterated design, which information the user cares more about.
Map color change/Toggle switch
‍Our iterated designs includes a map in grey color and also provided a toggle switch design to change the color of the map for accessibility.
Map also show reroute when package gets delayed.

Next steps

If I have more time....
Searching Screen
‍We think the searching page should also be included in the tracking package experience to consider the whole user journey and each touchpoint for the tracking package. Therefore, we already made the searching page for usability testing of our iterated designs and will iterate this page in our future work. 
Login screen
Allow the user to log in and sign up. This screen provides user option if the user doesn’t want to log in or sign up. We are also thinking of implementing a user guide and audio feedback on this screen in case of accessibility issues on using this application.

Takeaways

Choose the right UX research method depends on what data you need

The UX research surveys cannot fully capture the emotions or feelings of respondents if the questions are not well designed. It will be a waste if the research did not be used in the project. Survey can be used to collect quantitative and qualitative data from a targeted approach that gives relevant, actionable user insight. Also, we need to avoid bias and leading questions that make the seek only the data that confirms our beliefs. Feedback from testing and user is important to verify the design in order to refine it.

Prioritization is important for UX designer

When redesigning the existing services or tools, there will be more than one pain point or issue that can be improved. Learned to prioritize which feature or issue was on the point and worked on it first. A single feature can be tailored and iterated several times for improvement. Sometimes it makes users feel too many information or overwhelm if we tried to add all the features on.