Making audio recording easy on WhatsApp

UX case study to make recording and sending audio messages easier on WhatsApp
Background

WhatsApp is the default messaging app on my phone and I use it at least a couple of times every day. I like the no-frills UI that lets me get the job done as soon as possible. While I mostly text, I prefer audio messages at times; when I am in a hurry to head out of the door or have to type long messages. But unfortunately, the WhatsApp interface leaves me in a lurch. I need to press and hold the mic button till the recording is complete. There are two issues with it

  1. For long messages it is uncomfortable to hold the button for a long duration.

  2. Recording stops automatically after 10 seconds. Folks at WhatsApp acknowledge this issue and the suggestion is to remove the screen protector. Given the fact that a lot of people do use screen protectors, shouldn’t the design be better to accommodate user behavior?

FAQ on WhatsApp site

Workaround

To avoid getting my messages truncated, I record in 10 second bytes but this gets annoying after a while. Sometimes I record messages using a voice recorder app and then send it on WhatsApp.

Problems

1. In Android app, the mic button has a different background color making it easy to differentiate.

WhatsApp — Android app

But in the iOS app, the mic button is located right next to camera button. It is possible to hit the camera button by mistake.

WhatsApp — iOS app

2. When user is typing only the send button is on the right side but otherwise two buttons are listed on the right side (mic and camera). This contradicts the mental model of the users.

Options while typing a message

Objective

Redesign WhatsApp to make recording and sending audio messages easier.

Competitor analysis

Both FB Messenger and Apple Messages have similar interface and expect users to hold the mic button while recording.

FB Messenger

The mic button is moved to the left and only thumbs up button is on the right.

FB Messenger

Apple Messages

The mic button is on the right and no other buttons are nearby, preventing accidental touches. The less used features are relegated to the left.​

Apple Messages

Apple gets extra brownie points for letting users preview the recording before sending it. Don’t they just think about everything? :)

Preview audio recording in Apple Messages before sending

User research

I checked with a couple of my friends and they found the audio recording feature quite inconvenient to use. An interesting revelation was old parents use voice messages a lot to communicate with their kids. They find typing on mobile screen difficult and also do not know/prefer English. Based on this information I crafted a new persona.

Persona

Prototype

Version 1.0

Concept 1

The mic button is moved to the left to prevent accidental clicking. Display only camera button on the right of the text box as photos are shared more oftenthan audio messages. On clicking the mic, the button turns into a stop button and a prompt message is displayed. The voice recording proceeds and user need not hold the mic button. When done, tap the stop button and the message is sent.

Concept 2

Remove the mic button from the compose message screen and add it under the ‘+’ menu. On selecting “Audio recording”, a modal window is displayed with a stop button and the time elapsed. When done, tap the stop button and the message is sent.

User testing feedback

Both the versions evoked different reactions in users. While version 1 was easy and fast, there was no option to preview the message. Also the chance of accidentally pressing the mic button still persists. Version 2 did not fare well in accessibility. Users found it difficult to find the audio recording option. But they loved the window showing a ‘big stop button’ and the time elapsed. So we have a hung jury.🤔

So why not combine the best of both?

Version 2.0

​Placing the mic near the text box makes it easily accessible. Display a recording progress bar and once recording is complete, provide option to preview the recording before sending.

User testing feedback

  • The audio recording option is easily accessible.

  • Ability to preview recordings allows users to be sure before sending the message.

Key outcomes

A lot of people communicate via audio messaged on WhatsApp and a better support for it would go a long way in increasing user  interaction in the app.