The probability of us meeting each other is 0.00487, so......give me a bit more time :)
Skip to content

Traffic Code

How to optimize the service for a ten-second payment experience?
Duration: Nov. 2020–Mar. 2021 @Yunlei Technology
Role: Customer Support & UX Designer
Team: Self-initiated project; work collaboratively with one product manager
As I started working as a customer service staff and also a UX designer in the company, I was bothered by this question:
When I observe users are frequently consulting the problems that are already answered in FAQs, what should I do?
So I initiated to find out what went wrong and what solutions could be implemented using the resources I could manage. Due to the limited timeline and the project’s lack of prioritization, I only implemented part of the solutions and tracked the data for a few months. Although the data in some cities showed the effectiveness of the redesign while others’ was not obvious, I came up with further evaluation plans for next steps.
 
Here are the few key final solutions:
My role: Since it’s a self-initiated project, every step was planned and implemented by me. I collaborated with the product manager to understand the prioritization, resources I could wield, and solutions I could implement within the timeline.

1. Problems observed

Introducing 'Traffic Code'

‘Traffic Code’ WeChat mini program provides passengers with a real-time updated QR code to pay for the bus ride. They open the ‘Traffic Code’, wait for the QR code to appear, and point it at the probe of a customized machine on the bus to complete the payment.
payment process
This process is supported by the collaboration of several business parties.
stakeholder map

Problems observed

At first, my work was to deal with user complaints, answer users’ questions, and analyze transaction data, but the following issues soon emerged:
1. The problems encountered by passengers are similar and always repeated.
2. Answering questions manually is very inefficient and can be untimely.
3. Passengers complain about our product when they encounter problems.
These issues pose a threat to both user experience and the company’s profit because too many user complaints will result in a decrease in reputation as well as an end to the service we provide. But these are only tangible problems on the surface. In order to find out what exactly went wrong, I initiated to iterate the current product.

Iteration process overview

2. What EXACTLY went wrong?

communicate with users, review current service blueprint, keep asking ‘why’ to dig out the causes

Back then, my work covered all the business sectors of ‘Traffic Code’ and I also had access to almost all the portals and channels. Therefore, I was able to view the problem space from a well-rounded perspective.

2.1 Sorting out the business

Note: 'mini program' and 'official account' both belong to the WeChat ecosystem.

User journey

2.2 Communication with users

Communicating with users is an ongoing work throughout the process of analyzing the problems and finding solutions. Up till December, I have reached over 320 users from >5 cities where ‘Traffic Code’ was implemented through 4 channels (the numbers are estimated by the chat and phone call history).
 

→ What problems did they frequently encounter?

Well…problems occurred in every step of the user journey.
(click to enlarge)
Problem categories: (the proportion is roughly estimated)
A. Users receive delayed payment notification after taking the bus
B. How to use ‘Traffic Code’? Why didn’t my QR codes show up?
C. How to participate in a marketing activity?
D. The payment exceeds the correct amount
E. Users receive payment of more than one ride
F. Other
 
The most common complaint is that users received delayed payment notifications (after hours or even days) because the machine was not connected to the Internet as they got on the bus, but they thought they had already paid for the ride.

→ Persona of bus passengers

Communicating with users not only helped me learn the frequently encountered problems but also let me understand the group of ‘bus passengers’ deeper. In order to enhance this understanding, I also chose to commute by bus every day and pay by scanning QR codes, experiencing the user journey as a passenger.

→ Considerations for design

  1. Reputation is crucial for such a product whose users are the majority of the social demographics.
  2. The interaction flow has to be smooth enough to let users feel that they’re capable of mastering the product.
  3. Internet connection is uncontrollable, but design still has its values, such as providing proper and timely feedback

2.3 Dig out the causes: keep asking 'why'

Now it’s time to review the three problems presented at the end of ‘Problems observed’ section.
One emerging finding is that we shouldn’t expect our users, the bus passengers, to figure out how things work by themselves. Therefore, we should straightforwardly, or even abruptly, deliver any information they might need.

2.4 Specify the goal of iteration

With a complete vision of the commonly encountered problems as well as the underlying causes, now it’s time to specify the goals of this iteration project.
User experience level: How might we empower users to find answers efficiently or get timely help when they encounter problems?
Business goal level: How might we reduce the effort of customer service communication and gain users’ trust in the product?

3. Finding solutions

current solutions, market research, constraints & prioritization

3.1 Sorting out the current 'solutions'

Apparently, the current design of ‘Traffic Code’ fails to address most of the root causes discovered previously.
There are some immediate ideas in mind to solve these problems, but are they feasible? What’s the best way to implement them?

Problems, immediate ideas, considerations:

