M.D Beauty
Freelance project for Dermatologist client
Project Duration
My Role
Client
Tools
Team
Website
Dec 2023 – Feb 2024
UX/UI Designer
Dermatologist
Figma, Illustrator
2 Designers (Jane Choi, Joanne Cho) and 1 Developer (Edward Fernandaz)
Design Thinking Process
Problem
How can we make the dermatologist’s e-commerce website specialized while prioritizing usability?
- Lacks specificity or precision for shop categories
- Needed improvement for usability and accessibility
- Cluttered layout and grayscale call to action button
Solution
Our goal is to create a new e-commerce website characterized by a feature called ‘skin box’ as well as a shop and landing page with a comprehensive design that shows
professionalism and trustworthiness, validated by dermatologists. The purchasing experience will be improved by easily accessible categories, detailed product pages, and skin-box features.
- Improved Visual design to reinforce user actions
- Specialized category sections by M.D recommendation, concerns, and products
High fidelity design ↓
Final Design
01
Landing Page
Top banner:
By using secondary color on
the top with link to the
“Skin Box” connects to the purchase process.
Hero Section :
Selected products from the client are showcased in a carousel style with three products requested by
the client.
Dr. May’s Pick:
The label has been used with icons to distinguish it from “Best Seller” and highlight Dr. May’s recommendations.
02
Best seller
The client would like to showcase only the top 4 best sellers, so we’ve listed them after the hero section.
The product card displays categories related to the product, organized by skin type.
The “Add card” icon was chosen because the card already contains a lot of text, and using an icon helps simplify the design.
03
Shop Page
Navigation Bar:
Received the product inventory sheet from the client and
divided it into three categories with check box.
The ‘M.D. Indication’ page is
the default destination on the
shop where users can explore recommendations from a dermatologist.
Card Design:
The wish list icon with heart
and M.D. Indication products
have been labeled as ‘M.D. Choice’. It’s listed by product name, categories, price, and card icon.
04
Product Detail Page
Product card:
The product card includes the product name, review, short explanation, tags, and price.
Description:
Icons placed next to the subtitle visually indicate the content of the description.
05
Skin Box Result
Result:
It’s shown with skin type picture with skin care regimen.
Product Suggestion:
Products are listed according to
the morning routine, with labels indicating their respective categories. The card style, along with the label positioned outside of the card, is designed for specialization
compared to product card style.
Landing page / banners
Web View
Mobile View
Design Style Guide
Iteration (Card design) ↓
Design A
It’s more developer-friendly UI but lacks clarity in distinguishing individual categories effectively. Additionally, the secondary colour at the top seems to grab attention with other elements on landing page.
Design B
We developed with margin and put different colours to distinguish with each category. But the different tint colours have contrast issue with white text.
Final Design
It’s designed similarly to a card-style layout, with a prominent filled label for ‘May’s Pick’ placed outside of the card, which makes it stand out. Overall, it creates unity on the landing page with two other cards. This style is being used for ‘Skin Box’ as well.
A/B testing ↓
Final Design
Design A
Design B
We conducted A/B user testing for the shop page focusing on the card style.
Design A featured a distinct style for the landing page cards with a prominent
‘Add to Cart’ call-to-action button.
On the other hand, Design B focused on aligning each title for improved readability.
The call-to-action was replaced with an icon, allowing users to access categories
and product information.
Following the testing, users overwhelmingly preferred Design B.
Consequently, we decided to adopt the same card design across the platform
to ensure consistency and enhance user experience,
rather than focusing solely on retaining users.
RESEARCH ↓
Survey goal
- How much they feel comfortable about skin care product by choosing dermatologist?
- Getting user reviews of the top three skincare websites that they’re familiar with,
along with their experiences using those websites. - How do people typically react when a dermatologist recommends skincare products?
Insight from survey
” 70% of people answered that it’s very important for them to buy the products by dermatologist recommended.”
” 75% of people said that recommended by dermatologist makes them buy skincare products online.”
Competitors
What is the most common features they showcase?
Research Findings / Pain Point ↓
01
Skin care categories are crucial for users to find their specific products as well as they are comfortable to filter them.
02
The website must offer user-centric solutions, facilitating easy filtering and selection of products suitable for individual skin concerns and conditions especially on a dermatologist.
03
‘Olive young’ and ‘Sephora’ are global brand so the categories with too much information could make overwhelmed to explore.
Persona
Wireframe
I focused on wireframes to look like e-commerce friendly including these considerations:
- Specific categories for shopping interaction
- Visual hierarchy
- Recommendation to guide products
Takeaways
- I follow an iterative design process where my team and I continuously gather feedback from each other.
Through collaboration, we refine and iterate on our designs to ensure consistency and alignment with the client’s requirements and goals. - Using professional design language is key to supporting my idea when presenting it with a team. Reading design books and magazines would help me boost my knowledge of design terminology.
- Detail your approach to designing the user interface (UI), including layout, color scheme, typography, and visual elements. Explain how you balanced aesthetic appeal with usability and functionality.