Project Overview
About Supplemint
Supplemint is an American company that provides supplements to cure hangovers.
Objective
-
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.
Results
• 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.
Client
The Team
Evelyn Brokering: UX Designer
Estie Choi: Lead UX Designer
Melysia Cha: UX Designer
Nikki Robyn: UX Designer
Tommy Huynh: Developer
Duration
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
Tools
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.
Research
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.
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.
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.
Define
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
Design
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
.jpg)
⚠️Disclaimer⚠️
All photos and text are placeholders!
Products Page Before
Products Page After
⚠️Disclaimer⚠️
All photos and text are placeholders!
Contact Page Before
Contact Page After
Blogs Page Before
Blogs Page After
⚠️Disclaimer⚠️
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.
Scenario:
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.
