Most of you have probably notice that I’m working in 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 but, Wha can I do? With that in mind, I started this project with the idea of “change” the way we see corruption.
NEEDFIDING
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 were:
- Public employees.
- Law enforcement figures.
- Gestores — people that “help” you to solve your problem.
- Common citizens.
Here are the findings:
- All people use internet, friends, social networks to be informed of the process.
- All feel frustrated for the lack of information in the government websites.
- People mention that the current state of public institutions is sad and sometimes they don’t have resources to proceed with the paperwork.
- “Gestores” are like winning a lottery ticket: They are expensive and sometimes they can solve the paperwork for your, but in other moments they can even lose or damage an important document.
- Waiting lines in public institutions are also a place for discontent in 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 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 all you friends: twitter, facebook and even my telegram group. They were plenty of great ideas but they only worked if I have plenty of resources, time and government support. So, that’s why I just went into the root of what I consider was 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 that “This 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 a top 10 “best citizen” in the country for a month . People are encouraged to upload photograph 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 consider “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 — DESIGN 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 hangouts) — I created invision projects and it was easier than just showing the interactions using the webcam.
You can find the whole paper prototype in: https://invis.io/TH9VTF353
You can find the whole paper prototype in: https://invis.io/3T9VVSQG2
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” were the focus to our the first modifications in this prototypes.
FIRST WIREFRAME
I was asked to show a first wireframe with only 3 screens.
Screen #2: This is the home screen, it shows the current top nominates 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 to others “how good they are” inspiring and teaching values that directly associate with good manners and be a good citizen.
HOME SCREEN & KEY SCREENS, NAVIGATIONAL SKELETON
You can take a look at this first wireframe in: https://invis.io/YX9Z0XZBH
Task review:
- A regular user of this app will be invited by a friend in 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 install the app and logs with his/her social media account, some initials 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 function of the app. Also the steps or “taks” that the users will be performing (those are similar to the described above).
Here is the first splash of this first wireframe, this link will be available only for a some days https://www.justinmind.com/usernote/tests/23082449/23093870/23093873/index.html
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
TEST YOUR PROTOTYPE
I have to test my prototype with Spanish speaking persons because I live in Venezuela. Due to this constraint I have also made another version only in spanish for that week.
Spanish prototype (will be alive just for a few days due to justinmind license restrictions): https://www.justinmind.com/usernote/tests/23082449/23093870/23152333/index.html
Basic steps in this week:
- Create a testing protocol.
- Obtain participants 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 in the redesign I created 2 versions of the app for a A/B testing.
Design A - The new design: Share button will be visible in 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: Share button will remain in the same place: after finish 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 testing 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 answer all the questions correctly. He said “Four out of ten, Only though?” (the test explained that it was a prototype and it will not include all the questions, but this motivated me to make all of the questions and store the score).
Tasks:
- Register or login into the app.
- Make a test (are you a good citizen? test) to obtain an score.
- Share your score in social media.
My Hypothesis was that in Design A the share button (Share your score) was going to be more visible in the home screen and available at glance, hence it would be easy to use than Design B. Results show something different, the original Design B (with a larger button) was easier to use than Design A. I keep the large buttons and I added Design A share button in homepage just to minimize cognitive load.
FIT AND FINISH
The evaluations help me arrange a new list of changes and finally finish my prototype. I was also told to include colors to the UI, this for me was the hardest part since all of the interactions had illustrations that I have 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.
And here is my final prototype: “Are you a good citizen?”
Android: Instructions: If you want to properly test this app in your android device, please install justinmind prototyper app (android) and just tap in “introduce token”, then use this token 7CCMZG (you don’t need an user account)
On your computer:
Or if you want to test it in your computer, just go to this link: https://www.justinmind.com/usernote/tests/23082449/23093870/23228029/index.html
Justinmind will have my prototype just for a fee more days, if the link above does not work go to: http://prototipo-coursera.s3-website-us-east-1.amazonaws.com/
Here is a short video promoting this prototype.
SPECIAL MENTION
I also got inspired from a paper called “Interface Design based on the philosophy of Japanese Hospitality” by Kerstin Blanchy. In this paper she describes the application of Omotenashi (おもてなし) ~ Japanese hospitality in the User Interface Design process.
INTERACTION DESIGN IN SPANISH
If you want to know more: I have created with my tocayita (María Gabriela) 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 your 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 Hospitalityby Kerstin Blanchy. In this paper she describes the application of Omotenashi(おもてなし) o motenashi in the User Interface Design process.
- Music from the video from Ketsa
http://freemusicarchive.org/music/Ketsa/
