Website MD Beauty Mart
About Project
Overview
Our client May, is a licensed and experienced dermatologist in the Philippines with an e-commerce website, MD Beauty Mart, that sells skin care products.
May considered a rebranding for her company with two goals in mind: she wanted to make her website more visually appealing, and wanted to improve the overall user experience by catering products to the visitor’s unique skin care needs. MD Beauty Mart already had tools to offer their customers skin type tests, and personalized skincare reccommendations.
About Project
Problem
1.
Hard to focus on the purpose of this website!
The original website lacked clarity in conveying its purpose to users, making it challenging for them to navigate with a clear focus. The user experience design did not prioritize shopping in a manner expected of an E-commerce website, lacking a structured hierarchy.
The current state of the website exhibits a disorderly and outdated appearance, characterized by unclear button styles and poor text readability.
2.
It doesn’t give any feelings to purchase products!
3.
It doesn’t give any feelings to purchase products!
The readability is compromised by unclear and disorganized links, impacting the overall user experience negatively.
About Project
Solution
1.
Visually appealing UI design
When users come to MD Beauty Mart, they will first see the hero section that shows the store’s main products.
2.
Clear text structure
Text hierarchy has been set by priorities and importance of the messages that are attracted by users so that they can easily focus on the messages to be delivered.
3.
Effortless product search
All the products are categorized by concerns, types prices, etc. Also, users can find product names by alphabetical order and use search with name, feature, and type.
4.
High text readability
If users click the product items, they can see the details of the product. All the information is available on this page with price description and they also can add the product by clicking the CTA buttons ‘Add To Bag’, and ‘Check Out’ to proceed with the payment.
5.
In Skin Box, users learn which type of skin type they have. With images and illustrations, it helps users understand easier and better how to care for their skin and recommend products and medications.
User Research
User Research
To research the trend of online shopping and the frequency of purchasing skincare products, user research has been conducted by implementing a survey.
Expectaion
5.
Supportive graphic design and illustrations.
We realized that the overall feel of the website and the convenience of user approach can affect how long customers use the website, and how many products they might purchase. Additionally, the team determined it would be best to have a feminine themed ambience to MD Beauty Mart’s website. May’s ultimate goal was not only to sell products to consumers, but to also provide suggestions and offer dermatological services such as specialized skincare clinics or massages to improve their skin condition.
User Research
Persona
High-Fidelity Mockup
Main Page
High-Fidelity Mockup
Shop Page
High-Fidelity Mockup
Product Detail Page
High-Fidelity Mockup
Skin Box
Additionally, MD Beauty Mart offers a skin type test called Skin Box. By testing their skin type and current skin problems from Skin Box, customer learn about their skin condition better than ever and find the solutions, most of all, their skincare products that match their skin type.
High-Fidelity Mockup
Mobile
UI Elements
Typography & Colors
With Serif typography using Lora for headings and titles, overall website feelings give tenderness and warmth. By using Jost, which is San-serif typography, adds clarity to text enhancing readability. Modern ambience is an additional feature of Jost.
Lora
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Jost
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
#516869
#516869
#516869
