Are you a good citizen?

A video (part of this final submission) — It’s not my best work, I will keep working on my edition skills

Most of you have probably noticed that I’m working on a prototype called “Are you a good citizen?”. This project is part of the “Interaction Design” specialization from UC San Diego (Coursera platform ).

It’s been a ride and now I will tell you all about it…  It started with the “problem”…

I live in Venezuela and we are currently having a very hard time due to corruption (is part of our lives and everything needs to be solved in that way). I wanted to find a solution, What can I do? With that in mind, I started this project with the idea of “changing” the way we see corruption.

picoline cartoon about what makes poor nations stay that way
Pictoline cartoon strip explaining the differences between rich and poor countries

In this stage, interviews were made in order to recognize the problem and perceive possible solutions or ideas. Since is such a broad subject I define my scope only to: Venezuelans doing paperwork in public Venezuelan entities. At first, the list of stakeholders:

Cartoon, an environmental protest and a politician yapping
  • Public employees.
  • Law enforcement figures.
  • Gestores — people that “help” you to solve your problem.
  • Common citizens.

Pictoline cartoon strip explaining the differences between rich and poor countries


In this stage interviews were made in order to recognize the problem and perceive possible solutions or ideas. Since is such a broad subject I define my scope only to: Venezuelans doing paperwork in public Venezuelan entities. At first, the list of stakeholders was:

  • Public employees.
  • Law enforcement figures.
  • Gestores — people that “help” you to solve your problem.
  • Common citizens.
Someone cutting a line
Quick sketch of someone cutting the line

Here are the findings:

  • All people use the internet, friends, and social networks to be informed of the process.
  • All feel frustrated by the lack of information on government websites.
  • People mention that the current state of public institutions is sad and sometimes they don’t have the resources to proceed with the paperwork.
  • “Gestores” are like winning a lottery ticket: They are expensive and sometimes they can solve the paperwork for you, but in other moments they can even lose or damage an important document.
  • Waiting lines in public institutions are also a place for discontent among citizens, they mention that do not feel safe, they are forced to wait for long hours and elderly people don’t even have access to a simple restroom.
  • They all agree that the government did make some improvements in online paperwork, but they are still part of a corrupted system: unnecessary waiting lines, lack of resources, and gestores.


In this step, I need to find as many ideas as possible. I gather them all from friends: Twitter, Facebook, and even my telegram group. There were plenty of great ideas but they only worked if I had plenty of resources, time, and government support. So, that’s why I just went into the root of what I consider the source of corruption inside us, our lack of empathy.

My desk full of notes for ideation. The computer is full of those notes, my coffee mug is on the side.
44 ideas from all my friends on social media

So!, the most relevant point of view was to change the status Quo:

If everyone is able to perceive corruption as a bad habit in my country and not a customary step in every activity, it will be avoided by everyone.

Here are the words from my inspiration board:

  • Values: The good old days — Arturo Uslar Pietri — Renny Ottolyna — Miguel A. Landa.
  • Politeness: Omotenashi(おもてなし)
  • Education: Positive Reinforcement, Indonesia App “¿Are you corrupt?
  • Transparency: Transparencia Venezuela —, Solo promesas
  • Fairness.
  • Justice.
Insights board, this one was amazing to do, also notes in a board, some of them include quick sketch of the possible users.
My actual “board” with ideas, thoughts, insights


In this step, I created a couple of storyboards based on this “The app seeks to motivate common citizens to reject corruption in their life, and benefit from their good behavior. I want to make it easier for Venezuelans to keep moving forward and avoid corruption in the first place”.

Story boards with some doodles of my little ghosts. Each ghost represents an user, some of them are doing a good deed.
Storyboard #1 “A better citizen”

Storyboard #1: “A better citizen” allow people to postulate a common citizen to be part of the top 10 “best citizen” in the country for a month. People are encouraged to upload photographs and stories about other people behaving as good citizens and then they can vote for the best citizen.

Story board from the corruption side, also including my sketch people (ghosts)
Storyboard #2: Are you Corrupt?

Storyboard #2: This app will teach us what is to be considered “corruption” and what is not. Using cartoon-like graphics, multiple choices and a set of values will teach us that sometimes we do not consider some situations to be “corrupt”.

Paper prototype – Heuristics

After having a clear idea I made two paper prototypes. I tested them with my family and then I was asked to test them with my classmates (we use an app similar to Google Hangouts) — I created Invision projects and it was easier than just showing the interactions using the webcam.

First prototype of the app, made with marker and paper. Includes profile pictures of people.
Prototype #1: Good Citizen — Home Screen
The splash mobile view of the app, two cartoon characters, one evil one good.
Prototype #2: How corrupt you are? — Splash screen.

At this moment we were asked to organize the feedback information using the 10 heuristic principles of Nielsen This “pain point” was the main focus and modifications in this prototype.


I was asked to show a first wireframe with only 3 screens.

Here is a wire-frame of the nomination view for the app. People could nominate friends or family as good citizens.
Screen #2: “Top citizens” / Good citizen (Based on Prototype #1)

Screen #2: This is the home screen, it shows the current nominated to “Top citizens” and a quick button to nominate family, friends, or neighbors.

Pivot prototype

I Called my final prototype “Are you a good citizen?” Is a Pivot prototype mixing the good example and positive feedback of prototype #1 — Top Citizens (Nominate and vote for good citizen) with the learning techniques and learning experience of prototype#2 — How corrupt you are (people are asked questions in order to see if they have wrong ideas about corruption).

