Oakley E-commerce


To review and re-design the Oakley website. Key problem areas:

  • Navigation
  • Product browsing, search and filter optimization
  • Effective product information delivery

My role: Team Leader, UX Designer

Size of team: 4 members

Research and Analysis

The initial phase included 3 types of research:

  • Competitor Analysis
  • Observations
  • Tasks and Personas
Tasks for oakley user testing

Analysis Tools:

  • Expert review
  • User testing
  • Interviews

The strengths and pain points were mapped: UI was highly appreciated while UX was found a burden, especially in the PDP and Technology sections.

UX Strategy

Functional approach that focuses on improving the micro-interactions and thereby enhancing the overall experience on the page, be it purchase or information. ( Navigation, hierarchy, product descriptions, make the available information accessible, improve the information presentation on various technologies.)

oakley customer journey

Customer Journey and Emotional Map


Icon system (for mobile):
A visually consistent icon system that will be used throughout the site - navigation, pdps, listing pages etc. Specially useful in the navigation to enable users to learn the symbolism before entering other pages.

  • Use meaningful categories (remove gender categorization).
  • Clear self-explanatory labels with images to reinforce the meaning.
oakley mobile navigation
oakley mobile navigation

Product Listing Page

Modular grid that can accommodate any type of content - product listing and editorial content.

  • Prevent pogo-sticking by providing additional information on the products displayed.
  • Editorial content integerated into the product listings could include information on categories that are not clear, or seasonal communication.
oakley product listing page

Tagging system (PLP)

Tags will be used in the listing page to:

  • Provide at-a-glance understanding.
  • Establish context and usage.
  • An additional tool to filter and sort.
  • Improves search function and prevent pogosticking.
oakley product listing page tagging system

Product Detail Page: Overview

Modular layout that is fluid enough to accommodate any type of content.

  • Fixed right panel with CTA and key information.
  • Tags that provide an overview of usage.
  • Benefit-driven headline for each feature section of the PDP.
  • Interactive content.
  • By default, the top 3 reviews (with specific tags) will be displayed with an option to view more.
oakley product detail page overview

Product Detail Page: Devices

On tablet, the fixed side panel shifts to the top. Rest of the content is resized. On mobile, the CTA remains sticky at the bottom while the rest of the content scrolls.

oakley product detail page devices

Product Detail Page: Flexibility in modules

To show how products with lesser information will be displayed. Also, depicting the compare feature.

oakley product detail page with fewer modules


An innovative page with full screen interactive video/animation that can be used to up-sell and promote new products or for special seasonal communication.

A classic one, with the addition of social media content that will be the default one in case of no special promotions.

oakley classic homepage

Technology Page

Fixed left sub-navigation with labels conveying the benefit of each technology. Most of the existing content is good, hence the focus of this section is the labeling and navigation/accessibility. An added feature is the integration of products within the page.

oakley technology page

Other Projects