Polls to simplify decision making on WhatsApp
24-hour design assignment I pulled off as a part of my internship application process for Razorpay.
Kicking off 🦵
The goal of this task was to 'evaluate my design skills with a focus on interaction, UI, and product thinking'. I was given 24 hours to spend on this.
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.
Getting context 🤔
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 was 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 the relevance of what I'll be designing.
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. 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 choices to choose from. Lacked the functionality to create a third choice. It had a good 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. The in-chat notification whenever someone voted disrupted the conversation flow.
Setting some rules 🚩
The interface 📐
WhatsApp doesn't have an official public UI kit hence a lot of elements were redesigned without any specs. Please bear with me if it is not pixel perfect everywhere.
The button placement was done in the 'emoji and GIF menu'. 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 (like emoji's and gif's) while options like 'gallery' or 'location' were under the 'attachment menu icon' as they brought objects outside of WhatsApp inside of the chat interface.
Tapping the poll button brings up the configuration menu in a bottom sheet.
Besides a switch to control the visibility of all responses, the authority to edit the responses by any member who did not start the poll was added to give more control.
Followed by a switch to turn the real-time view on and off which shall affect the visibility of live stats in the poll.
Creator End View
The poll is shared in a chat bubble to not disrupt the visual memory by the introduction of any new element or layout. This will make the polls look more natural as the user is already aware of the interface. Title, Choices, TTL provided the bare minimum to represent the functionality of polls. The 'edit' and 'view' buttons 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 shown with a subtle graph. The numbers of votes made for a particular option are also shown inside the interface. This 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 when the total duration exceeds and the poll comes to an end.
The 'View Polls' button in the top right brings in a bottom sheet to display the poll takers. The data of what an individual polled for is hidden by default and will be displayed if the switch is turned on under the poll configuration menu.
Navigation Across Polls
Consider the edge case of more than 20 polls being created in a group with the requirement of navigating to polls created in the past without having to search through the entire conversation. The floating navigation toast will help to notify when a new poll is created while letting the members know if they have voted or not. It works using anchors in an upward direction and combines with WhatsApp's downward anchor for "new messages" which appears while scrolling up. A simple swipe right gesture can remove the navigation toast from the chat window.
Long press and choose "delete the message for everyone".
What's reusable? 🥥
The same components can be used for creating a) Event Reminders, b) MCQs by reusing components of title, choices, duration, and group settings. Navigation toast can also help us with pinning messages, announcements, etc. The ideas exist, could not have designed all that in a day. :/
Wrapping up 😪
I don't like take-home assignments as they are a lot of work you need to do for free in ideal conditions, unrealistic timeline, and with no outcome. But you can't say no to these unless you are someone hot in the market and teams would like to have you irrespective of the protocol. I never got feedback on this as I moved forward with another offer by Unacademy and had to close all other loops early. Made a mistake here by not pushing for feedback, I still think about how good or bad this is.
Thanks for your time.