Makeup tutorials Website Design

Harneet Kaur
Project overview

The product:
Blush and Shades offers user to search and view
makeup tutorials easily. The user could easily look
search tutorials for specific skin tone and products
that could match that skin tone.

Project duration:
February 2023
Project overview

The problem: The goal:

Available tutorial website do not show specific Design a website where user can easily find
skin tone videos and products details. tutorials and products for specific skin tone
Project overview

My role: Responsibilities:
UX designer leading the makeup tutorial Conducting interviews, paper and digital
website design wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, and iterating on designs.
 ● User research
Understanding ● Personas

the user ● Problem statements

● User journey maps
User research: summary

I conducted interviews and created empathy maps to understand users I’m designing for and their
needs. I discovered many target users couldn’t find tutorial for specific skin tone.
However many websites do offer good tutorials but users still couldn’t find products that matched
their skin tone or skin type.
User research: pain points

1 2 3
Pain point Pain point Pain point

Tutorial websites offers Website offers products Tutorial websites don’t

large collection but overall and not specific provide an engaging
doesn’t offer filter to to skin tone and skin browsing experience.
select specific skin tone type.
Persona: Jack

Problem statement:
Jack is a makeup lover
who needs to be able to
look for makeup tutorials
for beginners in specific
skin tone so he can
learn, apply and
purchase for himself.
Persona: Jack
User journey map
Goal: A fast way to view and search makeup tutorial

Choosing online
ACTION Browse tutorial Choose a tutorial Watch tutorial
website for tutorial

Tasks Tasks Tasks Tasks

A. search a makeup A. Browse the website A. Choose a specific A. learnt about new
TASK LIST tutorial website for makeup tutorial skin tone tutorial skills
B. choose a website B. search for beginners B. got to know about
that has desired makeup tutorial products used.
makeup tutorial

User emotions User emotions User emotions User emotions

FEELING ADJECTIVE Excited to learn new Overwhelmed with so Relieved to find Eager to try new skills
skill many options matching skin tone Nervous about the
tutorial products to buy

Area to improve Area to improve Area to improve Area to improve

IMPROVEMENT Create an website for Add easy to use clear Provide on option for Add products
OPPORTUNITIES makeup tutorial with an filters, Improve makeup tutorials for specifications and
excited homepage information architecture specific skin tone reviews used in tutorial
 ● Sitemap
Starting ● Paper wireframes

the design ● Digital wireframes

● Low-fidelity prototype
● Usability studies
Sitemap

Difficulty with website navigation was a

primary pain point for users, so I used
that knowledge to create a sitemap.

My goal here was to make strategic

information architecture decisions that
would improve overall website
navigation. The structure I chose was
designed to make things simple and
easy.
Paper wireframes
Taking the time to draft iterations of each
screen of the app on paper ensured that
the elements that made it to digital
frames would be well suited to address
the user pain point.
For the home screen I added search
option in the front and center for user to
locate it easily. I also added an option to
select skin tone color so user can easily
find specific tutorials they are looking for,
help users save time.
Paper wireframe
screen size variation(s)
Because users access the
site on a variety of different
devices, I started to work on
designs for additional
screen sizes to make sure
the site would be fully
responsive.
 Search bar for
users to find
what they’re

Digital wireframes
looking for

Moving from paper to digital

wireframes made it easy to
understand how the redesign
Option to
could help address user pain select skin tone
for specific skin
points and improve the user tone tutorials

experience.

Prioritizing useful button

locations and visual element
placement on the home page
was a key part of my strategy.
Digital wireframes Search bar is front
and centre for user
to easily locate and
find what they are
looking for

Search option was key user

need to address in the
designs in addition to
equipping the app to work
with assistive technologies.
Low-fidelity prototype
To create a low-fidelity prototype, I
connected all of the screens involved in
the primary user flow of searching a
tutorial to finding the products and
reviews.
At this point, I had received feedback on
my designs from members of my team
about things like placement of buttons
and page organization. I made sure to
listen to their feedback, and I
implemented several suggestions in
places that addressed user pain points.
Usability study: parameters

Study type: Location:

Unmoderated usability study United States, remote

Participants: Length:
5 participants 20-30 minutes
Usability study: findings

These were the main findings uncovered by the usability study:

1 2 3
Finding Finding Finding

It was difficult to locate User was not able to see There’s no way or any
see more button under all the products used in other navigation to go
‘related videos’ section video at once. back after we click on
reviews
 Mockups
Refining
●
● High-fidelity prototype
the design ● Accessibility
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow.
Earlier “see more” option was kind of a link which was not quite visible, I made it more prominent
by making it a button.
Before usability study After usability study

Mockup 1 before Mockup 1 after

Mockups
To see all products used in video at once, I made images smaller and information limited so user
can click on product and see the product and details with prices in new window.
Before usability study After usability study

Mockup 2 before Mockup 2 after

Mockups: Original screen size

Main Main
mockup mockup
screen for screen for
display display

Main Main
mockup mockup
screen for screen for
display display
 Mockups: Screen size variations

I included considerations for

additional screen sizes in my
mockups based on my earlier
wireframes. Because users view
from a variety of devices, I felt it
was important to optimize the
browsing experience for a range
of device sizes, such as mobile and
tablet so users have the
smoothest experience possible.
High-fidelity
prototype
My hi-fi prototype followed
the same user flow as the
lo-fi prototype, and
included the design
changes made after the
usability study, as well as
several changes suggested
by members of my team.
https://xd.adobe.com/view/
efe6a07a-bdff-4df0-bc8a-43
c7cd45477e-bab5/
Accessibility considerations
1 2
I used headings with I used landmarks to help
different sized text for users navigate the site,
clear visual hierarchy including users who rely
on assistive technologies
3
I designed the site with alt
text available on each
page for smooth screen
reader access
 ● Takeaways
Going forward ● Next steps
Takeaways
Impact:
Our target users shared that the design was
intuitive to navigate through, more engaging
with the images and videos, and demonstrated
a clear visual hierarchy.
What I learned:
I learned that even a small design change can
have a huge impact on the user experience.
The most important takeaway for me is to
always focus on the real needs of the user
when coming up with design ideas and
solutions.
Next steps

1 2

Conduct follow-up Identify any additional

usability testing on the areas of need and ideate
new website on new features
Let’s connect!

Thank you for your time reviewing my work on the Bon Appetit app! If you’d like to
see more or get in touch, my contact information is provided below.

Email - harneet.heer@gmail.com