Rethinking WeChat’s Translation Functionality

This case study rethinks the current model of translation inside of WeChat, China’s largest digital communications application. The study was conducted through a custom design sprint framework, and consisted of six phases that ultimately informed an alternative solution to WeChat’s existing translation design pattern.

This project was completed within the span of five days as a design exercise.

Product Design / Design Sprint

Design Challenge Brief
Challenge Timeline: Five days

Identify a meaningful problem within an existing digital product of your choosing for the Chinese audience.

Then, reimagine and redesign a solution that showcase your abilities to solve complex design problems.

1 Mapping + Ideation Phase

Customizing a Design Sprint Framework

The challenge assigned was very broad in scope, so I quickly laid a roadmap to allow myself ample time to explore divergently, and iterate on a wide variety of solutions based off of multiple rounds of feedback.

The case study’s process was modeled after the Google Design Sprint Process by Jake Knapp, a design sprint framework that I became familiar with from my previous work at The New York Times.

1 Mapping + Ideation Phase

Brainstorm

I initiated this project with a 30 minute brainstorm/mind-map of initial thoughts, ideas, and directions.

This unstructured flow of consciousness allowed me to rapidly cover lots of different topics, and glean potential project directions.

1 Mapping + Ideation Phase

How might we?

After the brainstorming session, and finding the communication and globalization themes most compelling, I set out to answer some of the questions I started to ask.

“How might we” was a half-hour long exercise expanding upon key concepts that were developed in the brainstorming session

1 Mapping + Ideation Phase

Qualitative Research: User Insight

At this stage of the design process, I conducted a light round of user research to help better inform the direction of finalizing a concrete problem and solving for it.

The interviews were conversational in nature, with me showing my existing exploration and getting their thoughts on what areas seemed more interesting or fruitful to develop a meaningful design solution.

Jerry Wong
“I’m not a native Chinese speaker, but I actually completely stopped using Chinese apps like WeChat because I really just couldn’t understand what was going on. I can speak and understand really well, but reading and writing have always been really difficult to keep up with. For American-born Chinese people like me, it’s hard to connect back to mainland China"

李国宁 Daedalus Li
“Your translate idea is interesting. I think there’s potential for that idea. I have lots of friends that struggle with that at their university because they are from China and their English isn’t that good and need to use Baidu or Google to find certain words.”

After my initial brainstorm, theme search, and user interviews, I decided to focus on WeChat, China’s most used digital communications application, as the foundational base for my work.

1 Mapping + Ideation Phase

Identifying a Problem

WeChat’s current translation functionality is buried in cumbersome, inflexible user interface design patterns: “翻译” functionality is hidden from initial tooltip menu view, and requires multiple steps to access it translated text stays permanently in a message bubble, and users must manually remove them

As more and more Chinese individuals are conducting business internationally, studying abroad, and becoming progressively more globalized, WeChat is doing a disservice to their primary users through poor functionality in an important aspect to their application.

By rethinking this functionality, WeChat could solve for a low-risk, high-yield design opportunity.

2 Sketch + Iteration Phase

Lightning Demos
(Competitor + Market Analysis)

This hour long analysis exercise is focused on studying great solutions from a range of companies, and capturing their main functionality in quick, low-fidelity sketches.

I studied functionality from apps like Baidu Translate, Google Translate, iTranslate, and Microsoft Translate. I quickly noted key features that stood out, keeping in mind the design problem I intended to address.

I also studied other messaging applications such as Kakao Talk, Line, and Facebook Messenger to see their methods in handling translation.

2 Sketch + Iteration Phase

Crazy 8s

This exercise is a core Design Sprint method where participants rapidly sketch eight distinct ideas in eight minutes.

I extended the time to four minutes each for this exercise, as I was working alone, but wanted to explore as many well-thought out design solutions as possible.

From the Crazy 8s exercise, I began to have a concrete idea of the solution I was to build.

Drawing inspiration from the sprint process up until now, I began to shape two strong solutions based off of these rapid sketches from this exercise.

2 Sketch + Iteration Phase

Sketch Prototype #1: Inline Tool Tip Floating Action Button

Feature: An inline floating action button will appear next to the tooltip when highlighting text. Pulling up would translate highlighted text in place. Continuing to pull up further will open a full screen translation.

Keyframes:
1. Highlight text
2. Pull-up to show translated text inline, replacing the highlighted text altogether
3. Continue to pull up to show full screen, detailed translation of original highlighted text
4. Tap off once to exit functionality

2 Sketch + Iteration Phase

Solution #2: Sliding Filter Translator

Feature: A WeChat keyboard activated sliding “filter” that translates text back and forth at the user’s discretion. 

Keyframes: 
1. Activate Sliding Translator from keyboard
2. Translator on-screen ready to be utilized
3. Toggle back and forth between translations with ease
4. Swipe off-screen to exit functionality

3 User Interviews + Critique

Self-Initiated Analysis

