Leveraging Wechat User Experience for Customer Loyalty Programs

LEVERAGING
WECHAT USER
EXPERIENCE FOR
CUSTOMER LOYALTY
PROGRAMS
3 1 T E N S O L U T I O N S

2
Being a Wagas patron for quite a few years, I love the
food and the overall value the company provides to its
customers.
Two years ago, they released a customized WeChat
official account. As a regular user of the account and a
design professional, I noticed that there were some areas
that could use improvements in order to simplify and make
the experience more intuitive.
By using them as an example, I wanted to illustrate
key points about how companies can greatly improve
users’ experience by making small, yet meaningful
modifications.
This presentation does not take into account internal
factors such as business criteria, nor does it attempt to
study or map the impact of suggested adjustments.
FOREWORD

3
Wechat: A Key but Increasingly Challenging
Medium for Loyalty
Other features : login, contact us, voucher,
update profile
Consistency in Design and Coding
Main Issues in Wagas’ UI/UX
UX/UI Design
Finding Locations
Taking Wagas from Great to Fantastic
Concluding Notes
Navigation
Key Upgrades
Contact us
Membership program and rewards
5
27
9
7
36
13
6
35
10
8
39
21
TABLE OF CONTENTS

4
Successful loyalty programs are still critical for brand engagement with
affluent middle-class consumers in mainland China, despite a global
decline in memberships.
• Key challenges for brands (Deloitte, 2014)
›› Chinese customers savvier and more volatile than ever
›› Many programs lack a clear vision and strategy
›› Also, fail to leverage the information to enhance their interaction
with customers
›› Combine customer data management from digital channels
›› Customer experiences inconsistent across channels
0%
20%
40%
60%
80%
100%
82% 84%
H O W L O YA L T Y P R O G R A M A F F E C T Y O U R
P U R C H A S E D E C I S I O N
I would pay a little more for a
product from a retailer with a
loyalty program than from a
retailer without one.
I like to use loyalty program
mobile apps that can
automatically earn and use
points or rewards.
86% of Chinese Consumers
say they will buy from a retailer
with a loyalty program over
one without
(Nielsen, Jan 2017)“ ”

5
WECHAT:
A KEY BUT
INCREASINGLY
CHALLENGING
MEDIUM FOR
LOYALTY
Ever increasing competition from brands for the user’s
attention span
›› Brand presence on Wechat has increased much faster
than the general population
›› Increasing sophistication of Wechat brand features
and offerings, greater risk of less savvy brands being
left behind
›› Adopting emerging best practices fast crucial
WeChat mini-sites an excellent but complicated tool
›› WeChat accounts are increasingly more versatile, the
value proposal must stand out as much as possible
›› Complex UI/UX challenges from the heterogenous
browsers and navigation habits across multiple
devices (e.g. Android vs iOS)
O F F I C I A L A C C O U N T S W E C H AT M O N T H L Y A C T I V E U S E R
G L O B A L
Q1 2015 Q2 2016
8M
13M
+60%
Q1 2015 Q2 2016
550M
700M
+30%
*Source : Newrank, Tencent

6
TAKING WAGAS
FROM GREAT TO
FANTASTIC
Why improve Wagas?
• Highly visible foreign-owned F&B brand in China
• One of the first to successfully offer such a sophisticated
consumer experience on Wechat
• Specifically avoided using the native Wechat loyalty
cards, instead built their own system
• The loyalty program seems to be a success, we see
a good 20~30% of customers using their QR code
while purchasing in the store
• But minisite now 2 years old, many new best practices
have emerged since
• Improved UX can further increase consumer retention
and take their Wechat account from great to fantastic
Wagas’ Wechat value proposal
• Locate as easily as possible the brand’s venues and
learn about Wagas’ sub brands
• Loyalty program membership as a fully virtual card.
Tiered based on accumulated points, which can then
be exchanged for F&B items
• Delivery options

7
Assessing the current version, a number of problems
repeatedly cropped up at various points, indicating
themes of incohesive UI/UX execution rather than
random, careless errors.
Problems included, but were not limited to, the following:
• Inefficient user flow
• Icon affordance issues
• Text readability
• Irregular button design
• Homogenous font/congruent font family use
• Coding
MAIN ISSUES IN
WAGAS’ UI/UX

