UI Design
design system
responsive design
User interface e-commerce website redesign of the skincare brand:
DECIEM's The Ordinary.
Desktop & mobile and design system.
Objectives:
Simplify and minimize categories, emphasize honesty and effectiveness, utilize photography reflecting the brand.
The Ordinary is a skincare brand from DECIEM, focused on advanced functional beauty. The brand was created to celebrate integrity in its most humble and true form.
1. Lack of hierarchy and too many categories
2. Too much seriousness of the science of products / not enough transparent care for customers
3. Overwhelming paragraphs of text
1. De-cluttered, easy, serene navigational experience
2. Highlights product photography, promoting honesty
3. Emphasizes inclusivity of all skin types, caring for all
UI Designer
4 months, 2020
Figma
Dynamic, bold typography and photography based page with a carousel system to maintain minimalism.
Spacious text and inviting photography allows users to feel at ease without the clutter.
The Ordinary is a skincare brand that falls under its parent company Deciem. The Ordinary has transformed the industry by selling clinical ingredients that can be found in expensive skincare at an affordable price.
It focuses on high quality advanced products that perform above and beyond amongst its competitors. The Ordinary is transparent andhonest and names products after their activeingredient. The Ordinary strives to advance their formulas and the technology behind them.
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Geared toward someone who wants to fine tune their skin regimen, or isnew to skincare and does not have too much time in their schedule. | Gender neutral | Invested in affordable high quality products | young adults to middle age |
Blemish free skin and maintaining healthy skin with a long-lasting regimen.
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Minimalistic Aesthetic
Neutral Colors
Gender Neutral
Knowledgeable
Thoughtful
Determined
Aspiring
Caring
Smart
Consumer Friendly
High Quality
Affordable
Makes skincare a priority
Curious and open to trying new products
Wants to know more about skincare
Cares about quality products
Confident
Honest & open
Disruptor in its industry
Clinical ingredients
Natural & vegan
Environmentally friendly
Geared toward someone who wants to fine tune their skin regimen, or is new to skincare and does not have too much time in their schedule.
| Gender neutral | Invested in affordable high quality products | Young adults to middle aged |
Blemish free skin and maintaining healthy skin with a long-lasting regimen.
A regimen that works and is natural with no surprising ingredients.
Skincare products that have long list of unpronounceable ingredients.
Glossier’s home page clearly states their core value, “Skin first. Makeup second.” Their signature pink creates a minimal aesthetic that appeals to young women. The color communicates a casual, non-judgmental, happy tone throughout their website, social media, and products.
The brand emphasizes their philosophy of simple, gentle, and effective. The products and ingredients remain true to their simple aesthetic with consistent, limited pastel colors. The frosty translucent packaging gives a sense of sensuality, cleanliness, and honesty with the ingredients displayed on the front of the products. The UI is organized and user friendly despite the different categories. Can be overwhelming in terms of where to look first if you do not immediately know what you want.
The brand’s color choice emphasizes cleanliness with a youthful approach. The UI design is very approachable and simplistic, yet still keeping a fun aspect with a bold color palette.
Vertical navigation style optimized for mobile view. This is an overlay shop option that slides out from the top left. Defined hierarchy for a user friendly experience.
Dual navigation:
Top left slide out overlay style from the hamburger menu shop options. Expands out for easy reading.
Top center navigation bar overlay style shop options. Expands out by dropping down, keeping a minimal style.
Products open to reveal a carousel of multiple images of the product, opened, used, and on a model. All information of the product are confined into categories that expand with more information upon tapping.
Clean product imagery and nature's minimalism. Multiple images of the product in a collage style. Product details contract and expand for a clean, simple design. Reviews are featured with drop down menu to see more.
Simple, minimal checkout page with more information in categories that drop down to expand more information.
Uniform product page that displays each product clearly and orderly. Filter opens with button options, and Sort By opens in a drop down menu.
Created an easily accessible, visually appealing user interface that showcased the honesty of the Ordinary’s products and values.