Storefront Redesign - UX Case Study 2023

UX Case Study

R.R. Donnelley

Bringing RRD's Storefront website into the future.

Written by

Justin Watts

Duration

2 years

Team

4 UX

My Role

UX Lead

Type

B2B

INTRODUCTION

Storefront needed some love.

Storefront by R.R. Donnelley is a complex and massive website where clients like Anthem, Best Buy, and Qdoba customize and purchase documents for their businesses. The problem is it needs some real love via better usability and modernization.

PROBLEMS

A tangled web of complexity.

Storefront is a customizable system so every user experiences UX issues in a different way. Research and iterative design helped forge a path forward and make sense of it's complexity.

APPROACH

Storefront. Simplifed. Optimized.

A redesign of the entire website experience included the ordering, customization, and checkout experiences. The optimization was completed with user input infusing each step of design.

UX Deep Dive Below

WHAT I DID

A Full-Stack of UX fun.

My role on this project was UX Lead however my responsibilities were far beyond that. I was responsible for team strategy and end-to-end design including requirements, wireframes and fully interactive prototypes. I also managed the UX team and partnered with UI Designers to design and manage a new design system for Storefront.

UX Deep Dive Below

Wireframes

Prototypes

Design System

User Research

UX Strategy

Team Manager

DISCOVERY

User Research

Interviews with external client users and internal stakeholders. Since the site is very customizable it was helpful to learn about specific issues, pain points and requests.

DISCOVERY

User Research

Interviews with external client users and internal stakeholders. Since the site is very customizable it was helpful to learn about specific issues, pain points and requests.

RESEARCH

Learning about Storefront users.

Preparations for design began with both internal and external users of the site. In addition to a deep usability evaluation we recruited 10 internal stakeholders and 20 external clients for user research.

UX Deep Dive Below

Usability Evaluation. Reviewed the old site and found numerous usability issues. Wrote and delivered a report to stakeholders with 75 UX issues. There were many issues with the site stemming from it's age and intensive bolstering of features and functionality over the years.

User Research. Interviews with 20 external client users of the site to learn about their needs. Since the site is very customizable it was helpful to learn about specific issues, pain points and requests. Over 100 insights gleaned from these sessions.

Stakeholder Interviews. Discussed pros and cons with 10 internal users to learn about known issues with Storefront. It was very helpful to learn about client issues from an internal perspective.

INSIGHTS

Outdated, but reliable.

Though it had not been updated in years, users were clear that the functionality of the old site was not terrible. The design was outdated, most of the functionality needed refinement but overall it was serviceable.

Navigational Issues

During research a central issue for participants was navigation. They shared that the primary navigation menu was difficult and caused a lot of friction in the following ways:

There was no visual affordance letting the user know when there are subcategories.
The hover system to select an item in the navigation was very finicky.
Large catalogs are very unwieldy since there is no maximum on how many categories are available.
Catalogs with subcategories were extremely diffiicult to use because there were no breadcrumbs or ways to navigate through levels.

Solution

Design simplified, modern navigation system. Remove hover action. Allow design to accomodate large and small catalogs.

Shopping Friction

The catalog design of the old site was problematic for users for the following reasons:

Solution

Redesign catalog using updated layout. Remove the hover action. Ensure user can purchase product on list view.

Catalog used a hover-state modal window for displaying product information which was very clunky.
There was no way to purchase an item without jumping into the product details or surfacing the modal.
Users also shared that filters were incredibly non-specific and did not help them find items.

Findability Problems

In research we learned that users have a difficult time finding items on the site for the following reasons:

Solution

Expand global search to make more obvious. Ensure that it displays results without leaving the page. Ensure all item information displays at correct levels.

Whether they seek items via the global search or browse their catalog it remains difficult for them to effectively find products.
The lack of imagery or effective product badging encourages guessing rather than confidence.
Most users prefer to use shortcuts such as saving items in a Favorite List so that they do not have to find products.

Complicated Checkout

In research we learned that Checkout was a central issue. The old checkout system was a very complex multi-page process that users did not appreciate due to:

Solution

Redesign checkout experience. Add components to help users work through the process. Ensure process is clean and simple.

