RAZORPAY'S INTERVIEW TASK

Making 'decision making' over messages easier with polls in WhatsApp.

Role: Product Designer

Timeline: 24 Hours

Platform: App

Getting Started

This was a take-home assignment I did for my internship process at Razorpay around February 2020. The goal of this task was to 'evaluate me on my design skills with a focus on interaction, UI, and product thinking'.

Problem Statement: Imagine, you are a part of WhatsApp’s Design team. The team plans to release a new feature, “Polls” in group chats and you are working on this feature as a Product Designer.

I started by scoping out what use cases to consider as a priority and what scheme to follow as the time was limited.

Use Cases:

  • Creation of poll from scratch.
  • User interactions with the poll.
  • Visibility and sharing of the result.

Design Considerations:

  • WhatsApp for Android i.e material UI.
  • Reusing native components for a consistent UI.
  • Not introducing any visual elements which don't already exist in the current UI.

Research

I realized a great part of this assignment is going to be dependent on my intuitions and individual decision-making skills. In such a case my research was brief and scoped around having a generalized discussion with anyone who is quickly accessible followed by more self-research around the use-cases of the polling feature itself.

User Interview

I interviewed a few folks to verify my assumptions and relevance of what I'll be designing.

  • The target audience was close friends between the age of 18-21.
  • The context of the interview was based on the assumption that all the participants were active users of WhatsApp.
  • The total number of participant for the research were 5.
  • The medium was direct phone calls for a speedy process.

The questions asked to all 5 individuals were the same as above and followed the chronology. I preferred not to ask objective questions or change their order for any individual to avoid getting exclusive answers to exclusive questions. Data wouldn't have been conclusive that way.

Findings:

  • 5/5 signaled WhatsApp to be more of a private texting app for them and pointed its usage to be inclined towards in-formal communication and activities.


  • 3/5 reported individual messages to count for the higher number of text they receive on WhatsApp. Most of their group activities happened on Facebook Messenger due to the lack of proper group engagement features like online games and sticker experience in WhatsApp.


  • 4/5 people preferred text messages as their first mode of communication and all their plans were made on that. To my follow up 'WHY?' question, the answer was the unavailability of people over a call, missed calls due to a silent ringer, people not getting back on a call as missed calls were followed by reverts over text.


  • Plans were proposed as an when it was convenient while confirmations were given by people individually as replies to the question or statement.


  • A chain of replies felt like spam in large groups and often introduced ambiguities when people started responding to earlier messages in the chain. They had to scan and find who didn't give a confirmation or rejection. Phone calls were made to those being absent or ignoring the plan proposal. Presence of an indication of who saw the message gave anxiety to the planner when people didn't respond.


  • Asking them directly if they think a polling feature can solve this problem in WhatsApp, found 3/5 people were actively using polls in Messenger with other group mates deciding on personal meets, dinners, movies, and taking an opinion on a different version of clothes and styles.


  • They stated that it wasn't very conclusive as people mostly voted for more than two options, created a third option introducing a sarcastic choice, or sometimes even initiated two sperate polls based on their interest which prevented people from voting as to not choose any side.
Competitor Analysis

This was done with a single question in mind - "How can polling in other apps be improved and what can I learn from their present state?"


  • Twitter Polls

It gave a time-to-live control over the activeness of the poll after which it closed down and showed results. It was a great thing to control the behavior of an indefinite audience. And had a perfect indication of the time duration itself. Though it didn't allow for changing your poll which I suppose was a step taken from a system design perspective to cut down the number of queries generated if such a large audience starts to change its polls. Might even be a measure against bias.


  • Instagram Polls

It just gave two options to choose from. Lacked the functionality to create a third option. It had the best design to view and share the results.


  • Messenger Polls

It gives the user the ability to expand the poll chat view to a full screen to make changes. Though the constant state change notification whenever someone voted disrupted the conversation flow in the chat.


An optimal solution can be derived with some addition or subtraction to these ideas based on the design and problem around WhatsApp.

