The ‘Smarter’ Citizen? — Designing a Choice-based Gameplay

Aditya Shrivastava
Nov 3 · 11 min read
cover image as a college of a young Indian boy and a light bulb signifying idea, smart, thought and other related terms
cover image as a college of a young Indian boy and a light bulb signifying idea, smart, thought and other related terms

India is the largest democracy with an electorate so large that one in every eight people on the earth is eligible to cast a vote in the Indian elections. Half of its population is under 25 years of age. The 21st century has been often predicted to be Asia’s century. With such a massive young population, India is certain to play a major role in fuelling the Asian engine of growth.

In 2015, the Narendra Modi- led Indian government launched a $14 billion urban renewal and retrofitting program- Smart City Mission. The program identified 100 cities in India that will be made ‘smart’ in terms of infrastructure, sustainability, and other fronts. By default, a person residing in a ‘smart city’ is a ‘smart citizen’. But, are we looking at the other point of view when we say that?

Who is a smart citizen? The subjectivity associated with the abstract term ‘smart’ makes it possible for each of us to interpret it differently. I came up with my own version of the definition with a simple mission — to understand the current scenario, to identify the gaps and to eventually design a solution to bridge those.

A news clipping from The Guardian newspaper
A news clipping from The Guardian newspaper

User Research

This was my initial idea of a ‘smart citizen’, which kept getting modified throughout the primary research

I began the project with a vague belief that an average young person in urban India is highly unaware of the various government frameworks and schemes. This belief was based on my personal experiences and interactions with friends and acquaintances. I was aware of the fact that it might be laced with bias and might not hold true for everyone across demographics. Hence, the next step in my design journey was extensive primary research with the following objectives:

  • To discover the problem and explore it in detail
  • To validate(or invalidate) assumptions and bias
  • To explore the possible lines on which the solution can be based upon

For primary research, I first came up with an online survey. Although it is often suggested to have a varied set of questions from multiple-choice questions & rankings to open-ended ones, this time I took a different approach. I have noticed from my past experiences in manually taking surveys that the users often find it cumbersome to switch between different question types, especially for longer surveys. So this time, there was a single instruction at the top — Following is a list of 30 statements, choose a number based on your agreement with it where 1 means strongly disagree and 5 means strongly agree.

The target audience was primarily the urban youth in the age bracket of 15 to 25 years. Thanks to my friends sharing it in their social networks as well, the survey received 200+ quality responses. Next, I followed up with user interviews. The survey results gave me a thorough understanding to form further questions to analyze the whys and hows.

For example, a huge majority strongly agreed with the statement that the schoolbooks were ineffective in teaching them how the prime minister gets elected. But, also a large number of respondents said that they knew how the prime minister gets elected. This gives an opportunity to ask questions like, “where did you get to know about that, if not books?”

Results & Insights

  • Topics related to government and democracy are inherently seen as boring by a majority. The key task here is in alienating that image in the proposed design solution.
  • There is a sense of embarrassment on the realization of not knowing answers about government frameworks and processes. Most of the respondents acknowledged the fact that they have been careless to not know about things that are supposedly important for them. On being further asked, most people are positive on knowing more provided they have access to a useful resource that matches their taste.
  • People get to know about a process only when they are in a situation where they must necessarily get involved in it, that is, an unprecedented trigger is the most common source of education. For example, you take interest to learn how to file a police report only when you lose your phone.

Problem Statement

Existing resources for educating about various government frameworks are ineffective.

Design Objective

To design an interactive solution in the digital domain that addresses the problem in an informative and interesting way.


Equipped with quantitative and qualitative data from the first round of primary research, I had developed a fairly good understanding of the target users. Next, I created the personas to further explore the pain points through scenarios, task analysis, and empathy mapping.

Shalini’s pain points

  • She often wonders if there is a way to alert the authorities in a way that they would take action. Having tried writing a letter to the municipality before and receiving no response, she feels there has to be some other way.
  • She realized that there can be an issue of mismanagement of funds. To know more about it, she decides to file a Right to Information query. However, doing it all alone with research on the internet, it takes a lot of effort and time.
  • After getting a response, she realizes that she was right- there has been some corruption. She is now working with a friend of her father who suggested her to file a Public Interest Litigation. She tells about it to her friends and realizes that the process is unknown to a majority of them.

Ravish’s pain points

  • Often times, the information sources are inaccurate and incomplete making him doubt the authenticity of every article that he reads.
  • As he recently moved to a new city, he is constantly asked to furnish proofs for identity, address, birth, etc. He realized that he does not have all the documents ready beforehand making him apply for them now.
  • Government processes for new document creation take time and this causes him a further delay of work as he has to wait for them to arrive to resume already initiated processes.

A scenario involving Ravish:


Next, I began with an exercise similar to competitive analysis to chart out the players addressing a similar problem statement and to individually look at their positives and negatives.

Umang, an app developed by the Ministry of Electronics & Information Technology, Government of India, scores low on the user experience.

