CATEGORY Product
CLIENT FedEx
STUDIO Tank
ROLE Senior Designer
YEAR 2022
CLIENT FedEx
STUDIO Tank
ROLE Senior Designer
YEAR 2022
FedEx Billing Online is a tool that customers of all sizes use to pay their invoices. From enterprise companies that ship over 10,000 packages a month to small businesses shipping less than 10 packages a month, FBO is the platform that handles all payments. The current application was extremely outdated, Tank collaborated with internal FedEx teams to do a redesign of the whole application to make it more accessible and user friendly.
PROJECT ROLE
+ Responsible for UI design, I created all screens using the FedEx Design System, 1DX, to ensure design was consistent across products and WCAG compliant
+ Worked with cross-functional team, built relationships with both internal and client teams
+ Presented designs to global stakeholders on a frequent basis
+ Responsible for keeping track of detailed design updates at a large scale
+ Frequently contributed to discussions with the client, posing questions and brainstorming solutions
+ Provided direction and ideas on how to take user feedback and incorporate it into designs
+ Drove ideation and design exploration that mapped to ever-evolving requirements from the client
OLD EXPERIENCE
ARCHITECTURE AND WIREFRAMES
ACCOUNT SUMMARY
Account summary is a dashboard where customers can view their information at a high level and gain insights. This experience for FBO has a scaled approach. Many of the design choices throughout the project fall within bundled releases. To exemplify the scale of changes, these Summary screens highlight our starting point, similar to an MVP, to the end goal future state.
REDESIGNING INVOICES
At the core of the FBO product is the Invoices table. This is where customers can view their monthly invoices and have the ability to pay or view more details. This table holds a lot of data, I worked with FedEx global partners to align data requirements to the design.
ACTION BAR
The action bar holds several functionalities, including: Filters, Edit Columns, and Views. I took existing patterns for this action bar used in other FedEx products and shaped it to our needs on FBO.
INVOICE AND SHIPMENT DETAILS
Invoice details is a detailed screen offering data specific to each invoice. Similarly, Shipment details does the same for individual shipments. These pages structurally utilize a summary area that highlight important details such as billing information. We created an accordion system for these interior pages so users could navigate to specific sections to find data points.
Component Boards
With such a large and detailed product, I created a component board to share with the FedEx development team to showcase different states of the components and annotate expected behaviors.
DESIGN SYSTEM
This is just a glimpse into the symbols library I created for this project. Although we used an existing design system, there were many instances where there were unique needs to our product and I explored various solutions to add to the system.
USABILITY STUDY
I worked closely with developers to create an HTML prototype for the first round of testing. Our twelve participants were all frequent users of FBO already, but ranged in business size. Since this is a more complex tool for shipping professionals, we received great feedback to improve the product to move into the next phase.