Decisions

  • A user can control if other members get to add a choice to the poll or not. This enables or disables the edit option of the poll for other inmates.

  • To keep the polling feature relevant to its meaning, members won't be allowed to vote for more than one option. This applies an invisible filter by letting the human do the work of choosing and articulating his choice before putting a number against it.

  • The default will be to not show the responses to other members but they need control over it. People play safe in times of indecisiveness. By default, each can see a list of members who voted but not what they voted for.

  • The creator can set a 'time-to-live' for the polls but instead of an exact date, it will be a period in terms of days, hours, and minutes. The duration cannot exceed a limit of 7 days. This is necessary to bound the limit of activity and state urgency.

  • Real-time results. This feature ensures everyone is on the same page and knows the direction of the flow of poll. That been said, a real-time result system will again allow users to make an informed choice, which also means they might end up going with the flow. We need control over such behavior hence an option to turn it off will be included.

  • A poll can be called off by deleting the poll message by a long press as a native action for deleting messages in WhatsApp.

Design

I wasn't able to design until the last pixel with such a small duration. Also, WhatsApp doesn't have a public UI kit either hence a lot of elements were redesigned without any design spec.

01


Poll Button


The button placement was done in the 'emoji and GIF menu' to base it as an additional action that can be performed inside of a chat to improve the visual experience just like a sticker or emoji does.


My rationale to place the option there was based on the pattern that any element which was a part of WhatsApp was placed in that toolkit while options like 'gallery' or 'location' were under the 'attachment menu icon' as they brought objects outside of WhatsApp inside of the chat interface.


02


Poll Configuration


The poll button brings up the configuration menu in a bottom sheet which is used to do the necessary tasks like adding a title, adding/deleting choices, and adding a duration.

Besides switches to control the visibility of all responses, the authority to edit the responses by any member who did not start the poll was introduced to give more control over the functionality. Followed by a switch to turn the real-time view on and off.

EDGE CASE: In case the user wants to exclude a certain someone from editing the poll while allowing all others to have control, this can be done by the addition of an extra exclude menu similar to how it works with WhatsApp stories. This wasn't covered in terms of UI due to a lack of time but the idea exists.


03


Creator End View


The poll is shared in a chat bubble to indicate who initiated it and to not disrupt any visual pattern by the introduction of new elements and architecture. This will make the polls look more natural as the user is already equipped with the interface. Title, Choices, TTL provided the bare minimum to represent the functionality of polls.

And the 'edit' and 'view' button on the head would make it possible to re-configure the poll. It was designed to look actionable but not important if not needed by reducing the size and keeping the button state consistent.


04


Member End View


Similar to the 'creator end view'. The edit button would not appear if the switch to "Allow users to make edits" is turned off. If it appears, it will bring in the poll configuration panel for the other members as well which was discussed earlier.


While in an active state, the poll result changes in real-time and is presented by a subtle graph. The numbers of votes made for a particular option are also shown inside the polls.

Real-time view is deactivated for all group members if "Show responses to members" is turned off by the creator. In this case, the result will only be visible the total duration exceeds and the poll comes to an end.


05


Response View


The "View Polls" button to the top right brings in an overlay to display the poll takers similarly as the "Info" option operates for normal messages to view the text delivery and seen status. The data on what an individual polled for is hidden by default and will be displayed if the switch is turned on under the poll configuration menu.


06


Polls Navigation


Considering the edge case of more than 20 polls being created in a group and combining it with the possibility of navigating to polls created in the past without having to search through the entire conversation, the floating top navigation toast was set up to easily indicate when a new poll is initiated to all members while letting them know if they have voted or not.


It works using anchors in an upward direction and will be combined with WhatsApp's downward anchor for "new messages" which appears on upward scroll. A simple swipe right gesture can remove the navigation toast from the chat window.


07


Deleting Polls.


Pretty easy, choose "delete the message for everyone".

Reusability

The same components can be used for creating a) Event Reminders, b) MCQs by reusing components of title, choices, duration, and group settings but having different endpoints to operate in isolation with other features.


Moreover, poll navigation can also help us with pinned messages, announcements, etc. But I could not have designed all that in a day. :/


Similar to slack, '/' commands can be introduced to directly access the poll feature reducing the interaction and time utilized in browsing through the secondary menus.

Wrapping Up

I don't like take-home assignments as they are a lot of work you need to do in ideal conditions, unrealistic timeline, and with no outcome. But they do help me know how I might ship in a real-world scenario the day when production comes down. I never got feedback on this as I moved forward with an offer by Unacademy and had to close all other loops. Made a mistake here for not pushing for feedback but I learned.