UPS Supply Chain Symphony

As one of the world's largest package delivery companies, UPS wants to build a platform that provides end-to-end supply chain visibility. UPS Supply Chain Symphony collects, manages, and integrates supply chain data, empowering its clients and partners to make informed business decisions.

Understanding Supply Chain

”What does supply chain do?” “What are the steps involved in the supply chain journey?” The first step in our process was defining the product. In this phase, it started off with desk research and discussions with stakeholders and product managers to understand its context. This helps to define the scope of the product, understand the requirements and gather insights about the goals and purpose that UPS has – not only for the product itself but also the business behind it.

(Credit: Miho Tomiyama)

Shipment Journey Map

Shipment is the key data the system uses to display status and measure goals. A shipment journey map was created to navigate how the data flows through the system in relation to the users, the timeline and the location during the process. From this perspective, we were able to see how the data could be diverged, consolidated and interpreted by different roles, and in turn prioritize the information hierarchy to create different views.

(Credit: Bradley Harris)

Identify Key Players (Proto-Persona)

Before we talked to the real users, we used workshops and brainstorming sessions with stakeholders who are familiar with the product and asked them to share their knowledge of the target users. We then gathered those notes and identified commonalities to create proto-personas.

(1st draft: Miho Tomiyama; last update: Iris Wu)

Through this, we aligned the stakeholders' views of the customer and gained buy-in for user-centred design. Additionally, it allowed stakeholders and team members to be more empathetic to end-user needs.

User Research + Usability Study

After determining Desk Agent as our key persona and our most avid user, we conducted user research and usability studies to help make better, more informed decisions.

As the first step, we created the customer journey of the Desk Agent and used it as a reference to structure our user interviews. From these, we gained valuable insights and uncovered many pain points and opportunities. All of our initial assumptions were validated by talking with real people with real experience.

(Credit: Miho Tomiyama)

Our visual design team then quickly put together prototypes for the usability studies. It helped us gain user data, enabled us to validate our detailed and complex design ideas, as well as identify opportunities to improve for the next iteration.

MVP & Learning

The first version of the design (MVP) had won positive feedback. The newly designed platform elevated the overall user experience by providing a simple and clear interface design. However, there was a lack of evidence and research-based data to support the design rationale. We started to receive feedback and comments from users regarding the absence of some key features. We also saw that some pages weren't being utilized as expected. Some users even said that the new design is pleasant to look at but it's challenging to navigate around.

(1st iteration/ MVP)

With the proper research methodologies mentioned previously (stakeholder interviews, user interviews, and tagging analysis), we were able to idenitify the problems, prioritize of the crucial pain points from the users and business, and made feature updates accordingly.

Key Issues & Agile Solutions

“One size fits all.”
The initial objective of this platform is to create one design solution that increases shipment visibility throughout the entire logistic process and covers the majority of the industry's needs. As we started to understand the complication of the logistic workflow, we learned that there are distinctive users' needs during each step and process. It became apparent that one common platform would not satisfy all types of user needs across various business domains. As the platform evolves, one of the key challenges as a team is to identify the target user type this platform can be optimized for.

Duplicate data and unclear user paths.
Most of the pages on the platform display a large number of tables and graphs, and a lot of them seem to be repeated with slightly different criteria. For example, the homepage dashboard would have the same shipment tables as the inbound shipment landing page. And it takes time for the system to respond and recall data each time when the users enter a new page. Without properly mapping out user's types and their specific needs to the respective data, it becomes a cumbersome and inefficient experience. After the MVP, one of our goals is to pinpoint a clear relationship and purpose between each page.

(Above left: Homepage Dashboard provides an overview of shipment statues using visuals and big numbers. Above right: The shipment Detail page uses tables to display detailed information per shipment.)

(Above left: Drill down pages use filters to generate tables with custom data range. Above right: Reports page for the users to request specific report types as per need.)

The limited scalability of the design system.
Shipment Milestone and Date Picker are two of the most crucial components that drive the entire experience. The majority of the data are generated based on these two inputs. However, their position and the design couldn't support the ever-increasing scenarios or future expansion of the platform. For example, the constrain of horizontal navigation (milestones) and shipment statuses does not provide flexibility to accommodate higher numbers of shipment statuses and details. 

(Above left: Shipment statues are hidden with the limited space of horizontal navigation. Above right: The revised iteration uses vertical navigation to accommodate more items vertically.)

(Exploration to increase flexibilty in setting time range)

Design Style Guide

The main goal of the style guide was to improve communication and increase levels of collaboration between the designers and the developers. Before the style guide, there was a lot of time spent communicating design details and specs with the dev team. The QA team also felt a lack of direction without a proper design guideline to ensure the outcome meets the requirements and standards.

As we delivered a couple of fast and furious initial sprint work – the majority of visual language, global elements, components, modules, interaction patterns and rules had also been created. We decided that it was time to consolidate them and create a design reference to help answer high-level design questions and solve as many specs-related issues as possible.

In addition to our own digital design experience, we also referenced various widely-used and comprehensive design system standards in the industry such as Google Material Design, Adobe Design System - Spectrum, Bootcamp, etc. to create a light and simple version as a starting point.

(Style extract: Colours, Typography, Grid, Icons, Spacing, Components, Modules, Elements, etc.)
Since we started using the style guide, we were able to cut down the time to a maximum of 1 to 2 hours per day to handle meticulous design issues. Versus, previously before we had the style guide, the designers would need to spend 4 to 6 hours per day back and forth with the dev and production team on clarifying questions about spacing, pixels, and button colours. This guideline also helps improve design consistency across different project streams and ensures the user experience is seamless across the entire platform and respective device viewports.

Design Process & Management

As the team grew and the project expanded, the file structure and the workflow urgently needed to be revisited. We started to experience many struggles in the processes such as file sharing, requirement gathering, internal and external reviews, file hand-off, etc. After we pushed out two major releases, the team and I began to investigate what could be optimized by laying out the existing team structure and process.

We identified the challenges and brainstormed potential solutions with a time box. We then dotted on the stickies to prioritize the team's short-term vs long-term goals.

Focusing on the key issue being file organization, we streamlined and simplified the file structures and flow.

Role: UX/UI Design, Design Research, Design Management

Creative Lead: Bradley Harris
Experience Designers: Jessi Queen, Miho Tomiyama, Iris Wu
Agency: Publicis Sapient
Client: UPS
Year: 2020—2021

© 2021 Iris Wu.  All rights reserved.