Case studies/FedEx Office

FedEx Office: helping people choose the right print product

My first professional project, and where I moved from UI developer to designer. As part of the Atos Syntel team, I helped FedEx Office customers understand print products, starting with yard signs, before they had to configure and pay.

E‑commerceResearch-ledWireframes → components
Client
FedEx Office via Atos Syntel
Role
UI developer → UX designer
Timeline
Nov 2018 – Jul 2021
Tools
Figma, HTML/CSS/JS, Angular, Bootstrap, AEM, FedEx 1DX
The problem

Customers couldn't tell similar print products apart, and the price showed up only after they configured an order.

What I did

Worked with the team on research, wireframes and two concepts, then built parts of the front end.

Result

Two rounds of usability testing. Both concepts were approved for development.

My role

One contributor on a large team

FedEx Office is a large product built by many teams. I joined as a UI developer, building responsive pages in Angular and Bootstrap. Over time I asked to join research and wireframing, and I ended up contributing to the design decisions below as well as building them. The work followed FedEx's 1DX design system and was built on AEM (Adobe Experience Manager).

I also designed screens for a mobile label-creation flow (iOS and Android). That work isn't covered here.

The question

How might we help customers choose between similar print products, and show the price before they commit?

Research

The customers had already told us

The team analyzed Voice of Customer survey responses, reviewed competitors (UPS, DHL, BlueDart), ran a heuristic review of the existing product page and mapped brand needs against customer needs.

Voice of Customer analysisCompetitive reviewHeuristic reviewBrand vs. customer needs map
What we heard
Customers couldn't tell an H-Stake from an H-Frame from an Aluminum frame. The dropdown listed three names and nothing else.
What it changedEach type gets its own card with a photo, use case and material.
What we heard
Price appeared only after configuration, and people left before they got there.
What it changed“Starting at” price on every card, plus a pricing tab that compares all sizes.
What we heard
Many people landed straight on a product page from search and skipped the category page.
What it changedA second concept: an inline type guide on the product page itself.
Figma file · Concepts

From wireframe to two testable concepts

I worked from wireframes to a reusable product-type card component, which both concepts share. Prices shown as $ symbols are placeholders.

FedEx Office · Yard signs / Concepts
100%
# Wireframe · category page
HERO · category name + one-line promise + CTA
SHOP BY TYPE
TYPE NAME
• use case
• material
TYPE NAME
• use case
• material
TYPE NAME
• use case
• material
PRICE TABLE · tabs per type · size × sides
# Concept A · Shop by type
FedEx OfficeBusiness & career · Banners & signs · Cards · Templates
Yard signs
Durable signs for events, campaigns and real estate.
Shop by type
🪧
Corrugated H-StakeStarting at $·
  • Wire stake for soil
  • Lightweight, short-term
Shop h-stake →
🪧
Corrugated H-FrameStarting at $$
  • Metal frame
  • Better in wind and traffic
Shop h-frame →
🪧
Aluminum H-FrameStarting at $$$
  • Metal sign and frame
  • Weather and rust resistant
Shop h-frame →
# Concept B · PDP tooltip
🪧
Create your own yard sign Yard sign type ? Corrugated H-Stake ▾
Choose the right type H-Stake · $ Wire stake, pushed into soil. Light and easy.H-Frame · $$ Metal frame. Lasts longer in wind.Aluminum · $$$ Metal sign. Weather and rust resistant.
Interactive fileClick a layer or anything on the canvas to inspect it
Usability testing

Two rounds, two different winners

Round 1 asked whether people would rather start from the category page or go straight to a product page. Most chose the category page, saying the type cards made comparing easier.

Round 2 compared two ideas for people who land directly on a product page. The inline guide (Concept B) won, but by less than we expected. People liked that it needed fewer steps, which we hadn't treated as the deciding factor.

Result

Both concepts were approved for development, with analytics and surveys planned after launch to measure the effect in production. I built parts of the front end myself.

Reflection

What this project taught me

Code made me a better designer

I knew what was cheap and what was expensive to build, so my designs handed off with less back-and-forth.

Research changes the conversation

“Show the price earlier” carried more weight because customers had said it, not us.

Confidence beats features

People didn't want more information. They wanted the right information at the moment they were choosing.