Ray Ban
UX/UI Design
Ray-Ban is an American-Italian brand of luxury sunglasses and eyeglasses. Responsive redesign of their mobile and desktop site.
My Team
Michael Kaake
Ibtida Hasib
Elijah Hassan

*Iconic figure that served as inspiration for the concept.
Challenge
The original Ray-Ban site has poor visual hierarchy in the navigation, boring photography, and an overwhelming amount of content (especially on homepage).
Solution
Redesign the Ray-Ban site to better communicate their personality and content.
Strategy

UI Highlights

The homepage is made more mobile
friendly by making iconic products pop
more, and using dynamic design
elements to invite user interest.



Product Search
The new style of filters makes the site more visually engaging and easier to browse.


Preview Bag
Creating a seamless shopping experience for Ray-Ban customers.
Design System Summary







#82C299
#AC0603
#4665A5
#81817F
#FFFFFF
#231F20
PT Sans
A sleek and modern typeface

Regular
Dela Gothic One
An eye-catching typeface with unique strokes

Bold
24px

Search

Bag

User

Menu

Close

Plus

Minus

Social Media
Mobile
4 columns, stretch, 20 margin, 16 gutter
Spacing
Based on 8pt grid

Desktop
12 columns, stretch, 64 margin, 16 gutter

Takeaway
Final product demonstrates an improved overall look and feel
of the brand with more engaging colors and visuals, improved
flow and hierarchy, and a simplified structure of content.