The Problem
Our team was tasked with the complete redesign and relaunch of our website within a tight six-month timeframe, which presented our primary challenge. This was a significant undertaking for our small internal team of six, supported by outsourced developers. Our strategic approach prioritized enhancing the user experience and user flow of key pages: the Homepage, Product Listing Pages, and Product Detail Pages, along with their core features. Secondary pages, such as the 'About Us' and 'Career' pages, were scheduled for UI updates only during this initial phase, with more comprehensive improvements planned post-relaunch. This case study will use the Product Listing Page (also known as the category page) as a key example to detail my specific role and contributions to its redesign.
TLDR
Our small internal team had 6 months for a full website redesign, focusing on UX and UI for key pages like Homepage, PLPs, and PDPs. This case study details my work on the Product Listing Page (category page) redesign.
The Goal
We hypothesized that enhancing the customer experience and improving loading times would lead to higher product conversion rates. The redesign of our website and app was aimed at not only reflecting a more mature brand identity but also significantly improving usability.
The Crew
CRO Expert
SEO Expert
Data Analyst
UX Designers
My Role: Research, UX/UI Design and Testing lead
My role involved collaborating with our SEO, CRO, and Data experts, integrating their insights with findings from my UX research to synthesize a comprehensive blueprint for the website redesign/rebrand.
Following this, my team lead who also does UX Design and I, developed numerous wireframes and prototypes. These were then iteratively refined based on team discussions, culminating in a final Minimum Viable Product (MVP).
Finally, after the new design was implemented, I led the testing process, working closely with our developers and shop managers to ensure quality and functionality.
TLDR
≫ Synthesized expert and research insights into a redesign blueprint.
≫ Developed and refined prototypes to an MVP.
≫ Led post-implementation testing.
UX Research Phase
Redesigning is never simple. We began by auditing our existing user experience using tools like heatmaps and session recordings, followed by data analysis. Next, we reviewed customer feedback and mapped the core elements of our business, such as adopting a mobile-first approach, since the majority of our customers shop on mobile. Finally, we analyzed our competitors.
Here’s a glimpse into one of our collaborative research boards.
TLDR
We audited our UX using heatmaps, session recordings, and data. After gathering customer feedback and analyzing competitors, we focused on a mobile-first approach to align the redesign with user needs and business goals.
A glimpse into one of the many boards I created to summarize our research.
Main Tools used
Final Desing: The Product Listing Page
Comparing the old design (labeled 'Before') on the right with the final redesign (labeled 'After') on the left, some notable changes include:
≫ The grid was changed from 5px to a more modular 4px.
≫ A new color palette was introduced that shows more maturity.
≫ The font for labels was changed to a new, more mature style.
Main Tools used
Conclusion and Takeaways
We had to make tough choices as to where to cut corners. We couldn’t implement all the brilliant ideas we had come up with stemming from our research and had to choose the most promising in terms of conversion rather than friendly or beautiful usability.
One other challenge came from working with multiple teams; our content director had just quit and they were supposed to decide on the new color palette that we would then apply to our UI colors. This left us with no other choice but to use dummy colors most of the design phase.
We were extremely happy that our site presented no major issues after the relaunch. Small bugs here and there but nothing of concern or hindrance to our users' ability to shop on the site.
TLDR
Project faced tough choices prioritizing conversion over usability/aesthetics. Team changes (content director left) delayed color decisions, requiring dummy colors during much of design. Relaunch was successful with no major issues hindering users, only minor bugs.
Thank you for reading until the end. This is version 1.0