E-commerce Redesign and Replatform

Primary Goal

Modernize an enterprise scale e-commerce site by redesigning the user experience and relaunching on a new software platform.

My Process

Internal Discovery and Platform Selection

The full overhaul of a decade-old e-commerce site is a large undertaking, so extensive discovery was a key part of the process.

First, Map What Exists

Mapping the customer and internal facing site functionality was done collaboratively. I focused on creating user flows for: on-site search, e-commerce checkout, and internal order processing.

I created documentation and user flows from existing site data, working with developers on edge cases documented in the code, and from interviews of internal stakeholders.

Second, Choose a Platform

As a member of the panel selecting a new software platform, I was able to use the documentation and user flows my team created to support an informed software platform choice that maintained our technical stack, integrated with the internal legacy systems, and created a foundation for future upgrades.

User Tree Testing

Our existing data around how customers were using our navigation was inconclusive. So I advocated for taking the time to run tree tests on our navigation with remote users via Optimal Sort from Optimal Workshop. These tests provided the necessary information to make data driven decisions around our navigation. Whenever possible, I prefer to let user behavior inform my UX design choices.

Creating a Design System

Creating a design system allowed us to bring the site into alignment with current brand guidelines, and ensure it could be easily maintained in the future. I set up a component system within Sketch that allowed us to focus on reusable components that could be configured throughout the site to create the core functionality that was needed.

The design system was built in conjunction with page templates and other features so that it could be adjusted and polished across use-cases as we worked to lay out the full functionality of the site.

Designing Core functionality

The core features of any e-commerce experience are: navigation/search, product listing pages, product detail pages, and checkout. On this project I focused on on-site search.

Search

The primary goal of search is to make it easy for users to find what they are looking for. That requires fast results, displaying the right amount of relevant information on result listings, and making it easy for users to browse results with appropriate sorting/filtering controls.

The new platform vastly improved the speed at which results were returned, so my primary focus was on sorting/filtering and result cards.

Filtering

Due to the expanded product data — provided by an earlier project I had done — there was a much greater number of attributes available to filter by. Besides the additional data was also taking into consideration the best way for the user to interact with that type of data — checkbox, range slider, text input, etc. The nature of the product being sold also lends itself well to filters that incorporate graphics to help the user more easily differentiate their options. I incorporated all of those decisions into how the filters ultimately looked, which included designing a custom icon set to be associated with a large number of the filter attributes.

Result Cards

Result cards are complicated because the space is minimal, but the decision point is high impact — customers often make a judgement about whether to explore the product further when looking at the result card — so it can be an important place for key messaging. Getting the hierarchy of the elements — photo, title, price, etc — correct is important because the user needs enough information to make a decision, but not so much that they get overwhelmed.

Finding the balance of information to include on the cards was also not purely a design decision, it also included conversations with internal stakeholders about why certain elements should/should not be included in the cards. Ideally, this type of high impact design decisions are tested using multi-variate testing to gather from user behavior what is truly the best option.

User Testing the Prototype

Another key feature of this redesign was running remote user tests on the rough prototype with UserTesting.com. The tests focused on how easily users could find product and key product information as well as feedback on their impression of interacting with the site. Analyzing the results of these tests largely validated that the decisions we had made were in the correct direction to move the site experience forward for our customers.

What I Learned

This project used Storybook as a place for the initial UI development that happened in conjunction with the design process. The resulting shorter feedback loop made refining the design system significantly easier. It also allowed the design team to be better integrated with the Agile sprints the development team was doing.

Closely integrating the design and development teams produced better outcomes faster on this project, and has continued to do so on projects I have worked on since. As someone whose skills span both design and development, I always find ways to bring the teams closer together on any project I work on.