We translated the tagline from the English: Clearly Better: Vision + Value to 寻获完美搭配，眼镜正品甄选 which means “Find the perfect match from our selection of authentic glasses” setting the tone to Find the right fit for your face.
With no available VI guideline we made the web design system by utilizing the brand’s colors and modernizing the look & feel with big shapes reminiscent of the shapes of eyeglasses. Pictures were carefully selected to portray fashionable yet not unattainable, Western culture but still for a Chinese consumer.
Wireframe and information architecture
The wireframe was created so that after the user interacts in a quiz-like selection, choosing female/male and face shape. Each face shape is accompanied by a “horoscope-like” characterization that highlights the unique characteristics of the selected face shape and examples of well-known people with the face shape.
The IA challenge
The information architecture was particularly challenging for the second and third screens, which make up the majority of the quiz and active interaction. Working with the UI designer, I defined the hierarchy and layout of the quiz taking into consideration:
- Female/Male is the first selection as all descriptions, images and frame recommendations are dependent on this selection.
- All face shapes should be visible so that the user can visualize them all at once and easily navigate between each (early ideations placed the face shapes in a dropdown menu).
- The first screen of the quiz focuses on the face shapes, giving the user time to “bond” with their face shape and its unique characteristics.
- User need not choose between eyeglasses/sunglasses immediately, as this narrows down the recommendations too quickly. Placing the eyeglasses/sunglasses option with the frame shape gives the user the opportunity to “explore” both eyeglasses and sunglasses in their recommended frame shape.
Once the user makes their selections, the recommended eyeglass shapes are shown. Each glasses’ shape is captioned with a design intro and a “lifestyle” statement that the choice of shape represents.
Users can explore all the glasses in their recommended shape and corresponding collections such as: Celebrity collection, Designer collection, Children’s collection, etc. or shop by brand. In each collection the recommended glasses are shown first, but the user is not limited and can see all other options upon click.
Navigation and interaction
Since the scope of the project is a single page, we put a lot of focus on in-page navigation. The top header consists of anchors, sticky at top, giving the users the choice to directly navigate to: “Glasses for your face shape,” “Frame shapes,” “About us,” “Testimonials,” and “Buy.”
The introduction to the Eyeglasses brand on the landing screen, stating Eyeglasses’ mission to help people find the right fit for their unique face, takes away slightly from the gamification, but because this page must stand alone, we felt it was important to include this for the user in Chinese.
I utilized text to transition between sections of the quiz and to create a cohesive story.
Desktop, mobile design and interaction specifications
Though the design was created desktop first, the majority of users would likely be seeing it for the first time on mobile. We spent extra time on the mobile design to create the feeling of a WeChat mini-program rather than a web page. Emphasis was taken to create of feeling of “playing a game” or “taking the quiz” rather than navigating a web page.
Interactions were created for desktop and mobile to aid in navigation and create a feeling of an all-inclusive experience-though it was only one page, for example making each section an obvious transition, zooming in on eyeglass recommendations and providing navigational cues to indicate where the user is on their journey.
We usually develop projects within our agency, but Eyeglasses.com chose to have their internal development team develop the design. I prepared all interaction and technical specifications as well as a brief on how to create a China-friendly site. Additionally, I prepared a translation of all text so that the English-speaking development team would be able to understand the meaning and functionality.
The Eyeglasses.com CEO was quite happy with the result and paid the entire extra budget ex post facto. Additionally, the internal web design team at eyeglasses.com chose to completely redesign the English site utilizing the updated design system that we created.
I can already predict that it is not an ideal user experience to only create a landing page in Chinese that leads to an English marketplace, I would love to conduct moderated usability testing once the page is developed to further refine the user experience as much as possible given the scope.