miyuki nozawa

A website to introduce a local business and expand their business

Project type: Responsive web design

Role: UX/UI designer

Project duration: 1 month

Industry: Beauty, personal care

Pibu, a local Korean skincare store in NY wants to create an e-commerce website to expand their business. While they have a defined target audience and brand theme, they are unsure how to align the website with these aspects effectively. They are also uncertain about the type of content they should include to enhance customers' desire to make purchases. Additionally, Pibu aims to build an original website without relying on SquareSpace templates. It's crucial to develop a uniquely designed, user-friendly website that stands out from competitors.

Solution

Developing a website to increase awareness of Pibu, focusing on e-commerce for business expansion and emphasizing user-friendliness.

Introduction

Pibu is a family-owned Korean skincare store located in New York City. They target individuals of all genders in their 20s to 40s and offer a variety of skincare products. Since opening their store just 6 months ago, they have not become widely known yet. Their customers are mainly local residents, and they are considering the development of a website and an e-commerce platform to expand their business. They are hoping to have a website that matches their target customers and the aesthetic of their store.

How can we build an e-commerce centric website to increase the recognition of Pibu and assist in its business expansion?

Research

Research Goal

Understand which information is beneficial for users and what motivates them to increase their desire to make purchases. This will help us encourage users to shop at Pibu, thereby increasing its recognition and contributing to business expansion.

Getting to know what services competitors are offering and how they are acquiring users

First, I conducted a competitive analysis to understand the structure and features of general skincare e-commerce sites. I examined how competitors are providing their e-commerce sites, how they enhance user purchasing intent, and whether they have features that attract users.

Competitive Analysis

I compared two direct websites specializing in K-beauty and one indirect website focusing on general skincare. Based on each site's brand value and target users, I identified how they are presenting their websites.

While all e-commerce websites share basic functionalities, each one incorporates unique features tailored to their target users. Direct competitors have fewer products but offer a simple and very user-friendly layout. On the other hand, indirect competitors, with a broader range of brands and products, use icons and other design elements to make the vast amount of information more accessible.

Through competitive analysis, I learned that understanding the information users need and how to present it is crucial. With many competitors in the market, unique features and content are essential for differentiating ourselves from others. Additionally, it's important to consider the functionality of the website to enhance users' purchase motivation.

View the competitive analysis

Research objectives

Identify what users prioritize in choosing websites
Understand what kind of information users expect regarding skincare products
Determine what increases user’s purchasing desire
Understand what motivates users to buy skincare products
Understand the user's pain points when purchasing skincare products

Research methods

I conducted two different research methods to obtain quantitative data on skincare product purchases and qualitative data based on users' specific experiences.

Survey

The first research method I used was a survey. The survey was conducted to collect quantitative data from a wide range of people to understand how interested people are in skincare products, and what criteria they use and how they make their purchase decisions.

Survey participants

15 people, age between 25-44

Key questions

How often do you purchase skincare products?
What websites do you use when you purchase skincare products, and why did you choose those websites?
What criteria do you use to select skincare products?

Responses from participants

User interview

The second research method I conducted was user interviews. I gathered qualitative data on users' specific thoughts and personal experiences. I particularly focused on users' motivations and challenges related to purchasing skincare products.

Interview participants

5 people who are interested in skincare products

Age between 27-37

Key questions

Have you experienced any difficulties in selecting the right skincare products?
Have you ever had an experience where you were not satisfied with a skincare product you purchased?
If you have an opportunity to learn more about skincare, what specific aspects would you like to know about?

Responses from participants

Results

Through surveys and interviews, I was able to understand how interested people are in skincare and what criteria they use to select products. I also gained insights into the difficulties they encounter and the information they expect when purchasing products online. I recorded these key points on individual sticky notes and created an affinity map, and and categorized the information by topics and patterns.

What is the biggest challenge when choosing skincare products?

What do you expect from online purchases?

View the full affinity map

