Most of you have probably noticed that I worked back in 2017 a prototype called “Are you a good citizen?”. This project is part of the “Interaction Design” specialization from UC San Diego (Coursera platform https://www.coursera.org/specializations/interaction-design ).
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.
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:
- 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
Needfinding
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.
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.
Ideation
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.
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 — https://transparencia.org.ve/, Solo promesas http://www.solopromesas.com/venezuela/
- Fairness.
- Justice.
Storyboards
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”.
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.
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.
At this moment we were asked to organize the feedback information using the 10 heuristic principles of Nielsen https://www.nngroup.com/articles/ten-usability-heuristics/. This “pain point” was the main focus and modifications in this prototype.
Wireframe
I was asked to show a first wireframe with only 3 screens.
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
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.
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 https://docs.google.com/spreadsheets/d/1-pSITV27GwLB1yoaawdaXiVcny5Ur7oAwk42mlFtenk/edit?usp=sharing (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.
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.
The final feedback was very useful and the list helped me to improve the wireframe later on.
Results!
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 usertesting.com http://usertesting.com/ 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.
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).
Tasks:
- 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 https://inkscape.org/, I spent all of my Sunday drawing and coloring all of the 10 questions with yes/no feedback screens.
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 https://telegram.me/interactiondesgin_spanish.
References
- Transparencia Venezuela: Website created to provide the transparency that the government does not provide https://transparencia.org.ve/.
- 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 http://freemusicarchive.org/music/Ketsa/
