ROKA Custom Eyewear Program Page Redesign
After the introduction of customization options for their eyewear line, ROKA needed a new page demonstrating to customers how to go about choosing their eyewear as well as show how the customization option could be utilized. I saw this page as an opportunity for storytelling, specifically for telling the story in which the customer is at the heart of their own story, and how custom could enable them to tell that story. Focus was placed on simplicity as well as photography demonstrating everyday riders wearing their customized eyewear.
Overview
After the success of the introduction of lifestyle and performance eyewear for the active community, ROKA created a custom program. The custom program allows for customers to choose their own colors for frames and pads, as well as choose from a variety of lenses aimed at improving clarity and visibility in different conditions.
Problem
Custom eyewear parts are building up in the warehouse and need to be moved.
Buried links to the custom program page make it difficult to find, and awareness is low.
Users are not given a clear path or message to utilize ROKA’s custom eyewear program.
Once on a product page, the custom selector is slow and clunky, discouraging users from finishing their custom creation and adding it to the cart. This problem is amplified on mobile. The custom selector is also not inline, and opens a new, identical page, causing confusion.
Objectives
Increase customer awareness of the custom program.
Make the custom program not only easy to use, but encourages users to make their custom creations.
Provide incentive to using the custom program through storytelling and design. Make custom the ideal.
Streamline the custom selector by moving it inline, and incentivize customers to use it over standard colorways.
Challenges
Time: quarterly goals need to be met, and having excess custom parts in the warehouse puts this in jeopardy. Turnaround time is approximately 1.5 months.
Developers are not in-house, and are loaded with many other projects.
Competition from established brands with similar custom products available, like Oakley.
Competitive Analysis
Common themes:
Customer is the hero of the story, not the product
Custom program is featured as an item in the primary navigation on almost all brands reviewed.
Brief introduction of how the custom process works. Opportunity to further sell the program.
Choice for customer to start from “blanks” or pre-designed options for inspiration.
Ability to share designs, be a part of a community.
Mobile Experience
Options for eyewear were presented first in the event that a customer was not interested in the narrative side of the page and wanted to jump straight into creating their custom eyewear. Should they want to further explore, a simple scroll would take them to the narrative section of the page. Photography and text were minimized to create the most efficient experience possible while still emphasizing storytelling rather than product.
Desktop
The information flow of the desktop version is virtually the same as the mobile version, but with the addition of a rollover state for individual products.