The Ordinary
UI Design
Responsive Web Redesign
solo
Project
User Interface
Responsive Web & Mobile Redesign
My role
Brand research
Brand strategy
Personas
Site Map
Task flows
Wireframing
UI Design
Rapid prototyping
Design system
Duration
October 2020 - December 2020
Tools
Figma
Adobe Illustrator
The Challenge
The Ordinary prides themselves to be a gender-neutral skincare brand they provides affordable quality products for their consumers. The objective is to redesign the website to reflect their minimalist neutral, no fuss personality. The current website is confusing to navigate and overloaded with complicated information. The information is too dense and technical for the consumers to understand.
Insight
The current website is confusing to navigate and overloaded with complicated information. The information is too dense and technical for the consumers to understand.
Solution
To create an easy experience for users, they can explore products by skin concerns or active ingredients.
01.
Discover
Research
User Persona
02.
Define
Proposed Sitemap
Taskflow
Wireframe
03.
Design
Prototype
Design System
Research
The brand’s philosophy is to communicate honesty and transparency in its truest form by naming products after their active ingredients while emphasizing their technical details.
PERSONA
Laura Yang, 20
Laura is a college student with a busy social and professional life.
Needs
To understand her skincare products and know what ingredients goes into them quickly.
Behaviors
Has a set day and night skincare routine.
Follows beauty influencers on social media.
Goals
Prevent wrinkles and skin damage.
Pains
Doesn’t understand complicated technical descriptions, and doesn’t have time or energy to learn.
Worried that they are going to use the wrong products that will hurt their skin.
Proposed SItemap
The current sitemap places ingredients as the top level without allowing consumer shop in different categories.
Task flow
To search a product and add an item to the cart.
UI DESIGN
A design reflects the ordinary’s minimalist neutral, no fuss personality.
LAnding page
Mobile
Desktop
Menu
Desktop
Product Page
Mobile
Desktop
Design System
The design system for The Ordinary’s website.
Foundation
Raleway Typeface
A-Z Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
A-Z Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
A-Z Semibold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
A-Z Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
symbols Regular
@#$%*^≈≠º®©™∞+=⌘⌥⏎⇧
Digits Regular
123456789
punctuation Regular
{}[]()!?.:;,”~-`_
Type scale
Iconography
Standard Icons 24x24
COMPONENTS
Mobile Buttons
Mobile Buttons
Mobile Navigation
Desktop Navigation
Final Thoughts
I learned a lot about the basics of creating a UI design from understanding the users’ contexts and task flows, to creating a design system and UI that matches the Ordinary’s brand.
