Redesigned a legacy ordering platform from the ground up, applying product, interaction, and UX design skills to deliver a modern, customizable, feature-rich solution.
This project was to redesign an entirely customizable eCommerce platform used by 200+ clients. Businesses such as Ford, Best Buy, Wendy's and Elevance use to purchase and customize documents and marketing collateral. Note: Since the ordering platform is fully customizable, I used Ford to illustrate my designs rather than the site owner operator.
The website had been sparsely updated since the 90's and lacked modern features so it suffered from poor usability. To compound matters, the site has incredibly deep functionality to support all of client business processes. It is also deeply customizable so every client experiences UX issues in a different way. Research and iterative design helped forge a path forward to tame it's complexity.
"The entire website and ordering platform was redesigned and rebranded from the ground up. This included the ordering, customization, and checkout experiences. The redesign was completed with user input infusing each step of design."
Hundreds of clients use this site everyday to order customizable items. My team wanted to use broad UX research methods to ensure we were designing with the user in mind.
First, a heuristic evaluation of the old site to see the potential issues and fixes.
Second, external user research with users of the site to ensure we understood their needs.
Third, internal stakeholder interviews to understand the complex business prcoesses.
Research and discovery process yielded excellent information to inform the design process. The internal stakeholder interviews informed us of potential pitfalls, user grievances and desires for the new system. External user interviews informed us how users interact with the site in many different contexts. Over 30 interviews were conducted and I've summarized the broad strokes below.
The old site navigation was problematic for many reasons. It used an old mega menu design pattern which was finicky from an interaction standpoint. Due to the potential complexity of client information architectures, it also had the tendency to be bloated and poorly organized. The focus was to not only focus on the primary navigation but also navigation of product catalogs to improve the experience.
The primary function of the platform was to allow users to browse, customize and purchase products. The issue was that the implementation of these interfaces had a lot of friction during the entire process. Modals were poorly implemented and users had to dig into product details to purchase items which caused a lot of aggravation. The focus was to audit and streamline these processes to remove friction points.
All user types had issues finding products on the site which was a systemic issue from the old platform site. This caused a lot of confusion and frustration when users wanted to get in, purchase items and move on with their day. The focus was to fix these at both an interface and architectural level.
Checkout was a major issue for the old platform site. The issue being that there were entirely too many steps in the process. Since the site was older it used older design patterns and multiple steps. The focus here would be to create a single-page checkout that would still support the complex needs of clients.
The design strategy was to create a living, fully-functional prototype of the entire platform. Each page had complex requirements and scenarios that needed prototyped. Two rounds of usability testing were conducted during design. As things were finalized, we worked from low to high fidelity to generate the UI and the Design System for the new website.
The platform is complex and needed a lot of design nuance to implement correctly. I worked directly with Stakeholders, Product and Engineers to ensure the intended UX carried through. Below are a handful of features which show some of the drastic improvements over the old site.
The Product Catalog was redesigned from the ground up. Previously, users had to drill into details to purchase. The new design included improvements such as an Add to Cart button and Unit of Measure selectors on the page. The navigational elements were also cleaned up and organized with better wayfinding.
In an effort to reduce ping-ponging from products to shopping cart page we included a Pop Up Shopping Cart. the design is similar to Instacart. It works to reduce friction by providing access to the shopping cart without leaving the page.
The previous Checkout experience was multi-page and complex. In the new design we simplified the approach by pre-filling information and breaking the flow into manageable components which push the user through the process. Designed a one-page simplified checkout experience. This approach is similar to the Amazon checkout and users have loved it.
As the site changed, so too did the branding and entire design system. Each and every UI element was documented into a robust design system which informed all colors, fonts, branding and interactions. This living documentation was adopted and dispersed throughout the organization as part of the project.
The project was a success and the site is now fully operational and being used by hundreds of daily customers. We tackled each component and functionality and reached our goal of simplification and user satisfaction.
