My Role
UI Design
Prototyping
Design Systems
My Team
Elijah Hassan
Ibtida Hasib
Claire Jung
Michael Kaake
Duration
4 Months
Tools
Figma
Miro
Adobe CC
The Problem
There is poor visual hierarchy in the site’s navigation.
The current product photography is dull, boring, and not engaging.
The current homepage features an overwhelming amount of content, with no clear sense of hierarchy.
The Solution
The Ray-Ban website will more mobile friendly by making iconic products pop more, and using dynamic branding elements to invite user interest. Sorting products in a different manner than currently done, making the site easier to browse regardless of the format.

01 Wireframing

02 Mobile ui design

Homepage
The new homepage features a simplified flow of information. There is now an organized view of products and offerings. Unnecessary categories were removed to provide a seamless experience while visiting the homepage.
Filters
The new filter options are designed to be easy to navigate. The minimalistic UI of the filter options allow for an easy experience while selecting filters.
Product Page
The new product page features fresh updated product photography. The page flow is simplified to search results. The item name and price are auto-layout for a clean user view. The filters are also condensed in a dropdown menu. The ability to view more items is at the bottom by page number.
Product Detail Page
The new product detail page features a simplified product viewing experience. The page flow is simplified to selected options and customizations . The item name and price are auto-layout for a clean user view. The filters are also condensed in a dropdown menu. The ability to view more items is at the bottom by page number.

03 Desktop ui design

Homepage
The new desktop homepage features a simple reflow of content to fit desktop screens. More content is able to be shown in this UI.
Product Detail Page
The new desktop product detail features a simple reflow of content to fit desktop screens. More content is able to be shown in this UI.

04 ART direction

Design Direction
Old Money
Adjectives
Sophisticated
Wise
Prideful
Intelligent
Archetype
The Lover
The Explorer

05 Design System

Outcomes
We Introduced a simplified e-commerce shopping experience.

We used minimalistic design styles to communicate clear hierarchy.
‍
We showcased an elevated design feel for customer viewing.
Next Steps
Continue to elevate the UI design
‍
Refine Design System
‍
Develop Micro Interactions
BACK TO TOP