RAZORPAY'S INTERVIEW TASK
Making 'decision making' over messages easier with polls in WhatsApp.
Role: Product Designer
Timeline: 24 Hours
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.
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.
I interviewed a few folks to verify my assumptions and relevance of what I'll be designing.
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.
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?"
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Pretty easy, choose "delete the message for everyone".
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.
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.