Role: UX/UI

Platform: iOs

Time: 4 days sprint

A new feature on WhatsApp!!

Our users can now understand every message they receive and every message they send in any language by translating it inside the chat - text and audio messages!

Objective

Analyze an already existing and highly adopted WhatsApp and incorporate a new feature into the existing product. The feature will be based on an area of functionality to be explored and compared to user input.

Role

Together with Dayan Evora, we will be covering all the steps from research and user testing to develop and deliver a new feature for the WhatsApp

Tools

  • Figma

  • Adobe XD

  • Miro

  • Maze

  • Marvel

  • Invision

Double Diamond's design thinking process served as my agenda.

Discover

Define

Develop

Deliver

Secondary Research

Before primary research, I wanted to explore WhatsApp's current data and how it provides value to its users. 

Here is what caught my attention:

  • WhatsApp has 1 billion monthly users.

  • Popular in most African countries, South America, Mexico, India, Russia, etc.

  • Only 100MB for file sharing

  • Only phone number using to start chat

  • Security is a vulnerability in WhatsApp.

Business&Costumers

WhatsApp was founded in 2009 by former Yahoo! employees Brian Acton and Jan Koum.

WhatsApp spent ZERO cash on marketing, PR, and user acquisition.

In 2014 the company was sold to Facebook for 19 billion.

WhatsApp is currently behind Messenger in USA, Australia and Europe.

In further research, we will be focusing on customers' pain points they are experiencing while using the app.

Discover

Apps On The Market

After gathering information form our research, we put WhatsApp next to its competitors and noticed certain areas could be an opportunity for further research and design:

  • Hidden chats options

  • Self-destructing messages

  • Editing Messages

  • Translation options

  • Stickers, etc.

Feature Comparison Chart

Feature Comparison Chart

The above analysis helped us create a market positioning chart to visualize WhatsApp's current position.

Considering all missing features, WhatsApp is falling behind other apps, allowing us to think of more ideas and formulate further research questions.

Adding indirect competitors, such as iTranslate and Google translate, help us understand the app's possibilities in the future.

Market Positioning Chart

Market Positioning Chart

Interviews&Surveys

Our survey had 10 questions and was done using google form. Questions were based on users' habits, challenges, and motivations while using messaging apps and WhatsApp.

Survey Statistics

Survey Statistics

We conducted user interviews to get more insights to understand better how our user interacts with the App. The Interview took around 10-15 minutes and included a variety of questions:

  • Why do you use WhatsApp?

  • What do you find most useful on the messaging app?

  • What feature would you like to add to WhatsApp?

  • What would you change in WhatsApp?

  • What other Apps you use and Why?

“All the people that I know are on WhatsApp, and I been using that app for years.“

- D, Florida

“Because it’s easy for my parents to use, It’s quick, and I know if they receive the message or not.”

- C, Cuba

"Sometimes my Foreign business partners are sending me messages via WhatsApp that I need to put in google translate. That is why we all use Viber now."

-T, Serbia

"I would like to have the opportunity to translate my messages in English. It would help with my confidence."

-S, Oregon

Define

Affinity Map

Affinity diagram helped us unify large amounts of data by finding relationships between concepts or ideas. 

We were able to organize facts, opinions from interviews, and diagnose the problem and identify common issues. 

Affinity Map

Affinity Map

After sorting those insights into the affinity map, I distinguished the central values when using WhatsApp.

Gains: Good Audio/Video call — Edit message — Translate message — Protected Data — Larger file transmission.

Pain points: Limited with MB — Can not translate text message — Can not edit a message — Miss audio translating option — Unsecured data.

Users Jobs: To make audio/video calls (stay in touch with family and friends) — Share files ( Photos or anything related to job or school) — Text to other users (in a different language if necessary).


I sort this in:

  • Emotional (calls and chats to communicate with family and friends);

  • Social (create group, share files);

  • Functional (translate, edit messages, share bigger files).

That helped me create a user persona and determine her path within the Journey map.

WhatsApp (16).png

User Persona

After getting all users' insights, I understood who our target user will be, and we created Persona. Creating a Persona will help to design decisions that will please the user's goals and needs.

User Persona

User Persona

Journey Map

To uncover areas of chances, we took our user on the journey, which will help us visualize the steps user takes to accomplish a goal.

We will be exploring each step and search for opportunities to optimized user experience during the process.

XXX.png

Discoveries

From there, I was able to define crucial problems the user is facing and recognized pains gains and think about opportunities:

Pains

  • Can not translate received messages.

  • Our user can not translate messages about to send.

  • Our user can not translate audio messages.

Gains

  • Translate option in WhatsApp

  • Significant language selection

  • To communicate with confidence in a different language

Opportunities

  • Translate messages in the chat

  • Translate audio messages in the chat

  • Edit option

Develop

Ideation

Out of many ideas, and yes, some of them sounded interesting, we were able to accumulate the obvious solution that will give WhatsApp the value and appropriate solution it deserves.

Brainstorming

Brainstorming

Problem Meet Solution

The Minimum Viable Product

A completely free feature in WhatsApp will help our users have an all-in-one experience when they need to translate received messages or translate their messages before sending it.

Jobs to be done

When our user communicates with another person via WhatsApp application in a different language, he wants to translate the message within the App, without reaching for an external tool.

So that all participants in the conversation can understand each other. And that will make them confident and happy.

MoSCoW Method

Prototypes

Lo-Fi

Following the MVP we created sketches and test them in Maze to get first impressions and comments regarding our feature.

Lo-Fi Prototype

Lo-Fi Prototype

Usability Test

After gathering test results and suggestions, we created a mid fi prototype and tested it again with better typography and icons, trying to stay real as for the design in mid-fi.

Mid Fi

After successful testing with the low-fi prototype, we needed to verify it with Mid fidelity prototype. 

We tested our prototype with 4 different users in person.

It helped us with the icon selection for the High-Fi design. 

Usability test’s quantitative data:

  • 4 Users

  • 8 average clicks

  • 42 seconds

Mid Fi

Mid Fi

Usability test’s qualitative data:

  • There was confusion with the translation Icon.

  • The user asked if they should slide or click to translating icon.

Language Icon selection

Language Icon selection

Visual Guide

Whatsapp is a transparent app, and we found a style guide to incorporate into our final design.

Layout, screen, typography, colors were integrated and used to create Hi-Fi Prototype.

Visual Guide

Visual Guide

Hi-Fi

Following the visual guide of Whatsapp's existing design elements, we could refine the feature's quality and improve the user flow steps.

That gave us a more precise direction while creating my Hi-Fi prototype, respecting the design, and stay authentic.

Artboard – 1.png
Artboard – 1.png
Artboard – 7.png
Artboard – 9.png

Learnings

Creating this feature was personal for Dayan and myself, since English is not our first Language.

We studied and worked in English, and we are using it every day to communicate with the people around us.

I believe this helped us develop a solution that had to do with language selection, and we hope it adds extra value to the application.

Next Steps

  • Many great ideas came upon your mind! Always select the one that shows you are empathizing with your users.

  • There are NO bad ideas! Check them all, discuss them, and keep them in mind! Or in Miro.

  • Follow Style Guides when creating a new feature for well known App. Keep it real!

  • And Test, Test, Test!

Medium Article

Previous
Previous

Buddy System - UX/UI & Web Design