top of page

E-Commerce Web Re-design

Redesign Using
UX Strategy to Reduce Bounce Rate

Collaborated with three UX Designers to redesign a responsive website for a health/nutrition e-commerce retailer. Decreased overall bounce rate by at least 50% and increased weekly user engagement by 75%

Project Overview

About Supplemint
Supplemint is an American company that provides supplements to cure hangovers.


  • To increase discovery of the website’s call-to-action button.

  • To decrease time spent making a purchase decision to lower the bounce rate.

  • To increase customer confidence in purchase.


• 88% bounce rate to 35% bounce rate
• 98% success for CTA click-through rate from homepage to product page (the high bounce rate from earlier)
• Customers and their impressions were 3x better
• 100% testers confidently understood that Supplemint offered hangover cures and "Good times" is the name of the product.


The Team
Evelyn Brokering: UX Designer
Estie Choi: Lead UX Designer
Melysia Cha: UX Designer
Nikki Robyn: UX Designer

Tommy Huynh: Developer

2022 January - March

The Problem

The original website has had a very high bounce rate

The original website has had an unacceptably high bounce rate of 80-95%. We needed to find ways to make the site more “sticky” so that visitors would engage with the product and make purchases.

The Process

Understanding and addressing the problems

  • Defined client goals and conducted user testing of the existing site to learn what is working and what isn’t.

  • Proposed solutions and worked with the client to refine those solutions.

  • Created wireframes and tested them with users.

  • Implemented revisions, based on user and client feedback, and created a final design.

The Solution

Redesign to engage users and close sales

  • Clearly communicated the product’s value and benefits.

  • Clarified the branding of the product and the company.

  • New style guide that helped communicate the brand attributes.

  • New site map for simple navigation and a clear product directory.

  • Reorganized the layout and designed new web pages for each page.

  • Emphasized the call-to-action buttons.

  • Made the text/font readable and accessible.

Landing Page Before and After

Redesign Process

From the initial research through the final Solution, User Testing on people with dyslexia was key to my process.

👇 Click on a process below to skip👇

1. Research & Analysis

  • Market Research

  • Site Audit

  • Competitive Analysis

  • User Interviews

  • Empathy Map

2. Define

  • User Needs & Insights

  • Defining the Problem

  • User Persona

  • POV & HMW

  • User & Business Goals

  • Site Map

3. Ideate

  • Ideation Board

  • Low-fidelity wireframes

  • Task/User Flow

4. Design

  • UI Design

  • High-Fidelity Wireframes


5. Usability Testing
& Prototype

  • Usability Testing

  • Final Prototype



As a team we used Figma for low- and high-fidelity prototype design, Slack for our communications, and Zoom for our daily team meetings and meetings with stakeholders. For efficient project management, our team used Notion to organize important project deadlines. We tracked our work progress every day to wee if we were behind or ahead of our projected due date.


Initial Research

Understanding the users’ ideal reservation

Our team began with a market-research and site-audit process, which allowed us to identify key insights that would drive our redesign process. We met with the Supplemint team to understand the company's history, project needs, goals, and objectives for our research. From this meeting, we understood that highlighting the benefits of the Supplemint product and decreasing time required for customers to make a purchasing decision would be most important to our stakeholders.

Competitive Analysis

Our competitors

We created a list of Supplemint’s direct and indirect competitors in order to understand the information architecture and market design trends in the supplement market. Our goal was to have a framework for how to structure Supplemint’s website. Some of the direct competitors included Cheers, Blowfish, The Plug, and Upside. Indirect competitors included Wthn and Care/of.

Group 29551.png

Site Audit

Dissecting the original site

The site audit process allowed us to identify what was not working with the current website. We brainstormed solutions to each of the problems we found. We kept a focus on how we could improve Supplemint’s product sales process.

Group 29553.png
Group 29554.png

User Interviews

Testing the original site

We interviewed four participants, ages 24 to 31, to get feedback about the original Supplemint website. We were able to understand which features customers found most helpful, as well as their frustrations.

Empathy Map

Testing the original site

Working synchronously as a team, we categorized users’ comments and created an Empathy Map. We then used the categories to generate insights.

Some of the Insights were:

  • 100% of users get bad hangovers after drinking

  • 100% of users reacted positively to hangover cures

  • 100% of users did not understand what Supplemint does and were confused about the product’s value

🔗 View Empathy Map

Research Conclusion

Users are confused about the product name versus the brand name

From the interviews, site audit, and market research, we were able to understand that the current website made it difficult for users to understand the product's value. Understanding the value is key to making a purchasing decision. Also, since this site currently offers only one product, users were confused about the relationship between the company name, Supplemint, and the product's name, Good Times. So clarifying the product's name and the benefits of the product is important in the redesign process.