8
A few of the solutions we suggest:
• Reworking in-account navigation to reflect realities of
customer use of brand account
• Updating affordance and icon appearances as per
latest standards and uses that customers are familiar
with and can intuitively grasp
• Enhancing access to features that are most vital to
customers, or the ones that see most activity
• Removing elements and systems that are either difficult
to assimilate or offer a level of distinctiveness without
offering functional value
• Consistent use of fonts and button/icon design
• Improving backend response to irregularities
KEY UPGRADES

9
CONSISTENCY IN DESIGN AND CODING
Essential for design to follow a
particular set of guidelines
Button design usually a good
give-away of underlying unifor-
mity issues
Standardized UI kits go a long
way in achieve cohesiveness,
even with multiple updates and
versions.
SEARCH BAR UI KIT: GOOD PRATICE
BUTTON
VS

11
The user flow is based on vertical naviga-
tion, it is now a best practice to allow as
much cross navigation as possible.
On the WeChat browser, the “back” but-
ton doesn’t actually send you back to the
previous page/screen, but instead takes
you back to the OA homepage.
This creates a situation wherein one needs
to go all the way back to move to another
section of the mini site, e.g. from locations
to membership, causing delays.
N AV I G AT I O N : C U R R E N T U S E R F L O W O F WA G A S ’ W E C H AT M I N I S I T E
Note: All the screenshots in this presentation are from an Android device

12
Download the full resolution
user flow rework
Here, we chose to significantly
improve navigation with
• A “burger menu”
• A back button on top of the
pages that triggers an actual
jump to the previous page
We could have used a bottom
bar instead as it is a more
common navigation standard in
China, but
• There are too many sections,
so it would become crowded
• A side menu is more
evolutive and allows adding
sections in the future
A good use of the bottom bar is
for navigating subsections.
N AV I G AT I O N : N E W U S E R F L O W, M E N U F O R H O R I Z O N TA L N AV I G AT I O N
http://wechatloyalty.31ten.network

14
HINT LABEL
Positioning the unactionable
search hint in the middle
makes it look actionable;
moving it to the left can avoid
giving that impression.
SEARCH LAUNCH
Currently, launching the
search requires clicking the
magnifier icon on Android
devices; the standard today
is to make the search field
actionable with keyboard
validation.
TEXT READABILITY
The bright image background
combined with white font
color makes it hard to read
the text, especially the words
“Wagas” and “Baker &
Spice”.
Not ideal for regular settings,
particularly annoying when
using the phone in bright or
natural lighting conditions.
CURRENT VERSION SUGGESTED IMPROVEMENTS
F I N D I N G L O C AT I O N S
VS

15
SECURITY WARNING
This message can be avoided if the domain from
where the pages are served is whitelisted in
Wechat’s backend
CODING
Since all the action is on the
lower part of the screen when
typing, clicking on the arrow
instead of the search icon is
more convenient; however
the HTML form, not declared
as actionable, disables
validation option on Android
phone keyboards
AUTOCOMPLETE
Integrating this function could
help the user save typing time
and avoid spelling mistakes
“One of the key principles in
human–computer interaction
is recognition over recall: the
notion that people are better
at recognizing things they
have previously experienced
than they are at recalling them
from memory”
CURRENT VERSION
http://uxmag.com/articles/
designing-search-as-you-
type-suggestions?utm_
source=feedburner

16
SUGGESTED IMPROVEMENTS
Locations
displayed as
and when
you type in
the field.

17
ICON
PROMINENCE
The navigation icon is visually
dominating, and the icon
placement too distracting from
the magnifier icon, nudging
the user to click on this instead
IMPROVED
BROWSING
Displaying primary
information (address and sub-
brand) allows room for more
listings
Secondary information such
as opening hours and taxi
directions are placed in sub
pages
Logo of the brand placed here
to help quickly identify sub-
brands
CROPPED
CONTENT
By using a standard block
with no possibility to mold
according to the content, in
some case the text is cropped
VS

18
CURRENT VERSION
With the current navigation the user need to go back to the listing page in order to see an other information related to the location.
Little purpose of having two pages with almost the same content

19
The updated design allows cross navigation without forcing the user to go back to the home page for each tab
Location and subway info now
merged into one page; currently, it
takes the user outside the account
interface to baidu maps, giving a
fractured experience

