miyuki nozawa
menu
Home
About
Projects
Pibu
Skincare Store Website
A website to introduce a local business and expand their business.
PibuPibu
Role: UX/UI Designer
Type: Responsive Web Design
Timeline: May - June 2024
INTRODUCTION
Background
Pibu is a family-owned Korean skincare store located in New York City. They opened their store in December 2023, and they target individuals of all genders in their 20s to 40s and offer a variety of skincare products. 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 to their target customers, and their aesthetic of the store.
Problems
Pibu has a clear target audience and brand aesthetic but struggles to align these with their website design. They are uncertain about the content that will encourage purchases and wish to create a unique, user-friendly website without relying on pre-made templates, ensuring they stand out from competitors.
Solutions
Developing a website to increase brand awareness and drive online sales, focusing on e-commerce for business expansion while emphasizing a user-friendly design that aligns with Pibu’s brand identity and appeals to their target audience.
Design Process
RESEARCH
RESEARCH
Competitive Analysis / Survey / User Interviews
DEFINE
DEFINE
Affinity Map / User Personas / Problem Statement / Project Goals
IDEATE
IDEATE
Feature Ideas / Card Sort / Sitemap / Task & User Flows
PROTOTYPE
PROTOTYPE
Wireframes / Branding / Prototyping
TEST
TEST
Usability Testing / Iterations
NEXT STEPS
NEXT STEPS
Learning / Different Approach
RESEARCH
Research Goal
Understanding which information is beneficial for users and what motivates them will enhance their desire to make purchases. These insights will encourage users to shop at Pibu, thereby increasing brand recognition and supporting business expansion.
card
Identify what users prioritize in choosing websites
card
Understand what kind of information users expect regarding skincare products
card
Determine what increases user’s purchasing desire
card
Understand the user's pain points when purchasing skincare products
Understanding the Competition
First, I conducted a competitive analysis to understand the structure and features of general skincare e-commerce sites. I compared two direct competitors specializing in K-beauty with one indirect competitor focusing on general skincare. Based on each site’s brand value and target audience, I identified how they present their websites.
sentisenti
check
For people who are interested in K-beauty
check
Competitive price
check
Extensive skincare and healthcare products
check
Points can be used like cash
warning
Some sections on the website are not well-functioning
Masksheets
check
For people who are interested in Asian beauty
check
Offers brands that are hard to find in other shops
check
Consistent Branding
check
Staff picked items
warning
Unable to view all brands in a list
Sephora
check
For people who are interested in beauty and health
check
Wide selection of brands and products
check
Utilization of social media
check
Reliability
warning
There is too much information on the screen
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.
starKey Features
Smooth purchasing process
Smooth purchasing process
User-friendly and intuitive features
User-friendly and intuitive features
Strong and impactful branding
Strong and impactful branding
Differentiating content from others
Differentiating content from others
Exploring the Experiences of Purchasing Skincare Products
Survey
I conducted a survey with 15 participants aged 25-44 to understand their interest in skincare products, the criteria they use, and how they make purchase decisions.
Key question
What websites do you use when you purchase skincare products, and why did you choose those websites?
Response
“I usually use Amazon or Target because I can check for discounts, view ingredient information, and read more honest reviews.”
avatar
Participant 1
Key question
What criteria do you use to select skincare products?
Response
“I want to know if the product is effective for my skin type.”
avatar
Participant 2
User Interview
In order to collect qualitative data on users’ specific thoughts and personal experiences, I conducted user interviews with 5 participants aged 27-37. I particularly focused on users’ motivations and challenges related to purchasing skincare products.
Key question
Have you experienced any difficulties in selecting the right skincare products?
Response
“I have had difficulties selecting the right skincare products because I didn’t know my skin type.”
avatar
Participant 1
Key question
Have you ever had an experience where you were not satisfied with a skincare product you purchased?
Response
“There was a lot of trial and error in finding products that work for me.”
avatar
Participant 2
starKey Findings
Lack of knowledge about one’s skin type
Lack of knowledge about one’s skin type
is common for participants
Finding the right products for your skin
Finding the right products for your skin
can be challenging
Trust reviews, ratings, and recommendations
Trust reviews, ratings, and recommendations
are key factors when choosing skincare products
Texture, scent, and potential reactions
Texture, scent, and potential reactions
are hard to determine when purchasing products online
DEFINE
Gaining a Deeper Understanding of User Needs and Pain Points
I recorded key points from the surveys and user interviews on individual sticky notes and created an affinity map. Then, I categorized the information by topics and patterns.
What is most challenging when choosing skincare products?
affinity map
What do you expect from online purchases?
affinity map
starKey Findings
80% of participants
prefer buying skincare products online rather than in person
Many participants
expect convenience and a wide product selection for online purchases
75% of participants
find choosing skincare products challenging
60% of participants
choose skincare products based on reviews, ratings or recommendations
Transforming Insights into Personas
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 and user needs.
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
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 anddealing with limited reviews.
persona
Exploring and Clarifying Solutions for User Needs
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 a 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.
down
Then, I took the problem into a clear question that helps 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?
Establishing Balanced Goals for Project Success
As a step to generate ideas to solve the personas’ problems, I mapped out project goals based on the research findings.
IDEATE
Prioritizing Features that Align Business and User Needs
While considering the technical aspects and input from stakeholders, I brainstormed key features that align with both business goals and user goals.
avatarspeech
Reviews
Reviews
Ratings
Ratings
Filter
Filter
Search
Search
Skin type checker
Skin type checker
How to use the product
How to use the product
Side by side comparison
Side by side comparison
Detailed product info
Detailed product info
down
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.
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.
card sort
Designing the App Structure with a 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.
Refining Key Design Decisions
I created two task flows to clarify the steps necessary for users to achieve specific goals and promote a user-friendly approach.
starIdentify your skin type
user flow
starPurchase the right products for your skin type
user flow
Mapping out User Needs and Goals
To understand user needs and identify potential issues or confusing elements, I created a user flow.
starPurchase the right products for your skin type
user flow
PROTOTYPE
Sketching Out Ideas
I created the page layouts needed for users to complete tasks based on the user flow and task flow.
Adding Detail to the Layouts
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. Although users will most likely engage with the product from a desktop, I wanted to make sure that all of the features would also work on a mobile screen.
addadd
addadd
Ensuring Users Understand the Design Layouts
After creating the mid-fidelity wireframes, I conducted a quick usability test with 5 participants to check if users understood the design layouts and if they found the interface user-friendly.
testtest
Refining Designs through Iterated Mid-Fi Wireframes
Based on the results of the mid-fi usability test, I improved the designs to make them more user-friendly and easier for users to navigate.
refinerefine
Building a Strong Brand
Pibu already has a developed store image, including a logo and aesthetic. To confirm the website’s tone and direction with the stakeholders, I created two style tiles based on their brand values: one with a blue theme and one with a green theme. The stakeholder selected the blue style tile as the one that best aligns with the brand image.
moodboard
Applying Branding in Hi-Fi Wireframes
I incorporated all branding elements into the wireframes to create high-fidelity designs.
TEST
Enhancing Design for Better Usability
To confirm whether the high-fidelity wireframes can actually achieve user goals, I conducted usability testing with 6 participants.
Task Flow 1
Find out where you can determine your skin type
participant
Participant 1
“Maybe a pop up on the bottom of the screen might help to find the skin type page.”
participant
Participant 3
“This was straight forward and I could find the page easily.”
down
star5/6 were able to complete the task easily.
Task Flow 2
Save your skin type and find a list of items that are good for your skin type
participant
Participant 2
“It wasn’t obvious that I can save my skin type.”
participant
Participant 5
“Having an instruction how to save the skin type might help for people to understand well.”
down
star3/6 were confused about how to save the skin type, even though they were able to complete the task.
Task Flow 3
Compare products and purchase the one that best suits you
participant
Participant 3
“I had to click and scroll too much when comparing products.”
participant
Participant 4
“The compare button can stay fixed, so you don’t need to scroll back to click it.”
down
star4/6 struggled to choose products for comparison and expressed a desire for a simplified comparison feature.
Iterating Designs for User-Centric Solutions
I conducted repeated testing and iterations to ensure the feature works smoothly on both desktop and mobile screens, refining the design to make it more user-friendly.
iterationiterationiterationiteration
Final Prototype
Skincare Store Website
A website to introduce a local business and expand their business.
address bar
Navigation to the skin type check page helps users choose products
Navigation to the skin type check page helps users choose products
noteAssist users who are unsure about what to purchase
noteA unique feature that sets the Pibu’s website apart from others
address bar
A skin type checker and saving function allow users to search for suitable products
A skin type checker and saving function allow users to search for suitable products
noteUsers can find the right products by knowing their skin type
noteReduce the stress of trial and error
address bar
A comparison feature simplifies product selection for users
A comparison feature simplifies product selection for users
noteEnable better product choices
noteEasily see the differences between each item at a glance
NEXT STEPS
Learning
Through this project, I gained valuable, practical experience by collaborating directly with stakeholders to design the website. A key achievement was creating a site that enables users to identify their skin type, which addresses their primary challenge based on research findings and stakeholder requirements. The biggest challenge lay in balancing research-driven design decisions with stakeholder feedback. Despite the limited timeframe, the fast-paced changes in the cosmetics market highlight the need for ongoing updates to keep the website user-friendly and support business growth.' pain points and consider how to enhance the user experience in order to create a better product. Since everyone has different travel purposes and preferences when choosing a restaurant, it was crucial to identify the problems that diverse users face and what they desire. Throughout this project, I came to understand the importance of user feedback and the necessity of collecting valuable insights through research.
Opportunities for Enhancement
Since many people seek convenience when purchasing skincare products online, the search function and checkout process need improvement. By enabling customers to quickly find the products they are looking for and reducing the hassle of entering information through card history, I can enhance customer satisfaction.
Back to Top
top