top of page
(Responsive Web Design)
Makeup Tutorial Project
A Case Study part of Google Certification Course
THE PRODUCT
"Get The Look" is a Makeup Tutorial Website. Which offers its users step by step guide to creating various makeup looks for all occasions. The main target users are 18 to 45 year old female & males with a general interest in makeup.
The Problem
Most online Makeup Tutorial Websites seem to be very cluttered with various other items, this can make it much harder for users to find what ever it is they are looking for. Another problem users found was some sites did not have any options to save their favourite sites which made it difficult when they want to go back & review theses sites.
Project Duration
Feb 2022 - April 2022
My Role
UX Designer (Sole creator of this Responsive Website from start to finish).
Responsibilities
First stage was to empathize with my users followed by generating ideas for design on paper creating wireframes.
I always kept the users front and centre of all design decisions throughout the whole process of creation.
The Goal
Is to design a Responsive Website keeping users needs & frustrations in mind throughout the whole process. The site will solely be for Makeup Tutorials which will be easy for users to navigate through. I will also add options which will enable users to save liked sites.
.jpeg)
EMILY ADAMS
30, A recently qualified nurse. Lives in London with her husband.
"I have a real passion for makeup but being a nurse working in a hospital I tend to only wear face powder. I love trying out new trends when I am at home as I love wearing makeup when I go out. But often find sites to cluttered & I am often having to search through unwanted items to find what I want. When I do find something I like it would be great to be able to save my favourite tutorials so I can go back & revisit them when I want.
Goals
To easily find Makeup Tutorials sites
Be able to save favourite sites
Be able to go back & revisit favourite sites
Frustrations
Not easily finding what she wants
Having to browse through other items
Not being able to save favourite sites
PERSONA
THE RESEARCH
User Research Summary
I conducted user interviews to get a better understand of the target users & what they hope to gain from these sites & what frustrated them. From the information gathered after conducting the interviews I then turned into empathy maps to get a better understanding of users pain points & needs. I discovered that most users tend to view these type pf sites in their spare time or during occasions when they are after a certain look. Most of the time users say that majority of websites on makeup tutorials do not make it easy for users to find what it is they looking for whether it be a look for a night out or for an occasion & users are having to search through the site as nothing is categorized which would makes it harder for users. Another problem they faced was not being able to save their favourite looks.
Empathy Map
ALISA
SAYS
THINKS
DOES
Fashion Student
Looking for Halloween Makeup looks
Easily be able to find find something
Knows what look she's after
FEELS
Happy
Excited
Frustrated
Annoyed
Goes online & searches sites on makeup tutorials
User Research Pain Points
1
NAVIGATION
Makeup Tutorial Websites are often way too cluttered. This can then make it hard for users to navigate through the site.
2
EXPERIENCE
Is not enjoyable for users & not engaging enough & often its too hard for users to find what they are looking for this can then become confusing & frustrating for users.
3
INTERACTION
Not enough interaction features like headed categorized image galleries or options to save favourite views.
IDEATION PROCESS / FINAL DESIGNS
Throughout the ideation process I took on board everything I learnt after conducting interviews with target users. I gained insights into what users hoped to gain from these type of websites to pain points & frustrations they had been facing whilst using various websites. I then made a list of features & icons I wanted to incorporate into my website which would make it easier for users & give them an enjoyable experience. My main focus from start to finish of the ideation to the final design was to design with users needs and problems in mind. At the end of the ideation process of creating various screen designs for the homepage I then selected a few elements I liked from some of the designs & then turned it into the polished version which you can see below in the pictures. I continued this whole process throughout the rest of the screens till I got a polished version.
Desktop - Paper Wireframes for Landing Page - Design Variations
Mobile - Wireframes for Home Screen
2.jpg)
Slide out screen to Navigation Menu
Example of the Dropdown Menu for website
.png)
Desktop - Low - Fidelity Digital Wireframes of various screens within the website.
Desktop - High - Fidelity Digital Wireframes of various screens within the website.
Mobile - Low - Fidelity Digital Wireframes of various screens within the website.
Mobile - High Fidelity Digital Wireframes of various screens within the website.
.png)
Mobile - Screens users used during the usability study.
.png)
TASK SET FOR USERS DURING USABILITY STUDY
(The task I set for users was to select a face makeup look & save the tutorial)
> homepage > tap the hamburger icon at the top > select face makeup > select the 2nd image & tap on read more > save the tutorial > return back to homepage.
.png)
.png)
Prototype
Desktop - Screens to website users used during usability testing.
TASK SET FOR USERS DURING USABILITY STUDY
(This task was to sign up with "GET THE LOOK")
> homepage > signup > create an account (tap to fill in details which have already been entered) > create account > sign out > return to homepage
Prototype
All Screen Designs for Desktop Version
.jpg)
Prototyping Image
bottom of page