20
SILOED
NAVIGATION
No direct access to come
back to the store locator
page, forcing the user to close
the page entirely and go back
to the OA chat interface.
UNCLEAR ICON
PURPOSE
Blank button not able to
communicate that you can
view all locations of all sub-
brands.
VS
MAXIMIZED MAP
DISPLAY SIZE
Restaurant logos shifted to the
top with a kinetic scrolling
feature; logo order based
on the number of locations
per sub-brand (same as the
current order)

21
MEMBERSHIP PROGRAM AND REWARDS

22
INFORMATION HIERARCHY
The main function of this page is to have the QR
code scanned to accumulate points
In this layout, the user has to scroll down to fully
reveal the QR, which should actually be on top.
This image is not central to the purpose of the page
For example, the wechat pay screen design put a
much higher emphasis on the main function
M E M B E R S H I P : V I R T U A L C A R D
VS

23
TEXT READABILITY
Contrast between image and
overlaying text an important
consideration.
CLASSIFICATION
Use of metals, silver, gold
levels is more widespread in
China, easier to recall/refer
to. E.g Alipay tier levels
M E M B E R S H I P : P O I N T S
VS
NEEDS A POINT OF
REFERENCE
Graphic elements or color
gauge indicating current
level useful for customers to
judge their brand-related
expenditure and activity.

24
SIZE
OPTIMIZATION
Desirable to keep the size of
button around 35/35px to
avoid error-free tapping on
mobile devices
In the current version, the size
is 14/14px, less than half the
ideal size
M E M B E R S H I P : P O I N T S
VS
TEXT READABILITY

25
AFFORDANCE
The logo seems actionable, but
actually isn’t
This is simply information that
tells the user that this promotion is
available at those specific brands
Also, the solid black icon is a
reference to membership level,
indicating that this offer is valid for
black level and above
TEXT READABILITY
CURRENT VERSION
M E M B E R S H I P : R E WA R D S

26
M E M B E R S H I P : R E WA R D S
NAVIGATION
Can be divided into two steps to simplify
browsing:
Rewards listing
Details of rewards
Also, a filter at the bottom to categorize
the rewards by membership level.
OFFER AVAILABLE
Adding a title in order to clarify the
scope of information and avoid any
misunderstandings

27
OTHER FEATURES :
L O G I N , C O N TA C T U S , V O U C H E R , U P D AT E P R O F I L E

28
AFFORDANCE
Would be more suitable if
icon imagery was that of a
phone or keypad.
OPACITY
Affordance is weakened when
an actionable icon is made
less opaque.
O T H E R F E AT U R E S : L O G I N
VSSPACING
Actionable parts brought close
together aid rapid navigation

29
O T H E R F E AT U R E S : L O G I N
VS
FONT VARIATION
Using complementary styles
for prompts/buttons and field
text looks more polished.

30
O T H E R F E AT U R E S : C O N TA C T U S
VS
IMAGE
AFFORDANCE
A common user behavior is to
tap on the image, but in this
case you need to swipe down
to display the full image.
EMAIL
ACCESSIBILITY
The email is not clickable, so
the user will need to copy and
paste it to send an email or
will have to memorize it.
FACILITATING
NAVIGATION
In order to give a smoother
user experience, the arriving
users have direct access to the
contact details without having
to click on the thumbnails.

31
O T H E R F E AT U R E S : C O N TA C T U S
VS
CHUNKING THE
QUESTIONS
Increasing the space between
different questions will make
it easier for the user to do a
quick scan of the section.

32
TEXT READABILITY
LANGUAGE-
RELEVANT
CONTENT
Instead of displaying bilingual
content, minisite can be
configured to detect browser
language and display
accordingly.
O T H E R F E AT U R E S : V O U C H E R
VS
PICTURE OPACITY
Adding a transparent black
gradient behind the text
increases readability

33
TEXT READABILITY
O T H E R F E AT U R E S : P R O F I L E U P D AT E S
VS
OPACITY
The transparent language
switch button can be made
more prominent.
SHAPE OF THE
BUTTON
Sharpness and text alignment
can be attributed to a CSS
bug.

34
PHRASING
To avoid confusion, it is better
to use words such as repeat/
confirm/re-enter for the
second pin code field.
BUTTON
PLACEMENT
Should be positioned above
verification code field to
reflect correct order of
updating process.
O T H E R F E AT U R E S : P R O F I L E U P D AT E S
VS

