Redesigning a website for a small business

Overview

Background:
The Skincare Bakery is a small, black-owned business based in Camp Hill, PA. They’re known for their TikTok-famous body butters and have over 900,000 followers on TikTok and 100,000 followers on Instagram.

Problem:
While they do have a TikTok shop, their external website leaves a lot to be desired. The website is inconsistent, unresponsive, and not user-friendly. As a result, the brand mainly sells on the Tiktok shop, which may not sustainable in the long term.

Role:
UX Designer

Tools:
Figma, Maze, Google Docs

Timeline:
8 weeks

OS:
Desktop/iOS

Research Goals

When doing the research, these were the research goals I wanted to accomplish:

Learn more about the user process when making an online purchase.

Discover users’ thoughts about shopping through an organic website vs a social media marketplace.

Create a website that is not only easier to navigate, but will also direct more traffic to the site.

Competitive Analysis

For the competitive analysis, I compared four beauty brands that were viral on TikTok. The four brands were Canvas Beauty Brands, Rare Beauty, Fenty Beauty, and Summer Fridays.

The purpose was to see which brands had a TikTok shop, as well as seeing community engagement and the UI.

Quick Analysis:

  • I noticed that while these brands all had a strong following and engagement on Tiktok, they didn’t really have a Tiktok shop.

  • The users mainly went through the brand website, or through a trusted retailer (i.e. Sephora).

  • The brands didn’t have a category for viral products.

User Interviews

Three user interviews were conducted. All of the interviewees were women who used social media often, specifically Instagram and Tiktok.

Some of the interview questions asked were:

  1. How much of an influence is social media when it comes to making purchases?

  2. Do you prefer to shop through a social media marketplace (ie, TikTok shop, IG, FB), or through a direct website? Why?

  3. What challenges do you come across when shopping via social media?

  4. What would convince you to make a purchase through TikTok versus a direct website?

  5. When shopping for beauty brands, what do you normally look for?

Synthesis Debrief:

  • Safety and security were common issue when it came to shopping through a website vs a third party shop.

  • All three of the women wanted to be able to have a direct contact to seller.

  • Many of them come across new products via TikTok, but are wary of the TikTok shop.

  • They also want to make sure that the product they purchase is of quality, and has legitimate reviews.

User Persona

I created a user persona based on the results that I obtained from my user interviews.

Meet Ameera!

Ameera is 25 years old, and works in public relations. She’s really into beauty and skincare, and finds most of her products via social media. Her main issue is finding products from brands that she can trust.

User Flow + Task Flow

For the user flow, I decided to go through the user journey of purchasing a body butter.

User Flow

For the task flow, I decided to focus on three tasks of the user experience.

Task 1: Search for a body butter

Task 2: Add products to cart

Task 3: Purchasing products from cart

Task Flow

Early Stages

When sketching, I focused on the where the website was lacking. I wanted to make sure that the website was as straightforward as possible.

Design

For the design, I wanted something that could appeal to both Millennials and Gen-Z, since those are the two groups that use social media the most. I wanted a website where the main focus was the product and was consistent throughout.

When looking at the website, I noticed how inconsistent it was. It was confusing trying

When creating the style tile, I wanted to use colors that were popular with Millennials and Gen-Z. I chose to go with a sans-serif font because I wanted the website to come off as approachable, and easy to read.

High Fidelity Prototype

After establishing my style tile, I began to work on the high-fidelity prototype

Usability Test

The usability test was conducted using Maze. There were a total of 12 participants. The participants had to complete three tasks.

Task 1: Search for product

Task 2: Select the product

Task 3: Checkout

Results/Feedback

  • Users found the website very straightforward and easy to use.

  • Users didn’t like how they couldn’t “add to cart” via the results page.

  • Overall users were interested to learn more about the brand due to the website.

Priority Revisions

Below are the before-and-after revisions based on user feedback.

Key Takeaways

What I’ve Learned:

  • People tend to be creatures of habit, which is why users were more comfortable with shopping via a website than through social media.

What’s Next?

  • I would like to continue working on improving the website.

  • I’ll apply what I’ve learned in this case study to future designs moving forward.