VISION SELECTOR

A quick two-part gamified quiz that asks simple questions in a fun way that quickly defines the style of frames and the type of lenses users need

Role: UX / UI design and research lead

Timeline: 2 months (4 Sprints)

Tools used: Sketch, Zeplin, Illustrator, Photoshop

Driving traffic to commerce is the main goal at Essilor and helping users find vision care experts, eyeglass frames and lenses in the most efficient way possible is job 1. We initially created a frame selector and later integrated lens section into a fun (gamified) quiz, that asks users tailored questions that help them make quick and accurate decisions about their eye care needs easily.

I designed this at three breakpoints to cover the needs of corporate and our partners, in mobile, tablet and desktop. The addition of simple colors and animations makes this a more engaging experience fro the users, while allowing them to skip sections and move through the flow at their pace.

PROJECT PROCESS

Although this project was not a linear process, for the sake of presenting this case study in logical parts, I’ve broken down our experience/interface process into four primary phases.

RESEARCH

Understanding and refining the data presented was undertaken via competitive analysis, evaluating and analyzing many of the frame and lens selectors already in the market, including our own.

COMPS

Taking cues from others and defining and refining which questions were needed and what was fluff and pulling out extraneous details that slowed an ever growing process flow was the first priority. Once the flow was decided the team worked in sprints and an iterative process that allowed us to push the frame selector portion to market first (quickly), then incorporate the lens portion at a later date. Because of how robust it became, I made the choice to add language and frames to allow users to circumvent frames or lenses to move through the flow quicker. This made for an extremely complex flow for the final prototype.

Single run animations (for most screens) added to the gamification effect of the quiz.

FLOW MAPPING

Traditionally the flow comes before the comps, but we moved so quickly and the original frame selector had so few screens (intentional reduction) that it seemed pointless until reaching the mind melting phase of building a working prototype.

Because of the complexity of allowing users to opt out of sections and continue to others, as well as the delineations between age, frames, lenses and readers, for both male and female and tracking and connecting this in my mind, while being limited to seeing one screen of the prototype at a time was daunting. My solution was to create the entire flow and us (custom) screen codes to help me track through the entire piece and successfully link all of the components.

PROTOTYPE

Many iterations were designed and complexity lead to frustration until I developed the code (as seen in screen thumbnails) allowing me to successfully link every screen and action accordingly.

< Previous Case Study