Background
This project was a UX/UI project as part of private learning course in summer 2020. The main focus of this project was making a home page for makeup products that is going to be lunch in the UK. This is the first line of Sadaf Beauty products. The founder is known as a beauty influencer and planning to expand her business to sell plant based beauty products.
Role
UX/UI Designer, Brand Designer,
Researcher
Tools
Figma, Photoshop
Context
Conceptual Project
The Solution
Connecting products feels with memory to motivate decision-making.
User can smell, try and feel the products at home so, we would like to bring the feelings and color of the products in reality while the user is not physically feel it. Using clear and concise descriptions - as well as images and information about fragrance notes using simple, vivid words anyone can comprehend, potential shoppers can order the beauty products online with confidence and certainty. Also, strong customer help and support is another factor which help the user to shop easily.
The Challenge
The founder aimed to use her name and pictures as a brand. The goal was selling more so, the challenge was making the homepage more attractive that lead the customers to stay on the page and shop. In other words, how might we help shoppers who are hesitant to buy the beauty products online make a decision confidently and love their choice?
Process
01
Competitive Analysis
User Interviews
Personas
User Journey Map
User Flow
02
Sketches
Wireframes
Style Guide
Branding
High Fidelity Screens
03
Clikable Prototype
Usability Testing
04
Iterations
Research
I interviewed 5 potential beauty shoppers — to learn about their shopping habits, motivations, needs, and frustrations. Here are some of the key insights:
"I didn't know how that beauty product would smell and feel on the skin. I just feel that it should be okay judging from the description and ingredients of how it would make me feel."
01 CLARITY IN PRODUCT DESCRIPTION IS KEY
The problem with buying beauty products online is that shoppers can't smell and feel them through their device's screen. The general feeling was: you have to use it in person to know if it's the right choice.
Users rely on the description to imagine how that product would smell and feel in real life.
02 FAMILIARITY IS ALSO A FACTOR
Beauty users have an opinion on what characteristic they like and don't like on their hair or skin. When making a decision, they usually stick with what they already know and are familiar with. One participant said she had decided to buy her last Moisturazer after spotting Hyaluronic Acid in the list of ingredients.
"Sometimes I don't know which beauty product to buy, I just look at the ingredient details and look for the factors I am interested."
"Last time I bought makeup was
through instagram on my phone.
I normally buy stuff online, most
of the time, around 80% I use my
phone."
03 MOBILE FIRST
For shoppers, social media platforms like Instagram provide an entertaining way to discover new and interesting brands. They would find products there and click on links leading to websites or send direct messages to sellers to make a purchase — all with their smartphone.
Key Takeaway
Beauty and makeup users must be able to identify the color, smell and texture they like . They have a problem of having insufficient information about ingredients, descriptions, and burn times, which leads to a quality issue.
Competitor Analysis
After realizing how crucial descriptions that translate into a clear conseption would be, I conducted more research to find out how other beauty brands describe their products. The patterns gave me more inspiration for how I would lay out information about beauty products later.
In light of the research and competitor analysis, what set Sadaf Beauty apart are the following factors:
01
Color, Fragrance, and texture categories based on common
sector's families like floral, citrus, fruity, fresh, and woody
02
Use of visuals to help trigger the memory of colors, smells, and textures e.g. images of flower for specific color,
images of limes for citrus
scents or images of a drop to show the density and texture.
03
Use of vivid sensory
language, such as Salty, sweet, ocean Air or oak to transfer the feelings.
Define
Meet the users
Based on research insights, I created two personas that represent a potential client: Shani - a business women with a hectic schedule and tight deadlines. Emma - An artist who join lots of artistic events and he spend lots of time shopping for herself.
User Journey Map
To better empathize with the user and have a more complete view of their shopping experience, I visualized a journey map using data from research and interviews. Although I tried to avoid bias, as it was my first time creating a journey map I ended up having to fill in some gaps with my own assumptions about users’ behavior.
Outlining the Structure
Based on observations, I outlined the app’s structure so that customers would easily adjust to the functionality of the product and could find everything they need with minimum effort.
User Flow
I constructed a user flow of what a basic start to finish journey for a user will look like and the ways that the user will interact with the app.
Design
Wireframe and Low-Fidelity Wireframe
Digital Wireframe
Home-page UI Design Process
The first step of my first UI project Most time was spent to select a good pictures of Sadaf. Down the page I choose a casual picture of her to show that the business is family based.
I changed the background color of ..... to make the design looks more light and open space. I also tried to find make up with black and white package so, I can substitute later with the real packages when they arrived.
Here in the process of design I substitute the pictures in down the page with black and white icons in order to make the page lighter and more harmonic.
This the final version of design which foster is organized. some touch of green added to the designed icons and worked on some details in texts, Nav and the rest of page.
UI Kit and Red Lines:
Redline page is not popular anymore since the design applications like Sketches and Figma are developed; however, I was asked to make it as a class project to practice.
Usability Testing
To evaluate my design decisions, I conducted unmoderated usability testing with 5 participants. Test Objectives:
-
To test the app’s ease of navigation, intuitiveness, and whether the users can easily follow the basic workflow of selecting a candle and completing the checkout process.
-
To validate if surfacing more information about the candles helped users make an informed decision.
-
To verify if the participants find the overall idea and the app useful.
Iteration
01 LANDING PAGE DOES NOT INSPIRE USERS TO ACT — I have redesigned the landing page to be more clean, concise, easy to act on.
02 CAROUSELS ARE IGNORED — Content placed inside carousels on product pages was overlooked. It was not clear to users that more content exists offscreen. They only interacted with what they saw on the screen.
Next Steps
-
To conduct another round of Usability testing to make sure pain points encountered by users are effectively addressed.
-
Bookmark items users wish to buy later. (Wishlist Feature)
Key Takeaways
-
Understanding how to analyze and use research data to put myself in the user’s shoes. This let me validate or reject my own assumptions, formulate a strong rationale for decisions and turn feedback into opportunities.
-
Don’t try to reinvent the wheel. It's not always feasible nor practical to create a new component when my justification is just because the UI looks 'nicer’.