With 1000’s of potential combinations Ray-Ban needed users to be able to intuitively progress through their Build Your Own experience.
Existing thorough user research covering the Design Your Own process.
Researchers and audiences available to be used for testing new hypotheses.
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
In the previous version of the experience frames were selected at the fist stage of a multi-stage form experience. Because there were under 10 best sellers which 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 lower drop-off's.
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.
Lens customisation is the first step, being the stage the customer experiences the biggest immediate visual impact. Lens selection also has the most options and level of complexity, as selecting prescription or polarised will wipe any existing selections.
With this in mind the hierarchy was led by allowing users to make option changing selections first, but keeping the colour selectors to take the most visual real estate, using tooltips to keep them easily accessible, front and center.
We experimented with different layouts calling on research surveys, open and closed card sorting analysis and input from various teams.
On average it took under 2 minutes for users to fully customise a pair of glasses.
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.