overview

tags
Interaction Design, VUI, Smart Display
time
Mar 2019 - Jul 2019
team
WeChat Voice Assistant
tools
Sketch, Lucidchart, XMind, Paper & Pen
Most of my work in pure VUI is under NDA. This page introduces the one project I did during my last month at Tencent.

background



Tencent planned to launch a voice-controllable GUI template for APPs on WeChat Smart Display, to solve two key challenges facing this young product.
1. for users
2. for the company

exploration

1. How to position hints?
I categorized key alternatives to help users learn voice queries, based on domain research and competitive analysis. After some  discussions, the team decided to prioritize C, while using B for certain interfaces which required visual simplicity and exclusiveness.
2. How to reduce errors in selection?
Even though users knew correct ways to select elements by voice queries, it was still difficult to avoid errors for voice queries, due to the prevalence of heteronyms and the diversity of accents in Chinese.

Inspired by number overlays used in some other platforms,  we decided to standardize users’ voice selections with numbers.
Comparative Example A: macOS
Comparative Example B: Baidu TV
3. How to lay out elements?
For media applications (e.g. music, videos, podcasts), content should be laid out in a hierarchy. How to let users navigate through content elements grouped under different categories?

instantiation


After deciding on general directions, we decided to design the template by instantiating the concept with two real applications.

I sketched wireframes for both, which proved the voice-controllable GUI template to be applicable to different circumstances.
1. Children’s Songs & Stories
“Baobei Tingting Children’s Songs & Stories” was a Tencent service serving thousands of Chinese children and parents.

We selected this application for two major reasons:
1. Children and parents were important user groups of our smart display.
2. The application included both audio and video content, which made it representative of different types of media applications on the platform.
2. meituan delivery
“Meituan Delivery” was the biggest food delivery platform in China, as well as an important strategic partner of Tencent.

We selected this application as a challenge to validate the applicability and flexibility of the template:
1. It contained intense information (e.g. merchants, items, options for items, price and discounts, orders, etc).
2. It followed complex and rigid flows (e.g. add to cart, checkout, check and edit orders, etc).

reflection


Due to concerns of confidentiality, we didn’t conduct usability tests with prototypes.

It was a shame that my internship ended right after designing these two instances, before I could actually witnessing the template to be implemented on a broader base.

Most of my work during this 4-month internship is still under NDA, but looking backwards, there is still so much learning I can talk about!
1. "why?"
It’s always so easy to lose track of the objective when buried in work. So I learned to remind myself by asking: Why am I doing this? Clarify the objective, then expected result, before thinking about what and how to do.
If the work is for my own reference, then where do I expect to be after this step? Which information should be kept to inform myself later?
If the work is to be viewed by other people, then what do they care about most? Which parts go beyond their existing knowledge? What output do they expect to generate based on the input I provide?

Similarly, when making requests to other people to get inputs for one’s own work, clarify why it’s needed, and what’s expected out of it.
2. "what?"

Explore Alternatives

I tried to be MECE (Mutually Exclusive, Collectively Exhaustive).
To accomplish collective exhaustiveness, it’s important to go divergent at the beginning. Brainstorming should always aim for quantity, and use ideas to inspire more ideas. To get mutual exclusiveness, there should be some methodologies to organize alternatives into a structure, such as a tree.

A tree can be even more helpful when thinking upwards than downwards. When got stuck at some points, think about: what’s its essence at a higher level? What other alternatives can be derived from this essence?




Decide Among Alternatives

Design reasonable criteria for comparison. The most universal dimensions I use are:
Necessity: How much difference does it make?
Feasibility: How much does it cost?
3. "how?"

Time & Scope

For plans: think big, think far. Find the ultimate objective by digging into the deepest level after asking many layers of “WHY”. Then aim for it as the final destination.

For implementation: do small, do quick. Take frequent pauses to reflect and iterate, and to make timely adjustments when going off the course.




Methodology

The way I design is a design itself.
Explore different methodologies in approaching the problem.
Repeat the best methodology for similar problems.
Keep iterating the methodology to optimize it for various scenarios.




Validity

To some degree, a team is like a large program, and members are modules within the program: We all take inputs from others to generate our due outputs. It’s important to improve our process to turn inputs into outputs, while it’s even more important to avoid GIGO (Garbage In, Garbage Out).
Georgia Tech Printing  /  College Mentorship  /  GaTech College of Computing Website
Tencent Internship  /  Research Dashboard  /  Vis Beans