By categorizing the points into topics and categories on the affinity map, I was able to gain a deeper understanding of users' needs, the information they expect when purchasing products, and the essential elements required for the pibu website.

Challenges when selecting skincare products

Find the right products
Know the texture, scent, and potential for allergic reactions
Understand skin type
Trust reviews

Key factors when choosing skincare products

Other people’s opinions (reviews, ratings, recommendations)
Personal opinions (skin concerns, skin type, preferences)
Product details (ingredients, texture, scent, effectiveness, price)

Difficulties when purchasing products online

Can’t test samples
Can’t see the product
Lack of reviews

Through the entire research process, I was able to identify key points that enhance users' purchase motivation. I also gained a clear understanding of what is needed to meet users' needs.

Key findings

Display trustworthy reviews and ratings
Provide detailed product descriptions (ingredients, texture, scent, allergy reactions)
Identify skin type & recommend products based on skin type
Highlight expected benefits
Offer competitive pricing

Define

After conducting research, reviewing the findings, and organizing the data, I created two personas in the early stages of the design process to deepen my understanding of specific users.

Persona 1

Peter Cho is a 34-year-old software engineer in New York who, influenced by his partner and friends, has recently started using skincare products. He seeks to find effective products and establish a daily routine but struggles with determining his skin type and understanding the efficacy of various products due to the overwhelming amount of information available.

Persona 2

Mary Harris is a 28-year-old kindergarten teacher from New York who is passionate about skincare and often seeks discounts online. She is currently concerned about dull skin and is eager to try new products, but hesitates due to the inability to test samples beforehand and worries about negative reviews. Her challenges include determining product suitability without samples and dealing with limited reviews.

View the personas

To clarify the solutions needed to address specific user needs, I created three POV statements based on the personas. Among them, I selected the POV related to skin type as it is the most crucial for achieving the personas' goals.

POV (Point Of View) statement

I'd like to explore ways to help people to find and understand their skin type because choosing the right skincare products becomes challenging without knowledge of their skin type.

Then, I took the problems into clear questions that help find creative and practical solutions.

HMW (How Might We) question

How might we help people to effectively choose the appropriate skincare products based on their skin type?

Design

As a step to generate ideas to solve the persona's problems, I set project goals based on the POV and brainstormed feature ideas to address them.

Project goals

View the project goals

Feature ideas

While considering the technical aspects and input from stakeholders, I brainstormed key features that align with both business goals and user goals, with a particular focus on overlapping objectives to build a website that effectively achieves these goals.

To design the structure of the website, I conducted a card sort based on these feature keywords

Card Sort

I conducted a card sort with 37 cards and 7 participants. Using a hybrid card sort, I determined how users categorized the cards and decided on the menu items and their associated content.

Categories

Blog

Skin type

Sales/Offers

Cart

Skin concerns

About us

Card examples

New arrivals

Oily skin

Check your skin type

Shop all

Toners

Key ingredients

Check out

Anti-aging

How to use

As a result of the card sort, there were no new categories added by the users, and there was unanimous agreement on 15 out of the 37 cards. The results provided insights into how users want to access information and helped in creating a design based on their perspective.

Sitemap

Based on the results of the card sort, I created a sitemap for the website structure. Since users expect to see not only products but also categories like skin type and skin concerns as part of the products, the structure was designed to ensure easy access to detailed information from the shop section.

View the sitemap

Task Flow

To clarify the steps necessary for the personas to achieve their goals and ensure a user-friendly experience, I developed two task flows.

Identify your skin type

Purchase the right products for your skin type

View the task flows

User Flow

I created a user flow to understand user needs and identify potential issues or confusing elements.

Purchase the right products for your skin type

View the user flow

I created the page layouts needed for users to complete tasks based on the user flow and task flow. Through interviews, I found that many people preferred using desktops when purchasing skincare products online, so I focused on the desktop design.

Low-fidelity

Home

How to check skin type

View the full low-fidelity

