Redesign e-commerce website

Boosting Conversions with a Mobile-First Website Redesign

COMPANY

Frolickers

ROLE

UX Designer

Tools

Figma

Platform

Mobile (MVP)

Overview

A successful e-commerce experience should feel effortless, yet many users abandon their shopping journey due to frustration. In this case study, we tackled the redesign of an e-commerce website to create a more intuitive, accessible, and engaging shopping experience. We transformed the platform into a seamless digital storefront that not only improved navigation and accessibility but also boosted user engagement.

Problem

The e-commerce website's poor navigation, cluttered interface, and accessibility issues created friction in the shopping journey, leading to high drop-off rates and lost conversions.

Solution

A website optimized for mobile use, providing customers with effortless, smooth navigation, and an intuitive shopping experience that continually engages visitors.

View Prototype

To transform the shopping experience, we focused on simplifying navigation, decluttering the interface, and improving accessibility. Through user research and usability testing, we identified key pain points and redesigned the site.

Effortless browsing

A clean, minimalist layout and well-structured categories make product discovery smooth and engaging

Seamless Navigation

Simplified menus and intuitive filters ensure users can find what they need with minimal clicks.

Intuitive
shopping

A streamlined interface with clear CTAs and an optimized mobile experience makes purchasing quick and hassle-free.

From Concept to Completion: A Look at the Process

01. Discover

By diving into user research, competitor analysis, site audits, empathy maps as well as stakeholder interviews, we identified usability gaps and friction points, uncovering key opportunities to create a more seamless and intuitive shopping experience.

So… HOW MIGHT WE make the website more engaging so she wants to explore more?

Website Audit

This audit helped us identify key areas of improvement, particularly in design consistency and overall usability.

Identifying Industry Trends and Best Practices

As we conducted a competitor analysis, we discovered that top luxury e-commerce websites all shared a common focus: clean, minimalist designs with intuitive navigation and clear product information. These sites prioritized features that enhanced the shopping experience, such as:

Wishlists
Horizontal image scrolling on category pages
Easy-to-use filters
Videos that brought products to life.

Understanding the user

To understand the user experience, we asked participants about their first impressions and how they would describe the site. We explored whether product pages had enough information to make a purchase, how easy it was to select products, and if they encountered any issues with the features. therefore we conducted user interviews providing them with a scenario and giving them a task as it follows:

02.Define

We transformed research insights by synthesizing affinity maps, problem statements, and user journey maps into a clear problem definition, ensuring a strong foundation for addressing user needs and business goals in the redesign.

03.Develop

To craft a user-centered solution, we brainstormed ideas, created wireframes, and conducted thorough user testing—all aimed at prioritizing ease of use and delivering a seamless shopping experience.

Collage of ideas: Developing Solutions Through Inspiration

At this stage, we began developing potential solutions. We immersed ourselves in analyzing various e-commerce websites, taking note of the features that worked best. Drawing inspiration from different sites, we started creating a low-fidelity prototype, carefully blending elements like a sleek header from one brand, vibrant color swatches from another, and a practical size guide from yet another. By combining these ideas, we began to shape a vision for the ideal website—one that would seamlessly merge functionality and design.

Redesign the site

Optimizing Product Pages for Clarity and Seamless Shopping

We optimized the product page to clearly showcase versatility, enhance user flow, and simplify the purchase process.

Improving the Homepage, Categories, and Beyond

We focused on the user by testing two different layouts for the homepage and product page through A/B testing to identify which design delivered the best experience.

Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.
Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.
Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.
Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.

Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.
Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.
Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.
Make feed experience more personalized and usefl
One of the main changes we had to make based on user interviews was the overall look and feel of the site.
Redesigning the category page
Some users struggled with navigating through cateogory page, so inspired by competitor research, we adopted a two-column grid layout to create a more engaging and dynamic presentation.
Simplifying the Sizing Experience:"Find Your Perfect Fit
We implemented a toggle feature that displays only the relevant, additionally, we introduced a clear CTA to make the section more engaging and user-friendly.

04. Deliver

We focused on the user by testing two different layouts for the homepage and product page through A/B testing to identify which design delivered the best experience.

Reflection

Next Steps

Detailed Exploration of the Checkout Process

In-depth evaluation of the checkout flow to identify potential areas for improvement, ensuring a seamless and user-friendly experience

Responsive Design Implementation

Implementing a responsive design to ensure seamless and a consistent user experience across both desktop and mobile devices

Further Design, testing and iterations

Refining and optimizing other pages of the website

Key Learnings

Importance of Team Diversity

Collaborating with a team that brought diverse perspectives enhanced the depth and quality of testing, leading to more insightful findings.

Enhanced Understanding of User Behavior

We gained a deeper comprehension of user behavior when shopping online, which informed design decisions.

Experience with Real-World Clients

Working directly with a real client provided valuable practical experience, fostering skills in client collaboration, stakeholder communication, and project delivery.

Follow me on other channels

Medium

Navigation

Case studies

Follow me on other channels