Another app, Mx. Democracy(launched by Election Commission of India in collaboration with National Institute of Design), tries a novel approach of introducing game elements. However, its Unity-based gameplay does not appeal to all age groups.

Most of these competitors(or rather, facilitators) fail to find the balance between being informative and interesting. The fine line in the first quadrant is the north star for any new design solution trying to solve the problem.

Ideation for the solution

The idea here is to sell an educative game as a life-simulation game. This is based on the insight that if the users perceive the game as about government frameworks and processes, they would inherently find it uninteresting.

The proposed solution has these components:

  • Gameplay
    The user plays as an avatar which goes through a storyline beginning with the avatar relocating to a new city for college education. The gameplay is divided into text-based episodes with choices for the user to decide the course of action. Each episode culminates in a situation where the avatar has an interaction with a government process/document/ scheme. With each episode, new documents and schemes are unlocked which makes it possible to progress in other tasks and missions within the game.
  • Store
    As in any life-simulation game, there are options to customize the avatar and buy items within the game for an extended experience. The game will follow a point and coin-based system. Points are awarded for actions that add towards being a model citizen. For example, returning a found wallet on the street to its owner. Points can only be earned within the game, and cannot be purchased. Coins work as money and can be purchased. Another way to get coins is to earn them by answering the quiz related to previously unlocked information about government frameworks. This way the users will be incentivized to remember the information presented to them at the end of each episode.
  • Quick Links
    This is a one-stop resource for information about relevant government schemes, documents, processes, and frameworks in bite-sized summaries (think, Instagram carousel posts). This information also has details about procedures and links to government websites.

Next, I identified the key tasks for the users and devised the preliminary task flows, navigation system and information architecture.


The storyline in the gameplay

  • Tax and Income
  • Elections and Voting
  • Government benefits and schemes
  • Identification Documents
  • Law and Judiciary
  • Bank and Savings

Next, I created a flowchart to create the storyline for the first few episodes for prototyping. The key here is to ensure that no matter whichever route the user selects, they do not miss on major parts of the gameplay. For example, in one episode, an organization conducts a quiz in the college. The user is presented with a choice either to take part in it or bunk it and go to a shopping mall. If the user chooses to play the quiz, she gets a check with prize money. If the user chooses to go to the mall, she enters a lucky draw there and gets a check there. Both these storylines culminate in the bank where the user learns about depositing checks and other details.

The game can be monetized through sponsored ads within the gameplay. The boxes highlighted in yellow highlight such possible instances where an affiliate ad can be shown or the user can make an in-app purchase.

Prototyping and Testing

Wireflows

Paper Prototypes

variations for home screen

Low-fidelity wireframes

User Testing

  • Play an episode from start and end
  • Go to the Quick Links and search for a topic from the gameplay
  • Find the quiz section from the store and attempt one round to earn coins

The representative users were selected from the target age group. To ensure that they matched closely with the persona, a screener was created and the prospective users were first asked to answer the questions in the screener. Although, it is ideally suggested to test using low-fidelity wireframes for the benefit of easier iterations; I created medium-fidelity wireframes for the testing as the game heavily relies on graphic elements for storytelling.

A very important part of user testing is to make the users feel comfortable by ensuring them that it is the product, and not them, that is being tested. The users were encouraged to think aloud, ask questions and give inputs wherever they found issues or suggestions.

A few issues were highlighted and minor changes were made in the design before the next round of testing.

A/B Testing

Although the game offers a minimum functionality to go back in the storyline, the swipe up gesture is definitely much more common for refresh action than for going back; making the horizontal swipe a better option to avoid any possible confusion.

After rounds of iterations in prototyping, when a favorable System Usability Score was achieved in the post-test surveys, I began with converting the medium-fidelity wireframes to high-fidelity prototype. A style guide was decided for the fonts, colors, and UI elements. The gestures and micro-interaction patterns were defined.

The game has to appeal to the age group of young adults, so an appropriate tone and language in copy was decided upon. Added to that, I created illustrations in a uniform style to be used across the app from the gameplay to quick links to the quiz.


High-fidelity prototype

The system usability score after testing using the high-fidelity prototype was in high approval with the ease of navigation, simplicity and the overall visual appeal. I tried to integrate micro-interactions like auto-animate, drag-reveal, etc. to further enhance the user interface. In the post-test survey with 15 representative users, 73% of the respondents strongly agreed to the statement that the solution effectively addresses the problem statement. No respondent rated for strongly disagree. Now that the substantial part of the core product has been tested and has reached a good state, the next challenge remains in extending the storyline with the same appeal from the plot and visual fronts. This will ensure that the idea moves ahead from the prototype stage and takes a more meaningful form once developed.

UX Portfolio

case studies involving user research, product design and design in general

Aditya Shrivastava

Written by

Product Designer specializing in UX and Branding — about.me/adishri

UX Portfolio

case studies involving user research, product design and design in general

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade