Project Scope:
User Research, Chinese branding, Chinese copy writing, Wireframe, Responsive landing page design, Interaction specifications, Technical specifications
Eyeglasses.com China localization and gamification #2
Team:
Chinese user researcher and copy writer, UX designer/Project director, Web designer, Technical director
My role:
As UX and project director, I ensured brand continuity, conducted user research, designed the wireframe, directed the design, and wrote the technical and interaction specifications
Background
The project began with a simple request to design a Chinese 1-page landing screen with the wireframe provided in the brief. We created a design based on the request, but when it was complete I just couldn’t in good faith not recommend a totally different approach. Without budget approval, I went out on a limb and rallied my team.
The challenge
Eyeglassess.com launched in the first wave of online marketplaces and has maintained a very loyal US audience, with a majority in the 50+ age range. We knew that we would need to make a big leap from the US website’s design in order to catch the attention of the highly trendy and savvy Chinese e-commerce world. The two biggest challenges were to find a unique angle and stay true to brand.
User research
As mentioned, user research was not in the original budget, so after conducting competitor analysis and confirming our hypothesis that the eyeglass business in China is extremely competitive, (there is literally a town that makes only eyeglasses in which every mall in the city is filled entirely with eyewear shops) we took to our networks and carried out informal interviews and guerrilla UX research to learn more about potential target markets and what would spark their interest to buy from eyeglasses.com.
The discovery
Insights from our generative research indicated that the demographics in China who seemed the most interested were those who had lived abroad or were in frequent contact with Westerners and interested in US culture. Additionally, the target audience needs to speak English, because though the landing page would be in Chinese, the shopping and purchasing would still take place on the English site (Yes, I did recommend to make full Chinese ecommerce shop).
We came to understand that:
- The user’s journey would likely originate from an ad or because of a friend’s share on a social network, thus we needed to figure out a reason for people to click and share.
- The page itself should be interesting – teach something or utilize gamification- in order to give people a reason to visit even without specifically looking to buy glasses.
- As much information as possible about the products should be provided on this landing page before the user is thrown to the English site for purchase.
Conceptualization
I found a chart on the eyeglasses.com English site that describes different face shapes and what glasses fit well on each face shape. This sparked the inspiration to create an interactive quiz game in which people can “find the right fit for their face” with fun quips about each face shape and lifestyle matches for the glasses shapes.
Branding
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.
Development specifications
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 result
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.