Regarding ‘lacking feedback on payment status’:
  1. Where to show the message?
  2. How long should the message stay on the page?
  3. Is it feasible to grab the data of the payment status at granular levels?
 
Regarding ‘feedforward message indicating that they’ve almost reached the limit’:

The limit (10 times a day) is applied to the entire Wechat payment environment. In order to learn how many times users have reached already, we have to ask for the data from WeChat. Does this concern other service providers’ privacy?

Regarding ‘provide a new entry on the QR code page’:
  1. Will there be too much information?
  2. Given the limited space for homepage features, is this a prioritized need?
 
Regarding ‘lacking onboarding process’:
  1. Is QR code page the best place to introduce it?
  2. Considering the payment process lasts only a few seconds and actions are relatively simple, is an onboarding process even necessary?

These question marks could partly be answered with the help of some market research and communicating with the product manager.

3.2 Market research

What categories of service do customers most likely to have questions about? This is how I selected the products to be studied.
I focused mainly on how they designed the Q&A section and why these features can fit into their products. But not all the features are suitable for ‘Traffic Code’ as well.
  1. The service is completed over a short period of time and users won’t stay in the mini program to explore all the answers;
  2. The user profile of ‘Traffic Code’ suggests that they prefer to be ‘fed’ with solutions instead of exploring or studying them.
What might work for ‘Traffic Code’

1. Separate ‘commonly asked questions’ and major categories of questions: quickly locate the answers;

2. Present ‘commonly asked questions’ and ‘enter keywords to get automatic responses’ on the customer service’s chat interface;

3. Use more images instead of plain text;

4. (optional) Invite users to give feedback on the helpfulness of each answer;

5. (optional) Incentivize users to give feedback by providing certain benefits.

What doesn’t work for ‘Traffic Code’

1. User give feedback based on questions’ categories;

2. Allow users to contribute to answering others’ questions;

3. Users provide the details of the payment order for the system to confirm (1. the order itself is not likely to be incorrect; 2. users are more used to seeking help from the customer service staff)

3.3 Constraints & prioritization (communicate with PM)

I then confirmed the tech constraints and project prioritization with the product manager to determine the feasible solutions I could implement at the time.

→ PAYMENT EXPERIENCE

1. Provide payment status immediately (success / processing / failed).

a. There’s no way to tell the real-time status unless users receive the payment notification indicating ‘success’.

b. It’s hard to define what it means to be a ‘failed’ payment: the time delay is unpredictable.

a. ‘Pretend’ that the system knows the status by showing a ‘payment being processed’ notification first →but the payment notification is generated by ‘WeChat Payment’ which we have no control of.

b. Show a popup notification on the QR code page, e.g. ‘Not receiving payment notifications? The order is being processed, please wait patiently.’ →feasible, but takes up space on the QR page.

2. Notify users that they’ve almost reached the password-free limit.

a. ‘WeChat Payment’ can detect the number of password-free payments on that day. ‘Traffic Code’ is only one service provider using a password-free mechanism→it cannot access the data.

b. ‘WeChat Payment’ should be the one to notify users, and it’s impossible to ask the WeChat side to do so.

c. If a user reaches the limit (10 times/day), there’s nothing he can do but enter passwords next time. However, the payment in ‘Traffic Code’ does not require passwords under any circumstances. So notifying users ahead of time is not helpful at all.

The space left for design in this case is to let users know what has happened and what to do next.

→ Q&A DESIGN

1. Update the layout of the Q&A section.

a. The current layout is already divided into two parts. Changing them into ‘commonly asked questions’ and major categories of questions is feasible.

b. The current chat interface uses the default setting provided by WeChat. Customized features (such as ‘enter keywords to get automatic responses’ & ‘present ‘commonly asked questions’ listed previously) need to be separately purchased and negotiated with the WeChat team.

Re-select the most frequently asked questions; when revising the content, use more images instead of plain text.
2. Provide a new entry to the Q&A section on the QR code page.
current Q&A page and defaulted chat interface
Feasible, but it’s not prioritized.
A popup notification in the corner of the QR code page that leads users to the Q&A section.
3. Automatic reply
As stated above, this is not feasible for the chat interface but can be used in the official account.
Add an automatic reply mechanism to the official account.
4. Introduce an onboarding process on the QR code page
It’s technically feasible but is not practical. Users want to complete the payment as quickly as possible and the onboarding instructions can impede their actions.

Business prioritization

The ultimate purposes of the current entries on the QR code page:
PM: ‘The two major uses for the QR code page: provide the code (should take up the most space to make it detectable), and provide entry points for marketing activities.’ 
The QR code page is the most frequently browsed page, which marks out its role in generating revenue for the company. Therefore, generally speaking, Q&A design is not a prioritized need. But opportunities remain in minor areas as well as the official account (which has the most flexibility among the entire ‘Traffic Code’ service blueprint).