This final prototype will show how good citizens behave and you have to answer some questions to obtain a final score; the learning process will teach the user how to give back to the community.

First, the app was initially thought about pointing out “How corrupt you are” since “corruption” is the main design topic, but after talking with users they felt that they couldn’t share how bad they are. So this app in a different way will show others “how good they are”, inspiring, and teaching values that are directly associated with good manners and being a good citizen.

Home screen & Key screens, navigational skeleton

This is also a wireframes, black an white with places for the content, buttons and some navigation.
Invision / “Are you a good citizen” / Pivot prototype

You can take a look at this first wireframe in: Are you a good citizen Wireframes

Task review:

  • A regular user of this app will be invited by a friend on a social media network.
  • The invitation will say “Are you a good citizen?” with the score and avatar of his/her friend.
  • If the user installs the app and logs in with his/her social media account, some initial instructions will explain this app.
  • Then the main task is to complete a series of questions with funny and educational illustrations, At the end of this test he/she will be able to learn and also share the score with his/her friends.
  • As a result, the user will know now some new manners in order to be more emphatic in his/her daily life.

Ready for testing

In that week we were asked to develop all the interactions, screens, and main functions of the app. Also the steps or “tasks” that the users will be performing (those are similar to the ones described above). Here is the first splash of this first wireframe.

A nice polished version of the splash with the good and evil cartoon character, a button with the word
The first splash in “Are you a good citizen?” wireframe
This is a screenshot of the planning sheet made to follow the project and mark each step as complete.
Development plan Screenshot / Google docs

At the same time, we were asked since Week 6 to maintain a development plan, Here is the last file of that plan if you want to check the time for each activity (in a regular project for work I prefer to use Jira)

Test your prototype

I have to test my prototype with Spanish-speaking customers because I live in Venezuela. Due to this constraint, I have also made another version only in Spanish for that week.

We tested the prototype in other languages, this screenshot shows the Spanish version used with Spanish speakers users.
Temporary Spanish version – Spanish prototype

Basic steps in this week:

  • Create a testing protocol.
  • Obtain the participant’s consent.
  • Photo documentation / in-person testing.
  • List of planned changes.
  • Alternative design.
My son testing the Spanish version of the App, he was so trilled, you can see his little hands.
Edd testing the app: In-person testing: Eduardo complained that the share button was too small

The final feedback was very useful and the list helped me to improve the wireframe later on.

A quick draft with markers to improve the design after this first test.
Redesign: A/B testing change for “share score”


I needed better “results” in order to fix all the issues in the wireframe. Based on the redesign I created 2 versions of the app for A/B testing.

Design A – The new design: The share button will be visible on the home screen, in that way, it will be easy to spot and share without tapping into the detail score screen.

Design B – The closest to the original design: The share button will remain in the same place: after finished the test and in “detail score view” but now it will be larger and highlighted.

They allow us to use with a free coupon to perform a series of tests with native English speakers. Extremely helpful, they helped me to notice grammar issues and also added that this app will be great for kids.

A/B testing with a platform called It was an amazing experience.
User testing: Design B, User4 — MR-DAD

Design B, User4 — MR-DAD: He taped on results and then saw that his score was 4/10 even though he answered all the questions correctly. He said “Four out of ten, Only though?” (The test explained that it was a prototype and it wouldn’t include all the questions, but this motivated me to make all of the questions and store the score).


  • Register or log in to the app.
  • Make a test (are you a good citizen? test) to obtain a score.
  • Share your score on social media.

My Hypothesis was that in Design A the share button (Share your score) was going to be more visible on the home screen and available at a glance, hence it would be easier to use than “Design B”. Results showed something different, the original Design B (with a larger button) was easier to use than Design A. I kept the large buttons and I added “Design A” a share button on the homepage just to minimize cognitive load.

Fit and finish

The evaluations helped me arrange a new list of changes and finally finish my prototype. I was also told to include colors in the UI, That was the hardest part since all of the interactions had illustrations that I had made in Inkscape, I spent all of my Sunday drawing and coloring all of the 10 questions with yes/no feedback screens.

The finish project with colors and illustrations.
Final prototype screenshots and here is my final prototype: “Are you a good citizen?”

On your computer: If you want to test it on your computer, just go to this link: Prototype1.8 Here is a short video promoting this prototype.

Special Mention

I also got inspired by a paper called “Interface Design based on the philosophy of Japanese Hospitality” by Kerstin Blanchy. In this document, she describes the application of Omotenashi (おもてなし) ~ Japanese hospitality in the User Interface Design process.

Interaction Design Spanish

If you want to know more: I have created with my tocayita (María Gabriela – @MaGabrielaG) a telegram group called “Interaction Design” in which we have conversations related to UX, UI, testing, and this “Interaction Design” specialization


  • Transparencia Venezuela: Website created to provide the transparency that the government does not provide
  • Dilo aquí: App created to report irregularities concerning corruption, impunity, and electoral fraud, if you are interested here is the Android store link.
  • What makes Venezuelan corruption unique: An article in Spanish explaining why the problem of our country is not the people, but the system, Here is the link: Qué hace que la corrupción en Venezuela sea única
  • Interface Design based on the philosophy of Japanese Hospitality by Kerstin Blanchy. In this paper, she describes the application of Omotenashi(おもてなし) o motenashi in the User Interface Design process.
  • Music from the video – Author: Ketsa