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

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.

User 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
- People often know about rules and processes, but don’t know their exact names, partly because most of these haven’t been used by them in their daily lives ever. That is, there is some sense of awareness, but lack of information. For example, it is difficult for them to list down the fundamental rights, however, when prompted, most of them could recall in detail about the right to freedom, right to expression, etc.
- 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
- During the rains, the roads around her house get filled with potholes every year. This causes an immense inconvenience to her.
- 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
- He feels that he is unsure about a lot of government processes making him heavily rely on the internet for information.
- 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
After analyzing other players, and having a second round of interaction with representative users, the idea of developing the solution on the baselines of a game seemed appropriate and logical. Review of literature further accelerated the ideation process by providing a robust understanding of game design, game elements and characteristics of a good game.

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
To identify the most relevant topics for the gameplay storyline, a closed card sorting activity was performed with representative users. Various keywords were written on cards and users were made to sort them out into categories like ‘I think it is important’, ‘I don’t think it’s important’, ‘I already know about it’, ‘I want to know more about it’. Based on the results, the keywords were loosely categorized into six broad topics:
- 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.

Prototyping and Testing
Wireflows

Paper Prototypes

Low-fidelity wireframes

User Testing
For user testing, a test plan was created with a task script which made representative users perform three tasks:
- 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
The game follows a non-linear storyline, however, the user can only move in one direction based on the previous choices made. This requires the user to trigger the game to indicate that she intends to go ahead on the next screen — something like flipping the pages of a storybook. Now that the next button was removed, the swipe gesture was the best alternative. Horizontal or vertical? I conducted a small A/B test to find out users’ preferences.

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.

