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
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652ea7286d5dd89f8d147367_Group-617.png)
*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
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652ea783127f6e2c974defce_Vectors-Wrapper.svg)
UI Highlights
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eab7735eda36ef9a7c5d7_Vectors-Wrapper.svg)
The homepage is made more mobile
friendly by making iconic products pop
more, and using dynamic design
elements to invite user interest.
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/6537defa45755408cc1c760e_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/6537df1b79d135f16663f11a_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eac2cb1268125bd6625e6_Vectors-Wrapper.svg)
Product Search
The new style of filters makes the site more visually engaging and easier to browse.
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/6537df4958c0cface8342abe_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/6537df4c2cfe9c905a6f1b10_Vectors-Wrapper.svg)
Preview Bag
Creating a seamless shopping experience for Ray-Ban customers.
Design System Summary
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eacaae20b2cb80a4109ff_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/65330b7c711835f8e2469601_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eacc52437d47ce64bad3f_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eacc84c469062a3eb92c5_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eacc9ba584e1ac03c1d7b_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eaccb6f4a2b8503405fd1_Vectors-Wrapper.svg)
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/65330b7ea207d84054f98d8e_Vectors-Wrapper.svg)
#82C299
#AC0603
#4665A5
#81817F
#FFFFFF
#231F20
PT Sans
A sleek and modern typeface
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/65332a5bb917d3edc2c9555b_Vectors-Wrapper.svg)
Regular
Dela Gothic One
An eye-catching typeface with unique strokes
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/65332a5ca0d428ef9cec1af1_Vectors-Wrapper.svg)
Bold
24px
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eacfd01bce842443fca25_Vectors-Wrapper.svg)
Search
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/653327e8673f76d76cd22cc8_Vectors-Wrapper.svg)
Bag
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/6537d4562a79a274204052ac_Vectors-Wrapper.svg)
User
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652ead0145c532ba6dd3d898_Vectors-Wrapper.svg)
Menu
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/6537d457afc1aa2af0985589_Vectors-Wrapper.svg)
Close
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/6537d457a19db7c7e6520969_Vectors-Wrapper.svg)
Plus
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/653327ebb5e2a320e9c02633_Vectors-Wrapper.svg)
Minus
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652ead08b1887417036d12f3_Vectors-Wrapper.svg)
Social Media
Mobile
4 columns, stretch, 20 margin, 16 gutter
Spacing
Based on 8pt grid
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eaecfd8e65acdbc25d926_Vectors-Wrapper.svg)
Desktop
12 columns, stretch, 64 margin, 16 gutter
![](https://cdn.prod.website-files.com/64bef76e7c60178445a38161/652eaed145c532ba6dd6501a_Vectors-Wrapper.svg)
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.