Based on the low-fidelity sketches, I considered more detailed layouts and digitalized them to create mid-fidelity wireframes, making the detailed layout more tangible.

Mid-fidelity

View the full mid-fidelity

After creating the mid-fidelity wireframes, I conducted a quick test to check if users understood my design layout and if they found the interface user-friendly.

Mid-fidelity test

5 people (in person & online)

Determine and save your skin type

→ People were able to determine their skin type by looking at the table, but they found it somewhat difficult to save their skin type. The sections for each skin type weren’t clearly defined, so some people ended up saving the wrong skin type.

Compare products and purchase the one that best suits you

→ The comparison function was the biggest challenge. Because the compare button was not clearly visible, people were unsure how to compare products and were confused about what steps to take next. It's essential to make it clear that a comparison function exists and to ensure it's displayed in a way that's easy to use.

Based on the results of the mid-fi test, I iterated on the design to make it more user-friendly and help users achieve their goals.

Mid-fidelity (iterations)

View the iterated mid-fidelity

Branding

Pibu already has a developed store image, including the logo and aesthetic. Based on the brand image the stakeholders aim for, I chose typography and colors to attract users.

Style Tile

Based on Pibu’s brand values of clean, young, modern, and refreshing, I created two style tiles: one with a blue theme and one with a green theme. The blue style tile was selected by the stakeholder as the one that best aligns with the brand image.

Clean / Young / Modern / Refreshing

Typography

H1 - Avenir Next 40px

H2 - Avenir Next 36px

H3 - Avenir Next 30px

B1 - Avenir Next 26px

B2 - Avenir Next 20px

Function S- Avenir Next 16px

Function M- Avenir Next 18px

I chose Avenir Next because it offers a clean and modern look that aligns perfectly with Pibu’s brand image. Its readability and elegant design enhance the aesthetic of a skincare brand.

Colors

Primary

CCDBDE

9ABBC2

85999D

Secondary

F0EAE3

DBCFBF

C3B29C

Neutral

EFEFEF

FFFFFF

For the main color, I chose a blue hue that conveys a clean and refreshing feel. Among these, a slightly muted blue provides a modern impression. For the secondary color, I selected earth tones that give a modern and minimal look, which closely aligns with the store’s image.

In order to make a user-friendly website, I conducted an accessibility check to consider color contrast and color-blindness.

I applied all branding elements to the wireframes and created high-fidelity wireframes

Hi-fidelity

View the full hi-fidelity

Test

To confirm whether high-fidelity wireframes can actually achieve user goals, I conducted usability testing.

Usability test

6 people (in person & online)

Find out where you can determine your skin type
Save your skin type and find a list of items that are good for your skin type
Compare products and purchase the one that best suits you

Test results

Grace (she/her)

She thought she could just click item images (instead of the check button) to compare products

Peter (he/him)

He was able to finish all tasks but the process of comparing the products was a little bit challenging for him

Mayuri (she/her)

She seemed unsure about where to click for each of the tasks

Yingyang (she/her)

She tried to click many different items to compare

Natasha (she/her)

She expected to complete the tasks in a different way

Alexa (she/her)

It wasn’t difficult for her to finish the tasks

The users found it easy to determine their skin type and view product lists tailored to their skin type, but they struggled with comparing and finding the items that suited them best. Even after revising the item comparison process in the mid-fi prototype, they encountered new difficulties and found the process unclear.

Iterations

Home

Item list

Item list - choose items to compare

Comparison

After three iterations, I improved the design to prioritize usability, and users were able to finish the tasks easily.

View the desktop prototype

View the mobile prototype

Conclusion

Through this project, I gained valuable, realistic experience by working directly with stakeholders to design the website. A key achievement was developing a website that allows users to address their primary challenge: identifying their skin type, based on research findings and stakeholder requirements. The biggest challenge was balancing research-based design decisions with stakeholder feedback. Despite working within a limited timeframe, the fast-paced changes in the cosmetics market emphasize the need for continuous updates to keep the website user-friendly and support business growth.