How Can an E-Commerce Website Be Redesigned to Drive Sales and Simplify Management?
Tools: Figma • Jira • AHREFS • Posthog • ContentStack
Skills: UX Research • Ecommerce Design • Data & Analytics • A/B Testing
Note: For confidentiality purposes, all industry details, company names, brand names, and store names have been intentionally disguised. All visuals used are mockups and do not represent actual company assets. This case study focuses on the process, challenges, and outcomes of the project while respecting proprietary and protected information.
Overview
As the lead UX designer at The Company, I was tasked with redesigning an e-commerce website for one of our subsidiary brands which spans 18 retail locations. The project aimed to address several challenges: fixing UX and UI issues, refreshing an outdated design, and implementing a new menu system rendered entirely on our side rather than through an iframe.
This redesign was a significant milestone for the company, marking one of the first implementations of its kind for this retail software platform. After launching the site, my work continued with data analytics, SEO optimization, feature requests, surveys, and A/B testing to further refine and improve the user experience.
Problem
The e-commerce website faced several challenges that needed to be addressed:
The design and structure were outdated and lacked a modern, user-friendly aesthetic.
The site was originally designed and built entirely by developers, who did an incredible job with the resources available but were limited by the tools at hand.
Editing the site for content was nearly impossible for the retail team, as it required coding rather than a drag-and-drop interface.
The site had a complex and bloated structure, with many unnecessary pages making navigation confusing.
It frequently broke and took a long time to load due to the current setup.
The site was not ADA-compliant, limiting accessibility for all users.
Testing required a live environment, complicating updates and iterations.
A stakeholder described the original user experience as “a weird experience.”
Additionally, the company’s retail platform was launching a new product to allow menu rendering on our side (instead of using an iframe), and this was an opportunity to implement it.
The original homepage functioned more like a flyer, lacking clear pathways to guide users to their desired destinations
My Role and Approach
As the UX lead for this project, I worked closely with two developers, the brand design team, one data analyst, and a diverse group of stakeholders. To guide the redesign, I followed a goal-directed design approach, ensuring the project stayed focused on addressing user and business needs.
Research: I conducted a competitive analysis, user interviews, and additional UX research to build a strong foundation for the design.
Design Process: I created personas and user journeys to represent key users, then developed wireframes that went through several rounds of iteration for both the website and deal-handling processes. Collaborating with the brand design team, we refined these into polished designs and built full-fledged prototypes.
Post-Launch: After launch, I continued working on the site by running surveys, conducting A/B testing, analyzing data, and optimizing for SEO to improve the experience further.
Research
Competitive Analysis
To inform the redesign, I began with a competitive analysis of six competing brands. I analyzed their site architecture, positioning, services, strengths, and weaknesses. This analysis revealed a important insight: in this industry, users value simple, intuitive designs that help them quickly find what they’re looking for.
Interviews
I then conducted interviews with the retail manager, district manager, and the two developers who built the original site. These conversations uncovered a significant challenge: the site was extremely difficult to update, leading to large static images being used in place of editable content. While this simplified updates, it negatively impacted both the user experience and the site’s SEO performance.
Travel Time!
Along with a few team members, I traveled to Colorado to visit stores. We observed customers in real-time, spoke with store employees, and tested the experience end-to-end for ourselves. These observations and insights were invaluable in shaping a design that met both customer and employee needs.
The mountains in Colorado are BEAUTIFUL!
Design Process
Personas and ICP's
The design process began with defining an ideal customer profile (ICP) that continued to evolve as we gathered more data. Using information from previous customers, we identified key characteristics such as age, gender, device type, language, location, challenges, purchases per month, average items per purchase, goals, budget, and decision-making processes.
From this data, we created four personas, each representing a unique customer segment. These personas were organized based on their likelihood to convert into our ideal customer. At every step, we focused on answering a crucial question: How can we convert these personas into our ideal loyal customer?
"As a marketing and sales strategy, the ICP framework can deliver faster sales cycles, higher conversion rates and greater lifetime values."
-Gartner
Site Architecture
Using insights from my research, I created a streamlined site architecture that prioritized accessibility and usability. The new structure focused on making the most important items readily accessible while eliminating unnecessary pages that complicated navigation.
Key priorities included:
Immediate access to shopping, ensuring users could quickly browse and purchase products.
Clear product categories to help users find what they needed with ease.
A prominent locations feature to guide customers to the nearest store.
Highlighting deals to attract and engage value-conscious shoppers.
An initial round of the site architecture
Wireframes
With the transition to a headless CMS, the new site was designed to be easier for the retail team to manage and more functional for users. I created wireframes that incorporated modular components and a streamlined product menu.
These updates included:
Modular Components:
Card Feature: For showcasing products, deals, or updates in a clean, organized way.
Split Screen Feature: To present complementary content side by side, such as product images and descriptions.
Hero Feature: To highlight major promotions or announcements prominently at the top of the page.
Product Menu: Designed with a focus on imagery, filtering options, quantity selection, and size selection, making the shopping experience intuitive and seamless.
Product Pages: Structured for SEO indexing, with dedicated space for well-crafted copy to improve discoverability and user engagement.
Some of the component wireframes
Design
For the visual design, I collaborated with the brand team to incorporate a refreshed branding that aligned with the target audience's preferences and expectations. This new design included:
Clear and Large Imagery: To engage users and showcase products effectively.
Accessible Colors and Text: Ensuring the site was visually appealing while meeting accessibility standards.
Completely Refreshed Menu: Providing a modern, intuitive navigation experience.
Screenshots of design mockups
Development
I worked closely with the development team throughout the project, collaborating on iterative improvements both before and after the site launched. The team was deeply invested in this project, and it was inspiring to help bring their vision to life.
Together, we worked through challenges, refining the site to ensure it met user needs and technical goals. It was incredibly rewarding to play a role in creating the site they had always envisioned, combining their technical expertise with user-centered design principles.
Outcome & Continued Work
The site went live to much excitement! Upon launch, we received rave reviews from employees who were thrilled with the new design and functionality. To gather customer feedback, we ran an NPS survey asking, “How likely are you to recommend this site to a friend?” The results were outstanding—a score of 66.3, which falls well within the “excellent” range according to the creators of the metric.
But the work didn’t stop there. Post-launch, we regularly use tools like Posthog and Ahrefs to monitor session replays, create feature flags, run A/B testing and experiments, and improve SEO.
For example, our industry requires users to pre-order products online. To optimize the process, we tested two buttons: “Pre-order” vs. “Shop.” Out of 300 users, “Shop” won by an overwhelming 99.98%, leading to improved conversions.
The brand saw a notable boost in online sales after the redesign, making the project an overwhelming success.
Some results of our tests and surveys in PostHog
Reflection
Reflecting on this project is a positive experience. The work on the site continues to this day, but with a new e-commerce system being rolled out across our different brands, the site will likely receive another makeover in the near future.
Part of working in this industry is embracing change, and I’m excited to continue pushing the site forward!