Citizen

A platform to fast-track political awareness for first-time voters.

Date

Feb. 2019

Website

Prototype Link

Focus

UX Research

Design Sprint

Rapid Prototyping​

Interface Design

Introduction

This work is a product of following one of the design briefs provided by the RSA Student Design Awards.


Brief- Design a solution that harnesses digital tools to increase the quantity and quality of citizens’ participation in democratic processes.

Brief Analysis & Framework

With help from my mentor, Saumya Kharbanda, I was able to set first-time voters as the target group and identify a broad framework for an inquiry into the Indian political sphere.


3E Framework- Encourage, Engage, Empower.



A picture of notes analyzing the brief.
UI of the website's onboarding screen.

User Interviews & Insights

The next step was to create a road-map for interviewing urban first-time voters. All questions were inclined towards finding their political interest against political awareness.


Here are some of the leading insights-

  • A sense of responsibility piques political interest.

  • Family leaves political impressions.

  • Feels political awareness is time-consuming.

  • Facebook is a passive news touch-point.


A picture of notes with user insights.

Running with the Insights

These insights informed the next step of defining specific objectives and goals. Next, I gathered my peers (also first-time voters) to help me prioritize them by voting.


After prioritizing, I brainstormed and generated 3-4 solutions for each of the objectives.The idea here was to generate first, and critique later.



Objectives voted on by peers.
Website's 'Explore by' screen with Topics Tab highlighted.

Mapping the Solutions

To critique the generated rough ideas, I mapped them out on an Impact-Effort graph. The value against the effort required to build the solution before elections (April 2019).



Rough ideas mapped out on an Impact-Effort graph.

Selected Concept- A platform to present long Q&A videos of politicians in a direct, digestible, and interactive format.


Encouraging the “question-asking” notion of students, this idea also meets two of the above defined objectives-

  • Shift focus from hard facts to perspectives.

  • Challenge time-consuming nature of politics.

User Journey & Testing

To give this concept more structure, I followed three steps to go from a macro to a micro view.


  • Macro flow to layer the 3E framework.

A whiteboard divided into four columns labeled Discover, Learning, Using, and Goal, each containing handwritten notes and arrows showing the steps of a user's journey. The Discover column includes actions like hearing a friend’s suggestion and seeing a promo banner. The Learning column lists sources such as YouTube ads and talking to a friend. The Using column shows selecting the mentor, viewing all questions, choosing one, and watching an answer video. The Goal column ends with seeing the next question, comparing answers, sharing with friends or family, and enjoying a delightful interactive experience. Curved dashed and solid arrows connect stages across the board.

  • Micro flow to identify primary and secondary userflow.

A whiteboard with the numbers 1 through 6 arranged in a row across the top, each with a colored post-it note placed beneath its number. A dashed horizontal line runs across the middle of the board dividing two labeled sections: “Primary” above the line and “Secondary” below it.

  • User Testing with target group.

A user interacting with a paper prototype to identify exploration preferences, i.e., exploring by topics vs. exploring by politicians.
Website's 'Explore by' screen with Politicians Tab highlighted.

Rapid Wireframes

After articulating questions that users might have at each step of the flow, I initiated the wireframing process, again following the generate first, critique later method.


Sketches of early wireframes showing multiple layout iterations of various screens.

Interface and Functionality

The final translation of the UI from wireframes happened over multiple iterations that revolved around the identity, functionality, hierarchy, and features of the platform.



GIF showing the user’s flow from the “Explore by” screen (topics) to the “Education” topic screen, with a series of questions in the left panel and the detailed answer to the selected question in the right panel which displays the politician the question was asked to, a video of their response, and the transcribed answer as text.

  • Filtration to close-in on interests.

GIF showing expanded view of filter box presented in the left panel of the 'Education' topic screen.

  • Citizen Dictionary to fill knowledge gaps.

GIF showing the underlined term “MNREGA” in the transcribed answer, which opens a pop-up called the Citizen Dictionary explaining the term.

  • Video pop-up to switch medium.

GIF showing the user clicking the video thumbnail to expand and play the video in the answer panel.

Take-aways

  • Design can address issues like politics, if you're willing.

  • Impact-Effort graph accelerates decision making.

  • Solutions generate when you have clear objectives.

  • When in doubt, strategically ask the user for help.

  • Build and impulsively initiate testing.

View All Projects