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 Role
Strategy
UX/UI Design
My Team
Michael Kaake
Ibtida Hasib
Elijah Hassan
Duration
4 months
Tools
Figma
*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
Mobile
Home
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.
Product
Description
Page
Preview Bag
Creating a seamless shopping experience for Ray-Ban customers.
Desktop
Design System Summary
Color
#82C299
#AC0603
#4665A5
#81817F
#FFFFFF
#231F20
Type
PT Sans
A sleek and modern typeface
Regular
Dela Gothic One
An eye-catching typeface with unique strokes
Bold
Icons
24px
Search
Bag
User
Menu
Close
Plus
Minus
Arrows 1
Arrows 2
Social Media
Buttons
Cards
Layout Grid
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.
Next Project