Meta Design System
Meta Design is a system optimized for e-commerce.
See the design language. 👇
Meta Design System
GOAL
To design a collection of reusable components guided by principles that can be used to create simple and complex experiences. Optimized for e-commerce, it’s used to build internal and customer facing software, that maintains a consistent visual language across all company platforms.
MY ROLE
I paired with another designer on the design system refresh. I also partnered with our Lead front end developer to oversee quality during the implementation process.
The Problem
When I first started working in the original Meta components library, I found the components difficult to solve complex design problems. The components were large, clunky, and didn’t lend themselves well to products that needed to support forms, and large amounts of data. The library was working against me instead of for me, and I found other designers had similar sentiments. I approached my manager with the idea that refreshing the old design system would give designers the right tools to design interfaces quicker, and would set us up for success when we reached a state in the future to build out portals and tools that supported external customers.
Colors
Neutral Palette
Typography
Type Examples
Buttons
Components
Menus
Before & Afters
The old interface
Updated version includes a collapsible navigation bar, and a clearer action bar.