Participants discussed being confused and agitated by how much information was required.
Participants shared that they felt the page-after-page approach made the checkout feel needlessly long.
Overall, they wanted a quicker and simpler version that did not require as much information up front.

UX Deep Dive Below

DESIGN

Wireframes and prototypes for days.

Our design strategy was to create an ever-growing, low-fidelity, fully-functional prototype of the entire site. This worked very well since each page had specific requirements and scenarios that needed prototyped. We did two rounds of user research throughout this process with a prototype that I made and ssing low-fidelity design helped us to be flexible to apply feedback. As things were finalized, we worked in Figma to generate the UI and the Design System for the new website.

UX Deep Dive Below

THE NEW SITE

Meet the redesigned Storefront. Modernized and efficient.

After the research and some iterative testing to refine our concepts things began to fall into place. Users were clear that they needed to be able to complete tasks quickly. I prototyped, created functional and UI requirements and worked with engineers to ensure the intended UX carried through development. Below are a handful of features which show some of the drastic improvements over the old site.

UX Deep Dive Below

DESIGN SOLUTION

Catalog Redesign

Improvements such as including the 'Add to Cart' button on the list view to help users purchase items easier and quicker. Previously this was a modal window which was very fiddly for users.

DESIGN SOLUTION

Pop Up Shopping Cart

To reduce user back and forth from the shopping cart page we included a Pop Up Shopping Cart similar to Instacart. This works to reduce friction of having to visit the cart too much.

DESIGN SOLUTION

Checkout Redesign

Designed a one-page simplified checkout experience. This simplified approach uses a modern checkout flow similar to Amazon where delivery, order and payment information is on one page making checkout a breeze.

DESIGN SOLUTION

Global Search

Made it easier and more obvious how to find products. The global search was enhanced from it's previous iteration to allow purchasing directly from the search results.

DESIGN SOLUTION

Navigation Redesign

Quick slide out menu navigation helps keep complex client catalogs in check. The design allows the user to easily locate products from anywhere on the website - quickly.

DESIGN SOLUTION

Wayfinding Optimization

Added breadcrumbs, navigational wayfinding and simplified the information architecture. Navigation issues in the old site were a consistent sticking point during the research phase.

OUTCOMES

Stats and figures.

Measurable results and figures trended very positively throughout the project. Below are a few examples of efficiencies that were created as a result of the new Storefront system.

UX Deep Dive Below

96%

System Usability Scale (SUS) score with new UX.

16%

Faster rate of purchase checkout compared to old system.

-23%

Reduction in time to in find items via the new navigation menu.

More items purchased per each order with the new system.

WRAP UP

Storefront is reborn.

Users loved the changes and felt the redesigned modern, minimal interface was a great next step for Storefront. They feel that the features are in line with their needs and the redesign enhances their productivity. It is currently being enjoyed daily by Storefront's userbase.

UX Deep Dive Below

Wireframes Designed

156+

Prototypes Created

42+

Participants for Research

Brand New Design System

Lack of Consistency

Fixed

Issues Finding Products

Fixed

Outdated interface

Fixed

Navigational Issues

Fixed

Thank you for reading!

ABOUT The Author

Justin Watts

Sr. UX Lead, Usability Fanatic and Avid Record Collector

Product Design. UX Strategy. User Research.

Justin Watts is a user-centered designer with a decade of experience. He attended Kent State University and received a Master of Science degree in User Experience Design. He has worked on UX projects in enterprise, agency and startup environments. He has spoken a various usability engagements and is active in the UCD community.

Check out this UX Case Study:

8 minute read

2022 UX Case Study

Sundays for Dogs

UX Case Study for optimizing the Sundays for Dogs website by redesigning the homepage, product, checkout and cancellation flow.

Read Case Study →

OLD SITE

Before

Outdated interface, excessive links, missable search, unclear icons, inconsistent navigation and visual hierarchy.

NEW SITE

After

Updated interface, streamlined navigation, primary calls to action, clear links, global search, message board, new functionality.

THANKS!

Thanks for checking out this case study! Please feel free to keep reading if you like.

CASE STUDY

Westfield Insurance