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.

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

my role

UI Designer


4 months, 2020



key features

Mobile homepage

Dynamic, bold typography and photography based page with a carousel system to maintain minimalism.

desktop homepage

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




Consumer Friendly
High Quality


Makes skincare a priority
Curious and open to trying new products
Wants to know more about skincare

aspirational self image

Cares about quality products

internal culture & values

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.

mario badescu

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.

drunk elephant

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.

sitemap/user flow

Mobile Navigation

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.

desktop navigation

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.

desktop pdp

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.

desktop checkout

Simple, minimal checkout page with more information in categories that drop down to expand more information.

desktop filter & sort by options

Uniform product page that displays each product clearly and orderly. Filter opens with button options, and Sort By opens in a drop down menu.

design system


Created an easily accessible, visually appealing user interface that showcased the honesty of the Ordinary’s products and values.