WAYFAIR
WAYFAIR
WAYFAIR
UI Design System
UI Design System
The Wayfair redesign creates a responsive experience that conveys a colorful and streamlined aesthetic. The new design puts innovative features like augmented related and artifical intelligence at the center of the user experience so that people can envision their future dream home. This redesign situates Wayfair as an industry leader by providing services that are in tune with the modern home owner and apartment dweller.
The Wayfair redesign creates a responsive experience that conveys a colorful and streamlined aesthetic. The new design puts innovative features like augmented related and artifical intelligence at the center of the user experience so that people can envision their future dream home. This redesign situates Wayfair as an industry leader by providing services that are in tune with the modern home owner and apartment dweller.
OVERVIEW
OVERVIEW
MY ROLES
MY ROLES
UX/UI design
Art Direction
UX/UI design
Art Direction
Lizzy Ellis
Lizzy Ellis
MY TEAM
MY TEAM
TOOLS
TOOLS
Figma
Adobe creative suite
Figma
Adobe creative suite
DURATION
4 months, 2024
DURATION
DURATION
16 weeks
16 weeks
PROBLEM
PROBLEM
The Wayfair website and app felt cluttered and out of date, which meant that people did not feel confident making big ticket purchases like furniture.
The Wayfair website and app felt cluttered and out of date, which meant that people did not feel confident making big ticket purchases like furniture.
SOLUTION
SOLUTION
An updated look and feel with cleaner, modern imagery, a larger sans serif typeface, and more whitespace as well as innovative features to help people see the products in their own homes.
An updated look and feel with cleaner, modern imagery, a larger sans serif typeface, and more whitespace as well as innovative features to help people see the products in their own homes.
RESPONSIVE UI
RESPONSIVE
UI
RESPONSIVE UI
PRODUCT PAGE
PRODUCT PAGE
PRODUCT PAGE
Larger images with more prominent reviews and videos made the product pages feel aligned with modern responsive design and made it easier for users to navigate the site.
Larger images with more prominent reviews and videos made the product pages feel aligned with modern responsive design and made it easier for users to navigate the site.
HOME PAGE
HOME PAGE
The home page showcases the art direction for the experience and presents users with a sampling of styles and design ideas.
SHOPPING CART PAGE
SHOPPING CART PAGE
SHOPPING CART PAGE
The shopping cart shows products as cards that show the details of each product.
The shopping cart shows products as cards that show the details of each product.
AR EXPERIENCE
AR EXPERIENCE
The augmented reality feature lets users select items and place them in virtual rooms or in their own homes.
The augmented reality feature lets users select items and place them in virtual rooms or in their own homes.
DARK MODE
DARK MODE
The overall aesthetic is simple, clean, and modern to keep the site feeling sophisticated and refreshed.
The overall aesthetic is simple, clean, and modern to keep the site feeling sophisticated and refreshed.
DESIGN SYSTEM
DESIGN SYSTEM
DESIGN SYSTEM
COLORFUL
COLORFUL
Wayfair leaned too heavily on a single color, so the new design system introduced a more varied palette that is still on brand.
Wayfair leaned too heavily on a single color, so the new design system introduced a more varied palette that is still on brand.
MODERN
MODERN
The Hero
30%
The Creator
80%
CARDS
Karla
BRAND TYPEFACE
BRAND TYPEFACE
ICON SYSTEM
ICON SYSTEM
Velvet violet
#9763A4
Velvet violet
#9763A4
Burnt Cedar
#FF731B
Burnt Cedar
#FF731B
Goldleaf
#FFBE00
Goldleaf
#FFBE00
Roséwood
#F7B3CC
Roséwood
#F7B3CC
Unholster Plum
#CAB3DB
Unholster Plum
#CAB3DB
Greenstone
#A79745
Greenstone
#A79745
Crimson Cabinet
#DC2C2A
Crimson Cabinet
#DC2C2A
TAKEAWAY
TAKEAWAY
TAKEAWAY
Now Wayfair can compete with high end furniture brands as well as more design-forward companies.
LET’S COLLABORATE!
LET’S COLLABORATE!
LET’S COLLABORATE!