SPD: Oakley

Analytics revealed that the Oakley website suffered from performance issues in terms of overall navigation, product browsing and search functions, as well as product information. The challenge during the semester, was to re-design the e-commerce website in a way which corrected these problems.

  • Role: UX Researcher/Designer
  • Context: Master's Project
  • Date: January 2017

User Insights

Our group wanted to conduct user testing early in order to identify the strengths and weaknesses behind the existing Oakley website. Even though we completed a thorough web analysis, we wanted to make sure we didn’t overlook common issues for users with varying mental models.

We sought to test a variety of actions throughout the website to give our group a definitive direction and purpose to guide us in our re-design process. Throughout our user testing phase, we conducted tests with individuals that widely varied in terms of athletic backgrounds and mental models.

After conducting our user testing, our group gained valuable insight and gave us many components to improve upon. The main feedback we received from our user testing included:

The majority of the issues that were revealed within our user testing seemed to be related to a lack of understanding of Oakley lens technologies as well as differentiating amongst various products within product listing pages.

After analyzing the feedback from our user testing sessions, our goal was to solve these issues by educating through simplicity. We ultimately sought to produce a solution which focused on:

The Solution

User testing showed many aspects of the website that could have benefitted from some general housekeeping, we sought to apply our solutions to the main components of the Oakley website in terms of purchasing products. This resulted in us largely focusing on the Product Listing and Product Detail pages.

Product Listing Page

During our user testing, clients had a high level of difficulty in assessing products and weren’t sure what product would be correct for their needs without going to individual product pages. Our group attempted to solve this by grouping products together based on Frame Family. All of the variations of products are now displayed on PLP’s within a single product tile. By doing so, we were able to reduce product tiles by 61%.

Comparison Tool

A major issue within the product listing page uncovered by our user testing was the inability to directly compare products. This was a big problem for clients that had multiple products they were interested in, as it required users to “pogo-stick” between pages in order to gather the necessary information to make their decision.

Our group decided to include a comparison tool within the product detail page to provide customers with a quick overview of product details and to quickly differentiate between products.

Product Detail Page

Our user testing revealed a major disconnect between clients and their ability to understand the various types of lens technologies, frame fits, as well as the different lens shapes that Oakley currently offers.

Many of the product variations that clients can choose from are largely dependent on visuals. It’s difficult to convey the different lens technologies through text without having large, technical, blocks of unreadable content. Taking this into consideration, our team decided to apply a very disruptive design approach towards the current product display page.

Oakley Vision Tool

Upon scrolling past the 1st fold, users will be presented with our Oakley Vision tool. Within the tool, there are 4 separate tabs (Lens Technology, Lens Colour, Lens Shape & Frame Fit) each visually demonstrating the various customizable options for each product in real life scenarios.

By having these various lens technologies visually demonstrated to clients, we aimed to improve their decision making process by enhancing their understanding of the lens technologies as well as providing them with a method to compare lens options and overall functionality in real-life scenarios.

Final Takeaways

When designing our Product Detail Page, our group sought to develop a highly visual solution that simplified the decision making process for clients when making purchasing decisions. We aimed to achieve this by better educating clients in regards to Oakley lens technologies, product sizing and fitting as well as improved and simplified product descriptions.

While we were quite disruptive in our final design, we ultimately believe we produced a highly effective Product Display Page that ultimately educates clients through simplification and interactive visual tools.