Solution #1: Inline Tool Tip Floating Action Button Strengths:

  • innovative solution, and readily available across all pages of WeChat (messaging, moments, etc.)
  • inline tooltip functionality conserves space, and has compelling placement
  • quick usage, and can be used seamlessly during conversations, replies, etc.
Weaknesses:
  • functionality might be too heavy for just a tooltip option?
  • uncommon design pattern requires detailed on-boarding
  • fullscreen solution might be too heavy handed, and doesn’t have clear entry affordances
Analysis:
  • Placement and functionality make a lot of sense for this feature, and users may find this very useful in quick scenarios as well as scenarios requiring more depth as well.
  • It might be worthwhile to explore simpler functionality, or maybe avoid the full screen and opt for a modal instead. 

Solution #2: Sliding Filter Translator
Strengths:

  • Immediately accessible and intuitive
  • Combats app switching to define certain words
  • lightweight functionality for swift usage
  • memorable solution due to prominent placement
Weaknesses:
  • Cannot offer robust translations, only direct visible ones in view
  • Due to placement, functionality is stuck to messaging (can’t use solution in WeChat moments, etc.)
  • Filter translates all text in view, which might not be what users need
Analysis:
  • Very lightweight solution that can be incredibly helpful in very quick scenarios, but lacks an option for robust translations
  • Tap-target for filter needs to be thin, so might be a little inaccessible and difficult to tap
  • Functionality has heavy reliance on interaction design patterns, and may not be immediately clear to inexperienced user



3 User Interviews + Critique Phase

1:1 User Interviews

I conducted two 45-minute user interviews to get to know their 
thoughts on the two prototype solution’s functionality and feedback on my research + explorations.

I hoped to develop a clearer picture on which prototype was a stronger candidate, and observe potential gaps in proposed solutions.

谢本颢 (Kiro Xie)
“I really like the sliding functionality of Solution #2. So innovative!”

“I also like Solution #1, but I don’t know if it needs fullscreen mode. That might be too much. I like it though, very suitable and not as heavy as you think it is.”

“My boyfriend has friends that do a lot of client work in China, and I can see that being really useful for them.”

陈一芃 (Eva Chen)
“I think Solution #1 makes the most sense to me. Solution #2 is a little confusing I think. The swipe from left to right doesn’t read as translation to me.”

“I think in communication apps, messaging is all about speed, so Solution #1 does that much better than #2.”

“For Solution #2, the sliding motion is very innovative and interesting, but too complex for casual users!”

With 谢本颢’s and 陈一芃’s feedback, I decided to finalize Solution #1, and polish it up into a high-fidelity prototype.

They gave really detailed insights into their thoughts on the layout + general functionality, and I edited and tweaked my design solution accordingly.

4 Prototype Solution

WeChat’s Translation Functionality Redesign Prototype

This prototype solution aims to enhance Wechat’s translation functionality by
rethinking its user experience and interaction design.

4 Prototype Solution

Keyframes - Single Tap Translation

4 Prototype Solution

Keyframes - Double Tap Translation

4 Prototype Solution

WeChat Translation Prototype Features

Single Tap Translate Features
This feature allows users to quickly toggle definitions back and forth, for swift usage during messaging communication or browsing text-based content.

Double Tap Translate Features
This feature makes this prototype even more robust, by offering a full screen option for those that are looking for a more detailed translation.

Implementing this solution allows for users to stay in WeChat, and not leave the application entirely to use a third-party translation software to complete a task that could have been completed right in the app itself.

4 Prototype Solution

Use Case Comparison Analysis

WeChat Translation Prototype Solution
This prototype solution offers incredibly fast translation abilities right at your fingertips. Its functionality is geared towards users that have a general sense of the language they are interacting with, but might need confirmation for certain phrases or words.

Additionally, users have an option to double tap the floating action button for a robust, full-screen translation experience. This eliminates the need for users to switch applications for translation functionality altogether.

Current WeChat Translation Functionality
Wechat’s current translation functionality is unwieldy, permanent, and inaccessible. Translations create a completely separate message entirely, and remain in the chat indefinitely.

Additionally, if users need more information regarding a specified translation, they’d have no choice but to leave the WeChat application and resort to another third-party translation service.

This prototype solution attempts to aid Chinese users by making the translation process easier and more accessible.

Transversely, it also potentially equips 
non-Chinese speaking users with a tool to participate in one of the largest digital communications app in the world.

Moving Forwards

The demand for this sort of functionality has been simmering in the background and stifled through usage of third-party translation applications, but WeChat has the platform, capabilities, and resources to solve this issue themselves.

This product identifies incredibly low-hanging fruit for WeChat, as pursuing this solution is highly economical yet very purposeful.

Reflection

The design challenge’s subject matter was really fascinating, and it was refreshing to be able to iterate on designs and conduct research that were both heavily informed by my two cultures.

Bilingual design has always interested me, so this design challenge was quite a rewarding experience for me as a designer!