Customising Ray-Ban Sunglasses
Designing
With 1000’s of potential combinations Ray-Ban needed users to be able to intuitively progress through their Build Your Own experience.
RESEARCH
Resources
Existing user research covering the Design Your Own process.
Researchers and audiences available to be used for testing new hypotheses.
Challenges
Understanding which customisations were most important to people and at which stage they expected them.
Understanding the best overall layout that would help users visualise the result while feeling part of the process.
Structuring the thousands of options in an experience that still seemed simple.
Increasing conversions, lowering abandoned carts
Step 1 - Frame Selection
In the previous version of the experience frames were selected at the fist stage of a multi-stage form experience. Because the 10 best sellers outsold the rest of the frames by a significant margin. Because these frames were all were iconic, easily recognisable and distinctly individual frames, we experimented with using outlines of these glasses in a full width drop down, allowing most users to begin the experience with the frame selection already taken care of. A variation on this ended up being included in the final design after out performing the button as the beginning of the experience, with more people likely to initiate the experience and less likely to drop-off.
The Single Page Layout
We created several variations of single and multi-page layouts experimenting with menu placement, image size, and fixed vs scrollable full screen, many of these variations were chosen to be A/B tested with users overwhelmingly preferring a fixed full screen single page layout we created the prototype for.
Grouping options
Lens customization is the first step in the process, offering customers the most immediate and noticeable visual impact as the lenses in the preview pair of glasses change as selections are made.
With a wide range of options and a higher level of complexity, lens selection plays a key role. To guide users effectively, we prioritised the selection process, while giving color selectors prominent visual space.
Tooltips were added to ensure these options remained accessible and easy to find. We explored different layouts based on research surveys, card-sorting analysis (both open and closed), and input from multiple teams.
A/B Testing
We worked with Luxottica's team setting up live A/B testing for in total over 1200 variants we participated in the analysis and monitoring of analytics on the live site.
On relaunch Ray-Ban drove a high number of users to the new customisation page, which out performed the old experience's conversion rate from day one.