35
CONCLUDING NOTES
The average Chinese consumer in 2017 is more sophisticated and
more exposed to the internet and its offerings than ever before; this
has resulted in consumers demanding better solutions and engagement
with brands. WeChat has become a focal point in many marketing
strategies for China, so it’s only natural that firms would want to invest
more time and resources in perfecting the experience they afford their
customers through this platform.
75% report dissatisfaction with companies’ customer service across
channels and more than 70% prefer an uncomplicated loyalty program
enrollment than one requiring assistance from a brand representative
(Deloitte, 2014). Loyalty programs also stand to lose engagement
if they are not simple and easy to understand- for example, point
accrual systems seen difficult to comprehend result in lower usage rates
(Deloitte, 2014).
Molding the design to be flexible, consumer-centric, intuitive and
adaptive can go a long way in empowering consumers and the brand
itself.
Note: All comments mentioned are with the aim of improving Wagas’ official account (OA). The
first ten seconds spent on an interface are crucial- within this time, the user decides whether they
want to stay or exit (2010, Microsoft research).
0
0%
1%
2%
3%
4%
5%
20 40 60 80 100 120
Probabilityofleavingthepagenow
Time visiting the page so far (seconds)

36
OUR UX/UI DESIGN EXPERTISE
An emphasis on quality and a die-hard love for design and technology enables us to deliver efficient
ROI-driven solutions for companies looking to make their mark in China’s saturated digital markets.
COMPANIES WE’VE WORKED WITH
WHAT WE KILL AT:
• UI design, or redesign
• Interface optimization
• Conversion growth
• Business process digitalization
• UX audits & redesign
• Competitive analysis
WHAT WE DON’T DO
(but our partners will):
• Branding & brand storytelling
• Graphic design
• Ads and promotions
• Content-related design
VS

37
VS
REVAMPING SHANGHAI
AIRPORTS’ FREE WIFI
PORTAL
S A M D E C A U X
A C A S E S T U D Y
SITUATION
100 million people went through both Shanghai International
Airports in 2015. A frictionless internet connection is a key
variable in airport ratings. We were commissioned to rede-
sign the outdated free Wi-Fi onboarding portal.
CHALLENGE
The project had to make an arbitrage between user efficiency
/ ease of use and maximization of the advertisement space
for sponsors, which finances the free Wi-Fi in the airports
OUR SOLUTION
SAMDecaux was provided with two fully responsive versions
of the login page to be A/B tested on user samples, to assess
how much sponsor space is acceptable while maintaining a
seamless experience.
The final version chosen after testing is currently receiving 1
million visits a month.

38
VS
IMPROVING A CONSUMER
ONBOARDING WEB
PORTAL
G A C S O F I N C O
A C A S E S T U D Y
SITUATION
As a consumer finance company selling its services through
partners, the easiness of consumer onboarding by the partner
is of primary importance. GAC-Sofinco entrusted us to revamp
the user experience of their most critical application
CHALLENGE
The biggest difficulty was to meet multiple requirements in
parallel :
• Significantly improve the client onboarding process (time
required, user friendliness),
• Turn the app into a central platform for multiple company
stakeholders,
• Add BI capabilities to the platform.
OUR SOLUTION
We profoundly simplified the onboarding flow, eliminating all
the unnecessary steps, making optional steps non-obstructive,
and provided the client with a unified look & feel for all parts
of their application, with a modular system, allowing adding
multiple future capabilities and features.

39
VLADIMIR GARNELE
3 1 T E N PA R T N E R , H E A D O F U X - U I
上海市静安区民立路130号4楼
4F, 130 Min Li Road
200070 Shanghai, China
Download the white paper
Download this rework in full resolution
131 2753 0451
vladimir@31ten.network
Need to design or improve a digital experience?
Liked this piece and want to discuss it further?
Feel free to contact me on :
http://wechatloyalty.31ten.network

Leveraging Wechat User Experience for Customer Loyalty Programs

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Leveraging Wechat User Experience for Customer Loyalty Programs

Similar to Leveraging Wechat User Experience for Customer Loyalty Programs (20)

Recently uploaded

Recently uploaded (20)

Leveraging Wechat User Experience for Customer Loyalty Programs