uxdesign.cc – User Experience Design — Medium | Sridhar Rajendran

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

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

Persona

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 often than 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 1 — designConcept 1 — interaction

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.

Concept 2 — designConcept 2 — interaction

User testing

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. On clicking it, show a modal window (from concept 2) displaying the audio recording progress. Also provide a cancel button to cancel the audio recording and return to message screen.

Concept version 2.0

I hope this redesign makes audio recording much easier. Share your thoughts in the comments section below.

Disclaimer: I do not work at Whatsapp and this case study is just an exercise for me to improve my design thinking.

If you liked reading this article, please do “Recommend” it. Thanks!

Making audio recording easy on Whatsapp was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.