An Online to Offline New Retail Platform
OVERVIEW
Yonghui Life App/WeChat Mini Program integrates the online and offline businesses of Yonghui Superstores, the fifth largest hypermarket chain operator in China. It provides online shopping and delivery services, online orders can be delivered in 30 minutes within a distance of 3 km from the store. It can also be used as a payment tool under in-store shopping scenarios.
brief
TIME: Feb. 2018 – June 2018 | Shanghai
TEAM: Product Design Team at Yonghui Yunchuang Technology Co.,Ltd.
ROLE: User Experience Design, User research, Data Analysis
TOOL: Axure, Sketch, IBM SPSS
I. OVERVIEW: Company Background
_____________________________
Yonghui Yunchuang Technology is a supply chain and logistics service unit of Chinese fresh produce retailer Yonghui Superstores. The product Yonghui Life is the O2O (online to offline) initiative of Yonghui which integrates different Yonghui businesses including YH Super Species, Yonghui Superstores (Bravo YH) and Yonghui Life (Yonghui Membership Stores).
Business Scope of Yonghui, as of 2017. Data Source: CMS.
Product Background
Target Users
Current YH In-store Customers
People with Online Shopping Habits
Design Goals
Smart Phone
Future Possibilities
User Growth
Repeat Purchase
Key Features
Shopping Online
1. Locate yourself and find the nearest YH store
2. Browse recent promotions and recommended products
3. Easily search and find products in different categories
4. Add products into your shopping cart
Find Online Price
1. Enjoy online only price for certain products
2. Find the weekly best sales in online stores
Have Orders Delivered Home
1. Fill in contact info and address
2. Select a preferred delivery time
3. Pay within the App or pay with third-party tools
4. Confirm your orders
II. MY ROLE: UX Design & Research
_____________________________
I was working as a User Experience Designer at Yonghui Yunchuang Techonology within the product design team, mainly worked on the user experience design of the Yonghui Life App and the Yonghui Life WeChat Mini Program. I also worked directly with product managers and user experience researchers on online/offline user research, data analysis, competitive analysis and usability testing.During my period of stay, I contributed to:
CUSTOMER/USER RESEARCH
· Online questionnaire survey, data analysis and data visualization.
· Creating customer personas and journey maps.
· Presenting our customer research reports to board members, chief technology officers (CTO) and national store managers.
YONGHUI LIFE APP DESIGN
· The launch of a few new features, such as Face Recognition Payment and Customer Service Center.
· Tweaks that make online ordering easier, such as the iteration of the homepage, ordering pages, product details pages, and online coupons system.
· Three times of APP updates, from version 4.3.3 to 4.3.6
YONGHUI LIFE WECHAT MINI PROGRAM DESIGN
· The launch of a few new features of the WeChat Mini Program such as WeChat red packet sharing section.
· Modifying the user flows of the landing page, Gift Card section, WeChat Red Packet sharing section and Personal Payment Code section.
· Three times of Small Program updates, from version 3.4.0 to 3.7.0.
New Features & Refinements
New · Online Customer Service Center
New · Face Pay
Refinement · Personal Recommendations
Refinement · Online Coupons
The numbers of online registered users reached 7 million by the end of June 2018, increased 188% compared to that in the beginning of the year of 2018.
The online customers re-purchase rate reached 40% by the end of June 2018, increased 8% compared to that in the beginning of the year of 2018.
Business Analysis
1. General Challenges
2. Design Goals
User Research
1. Offline Shopping Journey
2. User Personas
Experience Design
1. Wireframes and Low-fi Prototype for New Features
2. Information Architecture for Refinements
Improvement
1.Cross-team Collaborations
III. THE CHALLENGE: Three Current Problems
_____________________________
In today’s consumer-driven arena, many traditional retailers, Yonghui included, are actively transforming to cater to the needs of modern consumers. Yonghui needs to understand the essence of transformation in the “New Retail” era and intends to encourage its customers to order online and/or to pay with the APP in stores. In this case, from the perspective of UX designers, we’re facing the following challenges:
YONGHUI MEMBERSHIP STORES
“Fresh + Convenience” innovative stores providing fresh food as well as groceries, targeting office workers and students.
YONGHUI SUPERSTORES
Traditional supermarkets or hypermarkets targeting mid to high-end income group.
YONGHUI SUPER SPECIES
Pioneer in operating a new and innovative format which focuses on catering services and fresh food offerings.
I. INTEGRATING MULTIPLE YONGHUI BUSINESSES
Yonghui Life APP and WeChat Mini Program are designed for the online shopping and offline payment for YH Super Species, YH Membership Store (Yonghui Life Store) and Bravo YH.
II. DESIGN FOR PEOPLE WITHOUT ONLINE SHOPPING HABITS
Among our in stores customers, about 42% of them are over 50 years old; however, only 8% of online users of the App are over their 50s according to the data we collected on Jan. 2018. As the O2O platform of a company whose sales value mainly come from offline stores, we cannot ignore the discrepancy.
III. DESIGN FOR ATTRACTING NEW USERS
We have strong competitors such as Hema Xiansheng ( launched by Alibaba) and JD Daojia (Launched by JD), which are more experienced with innovative retail service.
IV. APPROACHING THE PROBLEMS: Three Questions to be Answered in User Researches
_____________________________
I. How to make the App adaptable for different Yonghui Businesses?
II. How to make our design friendly to people without online shopping/paying habits?
III. How to increase the user growth rate of our App?
I. UNDERSTAND THE CORE CUSTOMER OF EACH BUSINESS
In order to create better design for various businesses in Yonghui, we should have a better understanding of the core customers of each business, including the age, gender, job, income, shopping habits, preferred products , etc.
It can help design team as well as our marketing team to delivery a better experience design or to have a better stocking management & product selecting plans for each business.
II. CARE ABOUT THIER OFFLINE SHOPPING EXPERIENCES & IMPROVE ONLINE USER EXPERIENCE
For those people who don’t have online shopping habits, we need to focus more on their offline shopping experiences. In order to figure out when is the best time and what is the best way to promote the APP payment, we should pay more attention to their shopping journey. Besides, it is also necessary to build a friendly online service center to help them when they are lost in the App.
III. FIND A BETTER WAY TO PROMOTE OUR PRODUCT
For people with online shopping habits, the usability of the APP matters. On one hand, we need to improve the user experience and provide a more convenient service to recent current users; on the other hand, we should consider in App promotions and coupons to attract new users, and we could also think about the sharing session among WeChat and other social media platform of the App.
V. RESEARCH: In-store Shopping Journey and Online Shopping Core Customers
_____________________________
I. Potential Users In-store Shopping Journey Map — When to introduce the App?
Research Period: Feb. 3. 2018 – Feb. 12. 2018
I. NEW CUSTOMER INTERVIEW
7 people who never been to any of the Yonghui stores were invited to shop in-store and were interviewed after shopping.
II. PROFESSIONAL EVALUATION:
7 people from the related area, including user researchers, product managers and designers were invited to shop in-store and were interviewed after shopping.
III. QUESTIONNAIRE SURVEY
9821 copies of the response to our online/offline questionnaires were collected, 6986 responds from current Yonghui Life users and 553 invalid responds were cleaned. The actual sample size is 2036.
Journey Map of Potential/New APP Users
WHAT WE FOUND FROM THE JOURNEY MAP
I. About 80% of APP new users didn’t download our APP until the in-store payment phase.
II. It takes a salesman at least 5 minutes to introduce the APP to one customer.
III. Customers are confused by the overlapping services provided by our online shopping system and in-store payment system.
HOW TO IMPROVE — DESIGN OPPORTUNITIES
I. Moving the in-store APP introducing phase forward, better to when customers entering the stores. Optimizing the online sharing and recommendation system.
II. Friendly QR code flyers and posters are needed to help salesman.
III. Redesign the online shopping experience, and in-store payment interface.
II. Online Customer Personas — Who is our core customer in each business?
Research Period: Feb. 28. 2018 – March. 12. 2018
I. QUESTIONNAIRE SURVEY:
All 9800 copies of the response to our online questionnaires were collected, 253 invalid responds were cleaned. The actual sample size is 9547. (Feb. 28 — Mar. 4)
II. DATA ANALYSIS:
We processed the data collected from our questionnaire responds in IBM SPSS software mainly with Cross Table Analysis and Cluster Analysis. We tried to create an overall online customer persona represented as core customer for all Yonghui business, as well as personas of each of the main three business in Yonghui: Yonghui Membership Store (also called Yonghui life), Bravo YH and Super Species.
Original Data Collected from Questionnaire Responds Viewed in Microsoft Excel
Data Processing in IBM SPSS
Processed Data Viewed in IBM SPSS
III. DATA VISUALIZATION:
After collecting and processing data, we created charts and diagrams for each of the three Yonghui businesses respectively. Following diagrams demonstrate the gender, age, marriage status, education background, career, income, city, interests, reasons for choosing Yonghui, preferred products, online shopping frequency, online shopping category and in-store shopping frequency of our customers.
YH Membership Store (Yonghui Life)
Bravo YH
YH Super Species
IV. ONLINE CUSTOMER PERSONAS:
We created a general persona as an office lady presented as the core customer of all Yonghui businesses. Retired women and students for YH Life; young moms and rich bachelors for YH Super Species; junior employees, housewives, self-employees and students for Bravo YH.
Journey Map of Potential/New APP Users
VI. OPPORTUNITIES: From Research to Design
_____________________________
I. FOR ONLINE PLATFORM DESIGN
Our team had a better understanding of who we are designing for after the user research.
i. Since not all our users are familiar with online shopping process, and some users reflected that they could not get immediate online support because the service hotline was always busy, so we decided to launch an online customer service center.
ii. According to the personas, we decided to redesign the landing page as well as the categories lists of each different business.
iii. In order to gain new users, we should find a way to encourage current users to share the App/Mini Program with their friends, and improve the online sharing experience.
VII. NEW FEATURE: Experience Design based on Researches
_____________________________
I. Customer Service Center UX Design for the App
I. FIRST ATTEMPT: MEET THE BASIC REQUIREMENTS OF A CUSTOMER SERVICE CENTER
Our users reflected frequently that they could not get help in time since our service call was always busy. At the same time, our customer services team reflected that advisors working in their team had way too many phone calls to answer due to the missing of FAQs pages.
I was in charge of the prototyping of our new Customer Service Center. Basically, what users expect for an online customer center are:
FREQUENT ASKED QUESTIONS (FAQS)
Find answers to their questions directly from the FAQs lists.
Comprehensive but clear classifications of questions for quicker and easier access.
CONTACT INFORMATION
Easy access to service numbers to get help. Possibility to leave messages, including advices, comments or even complaints.
Based on those two needs, I created the first sketch as following to demonstrate the basic wireframes of the Customer Service Center:
* 1. Simplified Chinese is the original working language, contents were translated for demonstration purpose only
* 2. Contents for display purpose only
Wireframe - Customer Service Center
II. OBSERVATIONS: WAY TOO COMPLEX!
After discussions with project managers and UI Designers, new observations came up, and I concluded them into two main points:
First Prototype - Original Simplified Chinese Version
OVERWHELMING TEXTS
In the original simplified Chinese version, the unfriendly homepage made users tired of reading soon and feel confused about where to find the answers to their questions.
First Prototype - Original Simplified Chinese Version
COMPLEX CLASSIFICATIONS
It takes three steps to find a certain answer to one single question hidden in the secondary question lists, which is overwhelmed for users that barely use mobile apps such as elderly people.
III. ITERATION: SIMPLIFY THE STRUCTURE
I made the following changes to the initial wireframes:
· Combine the “FAQs” and “Browse All Help Topics” sections
· Use icons to enhance usability and improve the design of the homepage
· Adjust the navigation when clicked on the “Go back to Last Page” buttons and “Close Page” buttons
Wireframes based on User Behaviors
Users Seeking for Online Support
Have a clear goal, click on the expanders to quickly get to the target information
Major Factors that Matter:
– Understandable interface (icons)
– Questions to be answered (category)
– Clear and concise instructions (answers)
Users Wanting to Talk with Operators
Hope to talk or write messages to someone to get direct support
Major Factors that Matter:
– The alternative supports to provide (contact info)
– Possibilities to improve our services (feedback)
Besides providing support, we also collect feedbacks
As designers, we also care about if we can help to deliver better experiences, so we collaborate with the customer service team to collect feedback data as our future iterations references.
IV. INTERFACE: CURRENT DESIGN DEMO
After finishing this wireframe prototype, I presented it in our iteration meeting to other members in our product design team as well as a few software engineers took part in the launch of the new customer service center.
II. Face Recognition Payments UX Design for the App
We decided to launch the ‘pay with your face’ service in Shanghai first using the latest facial recognition technology. The payment process doesn’t require a smartphone, assuming that the customer has already signed up for our app and enabled facial recognition. A 3D camera located at the point-of-sale scans the customer’s face to verify their identity, while there is a phone number verification option for additional security.
I. HOW IT WORKS: INFORMATION ARCHITECTURE
I was in charge of the prototyping of the design fo the Face Recognition Payments system, which requires users to sign up for our App, set up their facial appearance, enabled facial recognition and authorized face recognition payments.
* 1. Simplified Chinese is the original working language, contents were translated for communication purpose only
* 2. Contents for display purpose only
FacePay - Information Architecture
II. PROTOTYPING: EXPERIENCE FLOW AND WIREFRAMES
FacePay - User Flow
III. INTERFACE: CURRENT DESIGN DEMO
Currently, the Face Recognition Payment does not require the authorization of WeChat anymore since we have our own e-pay and balance management system now. All orders will be paid with balance in Yonghui Life App by default.Image in the right is the current user interface of the homepage of face recognition payments when users set up their appearances and enabled facial recognition. (Homepage – State 3 in the wireframes)Now it was developed and launched successfully in the latest version of our App (Version 4.4.5). Face recognition payment is accepted by certain Yonghui Life stores in Shanghai.
Current FacePay UI Design ( Originally in Chinese)
III. WeChat Red Packet Sharing Section UX Design for the WeChat Mini Program
Based on what we found in user researches, our team found that we could apply promotions to encourage current users to share our App and Mini Program with their friends to gain new users. So we started to modify the online sharing section.
I. FIRST STEP: UNDERSTANDING SHARING SCENARIOS
The red packet sharing section will show up under two situations:· After a user makes a payment.· When a user check the detail of his active orders.When I was working on the prototyping of this feature, I mainly focused on these aspects:
THE USER EXPERIENCE FLOW
I intended to make the interaction to be as intuitive as possible, and somehow be related to WeChat’s red packet sharing process that users are already familiar with.
DISPLAY DETAILS
I paid attention to the way how banners, instructions and QR codes were displayed. I considered about if they were placed in a clear way for both users and my front-end colleagues.
II. PROTOTYPE: AFTER A SUCCESSFUL PAYMENT
When users complete a payment successfully, the WeChat Red Packet Sharing Section will show up.
* 1. Simplified Chinese is the original working language, contents were translated for communication purpose only
* 2. Contents for display purpose only
WeChat Red Packet Sharing Section shows up after a successful payment.
III. PROTOTYPE: WHEN CHECK ACTIVE ORDERS
When users check their active orders , the WeChat Red Packet Sharing Section will show up.
* 1. Simplified Chinese is the original working language, contents were translated for communication purpose only
* 2. Contents for display purpose only
WeChat Red Packet Sharing Section shows up when users are checking their active orders.
VIII. IMPROVEMENT: Cross-team Collaborations
_____________________________
MARKETING TEAM
i. The online App marketing team adjusts marketing strategies for each business according to the personas: for instance, displaying different products on the landing pages of different business formats.
ii. Store managers have better stocking management and product selecting plans based on our in-store journey research. And they also have general ideas about if it is necessary to redesign their store interior environment, train their employees or rethink about their promotion formats.
Research report presented to the marketing team
ENGINEER TEAM
i. We collaborated closely with the engineering team on the launch of each new features. For Customer Service Center, we continued modifying the prototype during the developing process, including that we decided to develop an online chat platform to better help our users. According to their needs, our team also prototype the user interface for this platform. Now it was developed and launched successfully in the latest version of our App (Version 4.4.5).
Online Customer Service Chat
IX. FUTURE POSSIBILITIES:
_____________________________
Visualizations of Delivery Process
Visualize the delivery process by displaying a map, or a timeline bar to show order status (under processing, being picked up, on its way or being delivered) might be a good way to provide customers an estimated time when they can receive their orders. It may ease the concerns customers have during the waiting, and might also increase the customer satisfaction rate, which related closely to the repurchase rate.
Perform More Usability Testings
Due to the quick iteration requirements for a fast-growing company, some of the design decisions were based on designers’ personal working experiences and understanding. Even though we would modify the design quickly once we found imperfect features, it could be much more economically efficient and user-friendly if we could do more few A&B testing with potential users before the developments and launch of new versions.
X. REFLECTION: Collaborating with a Cross-functional Team was Mind-blowing
_____________________________
As a UX designer in Yonghui Yunchuang Technology, it was the first time that I worked on O2O (Offline to Online) product. It was a challenging but exciting journey started from deep and comprehensive user researches to design:
I was interested in observing people of a wide range of ages, and studying their behaviors and different attitudes towards a same product. I struggled with the analysis of near 10,000 copies of data sheets, but at the same time, I also enjoyed all the enlightened moment during the process of creating narratives from those data. I tasted the fun of working in a brilliant team with project managers, user researchers, UX designers and UI designers. I struggled with methods to represent all the information in a clear way when I was prototyping for a new feature, but I learnt a lot during the whole journey.
During the four months, I spent a lot of time working directly with UX Researchers and UX Designer in our team. This experience was unique since:
1. This time I was facing a huge groups of customers aged from 18- to 90+ with various education backgrounds, incomes, living environment, interests, shopping habits, etc. We do not have a specific group of people to be considered as “target users”, which makes the research quite hard. Under this situation, I gained the ability how to narrow the scope and dig deeper into user behaviors study by classifying users according to a certain dimension that the research is focused on.
2. Design a single platform for a large technology company which has several business that similar in services modes but different in marketing strategies is a challenge for me to catch the point where to focus. From this research experience, I learnt the importance of defining and having a comprehensive understanding of core users of each business before jumping into any design solutions.
3. Working with people from diverse fields inspired me a lot in the perspectives of looking at a single product. In order to create designs that make sense under a development environment, I started to teach myself basic coding languages for better communicating with engineers. Besides, I spent more time reading articles related to cognitive science, psychology and sociology, trying to learn more about human behaviors and human society.
Thanks for making it here