WhatsApp — Feature Enhancement (Ux Case-study)

We all familiar with WhatsApp, yeah it’s a primary messaging tool for most of us. Though it has diverse user groups(Kids to old & literate to moderate people) still it can be accessible for all of them due to its simplicity. People are not using for personal communication alone but business-related too. However, its use-cases expanding more and more in real-time, the same way the constraints & limitations are also increasing. So now will discuss the specific problems faced by the users

Problem

We all know WhatsApp is the end to end encryption messaging platform(which means even WhatsApp can’t see what we are sharing). But people still feeling unsecured / lacks control in some places. Let’s see the problems faced by the below persona’s

Persona — 1

Ramesh — an indian father who asked to share his daughter’s images for the marriage by the groom’s father Shanil Das. But Ramesh feeling unsecured to share his daughter’s photos because he doesn’t know Shanil Das before as he got to know about him through some matrimony website. Also, Ramesh knows shared images will be saved in the recipient’s mobile so it can be easily edited, manipulated, or misused.

(of course, the sender can use the delete all feature to delete all the images within 1 hour, 8 minutes, and 16 seconds, it will be deleted from the recipient’s mobile. But what if the time crossed or the recipient shared the image with someone before deleted by the sender or save it as a copy, the sender loses his control right?)

Persona 2:

Raja — who plans to sell his house and posted an Ad on Olx, so he was asked to share his property details like Patta, Registration copy & other important details by anonymous buyers. These details are not easy to share with anyone so Raja scares of getting scammed by the buyers (faking documents, misusing)

Sharing images of the house is fine but confidential documents like these are critical to share. Also, the shared files can be viewed by various document viewers so it can be edited, manipulated, or misused easily.

Goals

  • To build trust among our users that their data couldn’t be misused by anyone easily
  • To make them feel more comfortable & convenient with the product
  • To give them more control & access to their data

Solution

After some research finalised, It would be better if we bring the Document viewer feature into the product. Basically, people can share the images & documents in Read-only format, so the recipient can only see the images & files on the WhatsApp server (cloud) cannot save them to their mobile(local) not even take a screenshot of it (similar to banking Apps you can’t take a screenshot of certain screens like account details etc). We can atleast reduce manipulation(Data breach) in this way.

So we are allowing them to share the data in two ways

  • Normal — the general way we are sharing now
  • Read Only — the way we stated above

Challange

  • The biggest challenge is how do we communicate this feature in a simple way without overwhelming the user & maintaining consistency in the product
  • The interaction/flow should be simple & clear and should not complicate with the existing flows & designs much.

Process

To implement any feature on an existing product first we should be aware of or familiar with its existing flows. We can understand this by creating User flow & screens flow. So I created a user journey map & Screen flow for sharing images. There are two ways users can share their images & files on WhatsApp

  • Inside the App (from WhatsApp itself)
  • Outside the App (sharing from other apps or local drive)

So the sharing experience should be consistent on both

User Flow

Creating user flows & screen flows will helps to find out most of the corner cases in the beginning. Also reduces the unwanted iterations while designing

Ideation

Ok, now I understood the context of a problem. It’s time to start generating ideas. I sketched multiple ideas & picked some to evaluate & chose a few to validate.

Popup

I have decided to add a popup/modal in the interaction flow, it will appear once the user selected the images & clicks OK as it grabs their attention at the right time to take a certain decision. Let’s see Variation — 1.

Variation — 1 looks clean & simple also doesn’t complicate with the existing flows. But not clear enough to communicate what each option/function will do. How the user understands what each option will do. Let’s see Variation — 2

Great! Variation— 2 solves the above problem & clearly describes what each function will do. But did people familiar with the “User” Jargan? Not sure!… okay, let’s do one more variation for this…

Variation— 3 We can replace the word “User” with the name of the real person “Recipient”) in this case. It makes it more human also WhatsApp does the same in other places (consistency😜)

First Iteration

Great our primary intention to Share As Read-only feature done… right? hmm not sure… So let’s evaluate some of the corner cases

Corner Cases

  • What if the user selected 10 images wants to share 8 as normal & 2 as read-only at the same time. It’s not possible with our current behavior they have to do these tasks separately
  • Also what if the user forgets the image type they have selected(Read-only or Normal) by busy with filters & captions on the preview screen or due to some interruption. How do they remember here(Preview screen)?
  • How will they identify or differentiate Read-Only vs Normal images on the Preview screen & other places? We should communicate this clearly
  • So it’s better to have some indication for Read-Only vs Normal images and functionality to change the sharing type/mode (Read-only or Normal) for each selected image on the preview screen itself. Let’s look at the below iterations.

On both designs, the text clearly conveys the image type (Read-only or Normal) & the toggle button states its functionality but (i) icon on var 2 will give another layer of clarity if the user taps on it the description will appear on tooltip. So it’s better to go with Variation 2.

Sent Screen

Ok, now we shared the images successfully with our untrusted end users. Great! okay, what if you saw the sent image a week later & forget it’s shared type(Read-Only or Normal),😳 you may get a little heart attack if its very important/close to you. How will the user distinguish Read-only vs Normal images in the chat screen later, so yet to find an optimum solution for this? we should differentiate this in some way

What about adding an icon on top of the image, now user can easily distinguish the image type (Read-Only or Normal) after sent as well

Reiteration of Preview screen

I’m still not convenient with this solution😐

  • Toggle function lacks its accessibility… to touch the left corner of the mobile is a little hard
  • And the text & toggle button both takes more emphasis than other elements on the screen like filters, caption, emojis actually that’s what the page is really designed for
  • Also, it’s not visually balanced in the composition which ruins the aesthetics. So let’s do one more iteration for this

Final iteration

😀What about this one it removes all the redundant elements on the screen without compromising its functionality & description.

File Sharing

This follows the same interaction of Images except for one thing Preview screen, WhatsApp doesn’t have a preview screen for files. So we need an inbuilt Document viewer (screen) to view the files inside WhatsApp and should restrict the 3rd party applications, so users can’t open the files using other document viewers🚫.

Final Prototypes

Story by — Hemnath😎… You can find me on Linkedin… Feel free to share your feedbacks & suggestions here…

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store