Oakley E-commerce
Brief
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
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.)
Customer Journey and Emotional Map
Navigation
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.
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.
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.
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.
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.
Product Detail Page: Flexibility in modules
To show how products with lesser information will be displayed. Also, depicting the compare feature.
Homepage
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.
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.