Insights and User Needs

Users want to fully understand what they consume

After creating the Empathy Map and those insights, we compiled a list of corresponding user needs. We identified 26 needs.

The needs most commonly expressed were…

  • 100% of interview participants want to understand the ramifications of a product going into their body.

  • 100% of interview participants wanted a clear understanding of what Supplemint is and what the company sells.

  • 100% of interview participants want company and product information before making a purchase.

🔗  View Empathy Map

Defining the Problem

Identifying and prioritizing pain points

From the 26 needs, we were able to pinpoint the problems the users were facing.

Information is Insufficient to Build Trust

All interviewees mentioned how important it is to understand the ingredients of a product. Showing how the product is based on science is key to gaining users' trust.

Poor Navigation

Customers are frustrated when the buttons are not working and the website is hard to navigate.
The information they are looking for should not be hard to find.


Brand Representation

Users want to understand the brand’s mission. There is not enough information about the company on the “About” page.

User Persona

Meet Kevin!

With our findings and user interviews, we created our user persona, named Kevin.

From Kevin’s goals and needs, we created his point of view (POV). With his POV, we were able to identify how we can help Kevin by creating a “how might we” statement.

Kevin’s POV

POV 1:
Kevin needs to understand the product’s value because he wants to wake up feeling healthy for work.

POV 2:
Kevin needs to discover remedies for hangovers to feel energized for his daily routine.

POV 3:
Kevin needs to trust the company and product information provided so that he feels confident he’s buying a supplement that works.

How Might We

HMW 1:
How might we help Kevin understand the product’s value?


HMW 2:
How might we help Kevin discover remedies for hangovers?

HMW 3:
How might we provide Kevin with the right content and information to purchase a supplement?

New Site Map

Restructuring the site map

From our initial research, we learned that simple navigation and a clear product directory was important. The original site had eight tabs on the header. That was overwhelming for a site selling only one product, so we narrowed it down to three tabs: home, shop, and learn.

Ideating the Solution

Ideation Board

Finding solutions to the “how might we’s”

From the three “how might we’s” we created earlier, we brainstormed ideas about solutions to each of them. We researched competitors and how they approach the issues. Below is the ideation board I created for each of the “how might we’s.”

After creating the ideation board, our team talked about the solutions we came up with and voted on the ideas that we liked best. The different colored circles represent each team member voting on the idea they liked.

Sketching & Low-Fidelity Wireframes

Deciding the page layout as a team

Time to start sketching for the low-fidelity wireframes! All of our team members brainstormed and created sketches for each page. Below is the sketch I created for the home page to discuss with the team. I came up with several potential solutions to each of the pain points.

Then we discussed why we designed the way we did and voted on which features we liked. The different colored circles represent each team member voting on the idea they liked.
Then we pieced together the features we voted on and stitched together and created the ideal layout for each page, and created low-fidelity wireframes to show stakeholders.

Voting on the design as a team

Piecing the voted designs together to create the final layout


UI Design

Creating a new style guide

As a team we recreated the brand's color and fonts to make the site more visually appealing. Each color represents a brand attribute: dark blue for Modern, light blue for Trust, orange for Energy, and yellow for Happy. We chose to use off-white for the background color to set off the header, which is pure white. For the font we chose Poppins for a trendy look.

High-Fidelity Mockups

High-fidelity mockups

We used the stakeholders’ feedback about the low-fidelity wireframes to refine and narrow down the solutions for the high-fidelity mockups. The pages I was in charge of designing were the product, contact, and blogs pages.

Landing Page Before

Landing Page After

screencapture-supplemint-2022-02-22-15_50_08 1 (1).jpg

All photos and text are placeholders!

Products Page Before

Products Page After

All photos and text are placeholders!

Contact Page Before

Contact Page After

Blogs Page Before

Blogs Page After

All photos and text are placeholders!

Usability Testing& Prototype

Usability Testing

Testing the design with target users

After sharing the high-fidelity mockups with the stakeholders, we made changes to address their feedback. Using the task flow, we used scenarios 1, 2, and 3, to conduct usability testing. Five participants in total completed a round of three tasks.

The user has a party event this Thursday night but still wants to wake up feeling energized for work the next day. So he/she is looking for a supplement that will prevent getting a hangover, just in case. The user googles “hangover cures” and lands on Supplemint’s website.

Task #1: Learn about Supplemint.
Task #2: Find product (i.e., Good Times)
Task #3: Purchase Good Times.

Next Steps

We are waiting for assets from the stakeholders

My UX team and I are currently waiting for assets from Supplemint. Once we receive the assets, we will replace the placeholder text and images and create the final prototype.

1. Research
2. Define
4. Design
3. Ideate
5. Testing

Thank you for your time on reviewing my work on Supplemint!

bottom of page