3.4 Feasible solutions

Combining all the insights from current solutions, immediate ideas, market research, as well as the constraints and prioritization of the company, now it’s time to decide what solutions I can implement.

A. 'Traffic Code' mini program

A.1 QR code page: add a popup notification informing users that it may take a while to receive the payment notification; it also provides the link to the Q&A section.
A.2 QR code page: add a clear and actionable reminder when the users can’t receive QR codes because they’ve reached the password-free limit.
A.3 Q&A page: separate ‘commonly asked questions’ and major categories of questions.
A.4 Solution page: allow users to give feedback on whether the solution is helpful or not.

B. WeChat official account

B.1 Backstage: add ‘automatic reply by entering keywords’ mechanism.
B.2 Backstage: guide users to leave non-urgent questions directly backstage or add customer service’s personal WeChat account.
B.3 Prepare a separate Q&A article and put it in the backstage menu for easy access.

4. Implementation & tracking data

4.1 Did the iteration work?

I put forward the reasons for redesign, the research process, as well as the rough prototypes to the product manager using an integrated document, but due to the lack of prioritization of the project (i.e. the company was focusing mainly on marketing activities at this stage), not all the feasible solutions listed above were able to be implemented.
 
In the end, I iterated the current service using A.2, B.1, B.2, B.3. Throughout the next two months, I tracked the data of user complaints and consultation to see how effective the iteration works.
Here I only analyzed the data of the five cities that I was responsible for. During these five months, the data did not show an evident downward trend except for City B’s. But this cannot prove that the iteration has failed. Reasons include:
  1. The total volume of users is constantly changing and new users are more likely to have questions about the service.
  2. There are so many uncontrollable factors throughout the service and some factors lead to more confusion than others.
  3. Mostly importantly, users’ characters are uncontrollable. Communicating with users made me realize that some people are naturally more likely to consult or complain over minor issues than others.

4.2 Next steps

So how to best measure success? Is there really a way to gauge uncontrollable situations?
 
I wasn’t involved in this project after March, so I did not implement any further ideas. But there were two directions on my mind.

A. Quantitative: Track granular analytics data

Because the situations and users’ characters are both uncontrollable, the data cannot be analyzed only from the broad perspective. More granular data should be collected to establish the integral user journey or even profile. For example,
  1. At which point of the process did they consult the customer service staff? What interactions did they complete right before that? (insights: find out the problematic step)
  2. When was their first consultation/complaint since using our service? How frequently do they consult/complain? (insights: try to determine whether the problems occur constantly or on a special occasion; get a vague sense of the user’s character)
  3. The operation history at the backstage of the official account (note: whenever users type in something backstage, we can see the data): which keywords/menu items do they search for most frequently? (insights: find out the problematic step)

B. Qualitative: User interview

The whole iteration process actually did not involve any formal user interviews except for the general communication with them as I was dealing with their problems or complaints. But formal interviews can help to reveal more thoughts behind their choices or confusion. Do they find the solutions helpful? Do they even look for solutions when encountering problems?

5. Thoughts & reflection

This project was a self-initiated iteration process inspired by the problems I observed when communicating with the users as a customer service staff member. Unlike regular projects assigned by the product team, it is different in the way that it has less prioritization at the time and I was the one to decide what to do and who to talk to.

1. Lacking prioritization increases the effort to communicate with and persuade the product manager.

2. The service has many uncontrollable factors, which makes it hard to measure success.

3. The service itself involves the collaboration of multiple business partners, which makes it hard to change the existing structure and the technologies being used.

1. The role of ‘customer service’ is maybe more important than we usually think. To be honest, it was frustrating most of the time because all I heard was their complaints and bad words. But this process also taught me to be patient and more compassionate about other people. I’m glad that I took the job seriously and aspired to improve the current service.

2. Balancing user needs and business needs is hard. In this project, what I did in the end was to implement the solutions that I had more control of, and ensure that the newly introduced elements did not interfere the existing space for marketing needs. But in other cases, the struggles can be more complex.

1. As stated previously, more granular data is needed to determine how well the iteration works.

2. The mental model behind ‘users consult customer service’ may be a good direction of further exploration. Although the users vary from person to person, there should be some commonality in their motivation and expectations, which can lead to more accurate design decisions.

So now looking back at the question ‘How to optimize the service for a ten-second payment experience?’, my answer would be:
  1. Zoom out to see the broad service scope where the experience is embedded in;
  2. Leverage users’ profile to analyze what they need most in that ten seconds;
  3. Be well prepared to present whatever information users might need, but balance the decisions with information overload and business needs.

previous room: Map Your Mind

next room: Journey of an apple