Safety in anonymity: a UX case study.
Overview
iGovern is an app that allows one to anonymously report, follow-up, and share issues with their elected leaders: an online suggestion box! The platform is unique due to the anonymity it offers. Citizens get the opportunity to air their views and suggest improvements anonymously hence giving them a “safe-space” to be heard.
There’s a dashboard where the county ( anyone granted admin rights ) will be viewing and responding to the issues raised. The response is sent to the reporter’s inbox and progress updated.
This idea was born out of the Google solution challenge 2020 where we received an honorable mention from Google :) The app that is available on Github is the first draft we came up with, which we wish to improve on in the future with the current UI in this case study.
About the project
This is a personal project created to improve my UI/UX skills and understanding by challenging myself. I decided to work on and publish this case study even if my design would not be implemented if only to demonstrate my UX thinking and process.
The project took me 4 months while dedicating 10 hours weekly excluding weekends. Figma was the only tool I used for the UI and custom illustrations.
When developing the first version (iGovern 1.0 ) a lot of UX principles were not put into consideration and hence the current UI is neither user friendly nor appealing. The reason being we had a short timeline to come up with an MVP. Now that we’re being honest :) am not the same designer I was months ago.
My Role
While implementing the first concept, I was in charge of user research, creating the user flow and wireframes. I was also the overall team lead as I collaborated with two developers to have the first version of the app. For the first draft, my colleagues used the wireframes provided by me to come up with the end product.
For the proposed UI improvements in this case study, my role has been to create the user flow, wireframes, carrying out user testing, creating personas, storyboards, and designing the high fidelity prototype. In short, everything design related. I know, am a maze ball 🙈
My target users are common citizens and their government representatives. Come to think of it, this could serve as an online suggestion box for any organization/company as well.
My Goal
The original app is simple: tap a button, report an issue. However, the focus was on functionality and not usability. My goal for this project is to make the app not only beautiful and appealing but to improve people’s experiences as they interacted in the app.
My high level goals while working on this case study was to:
1. Make the app fast and easy to use by anyone, anywhere.
2. Create a platform that would allow more engagement.
3. Have an appealing, functional and minimal app.
The Approach
Usability Evaluation
In the original app, my team and I were trying to include all our app features on one screen with the hope that that would help make everything accessible. There were also a lot of choices that the user had to make when deciding what to do on the home screen. Some icons in the developed app UI do not represent what they stand for and the interface is generally unappealing.
The color combinations, icons used and fonts were not discussed in detail before the developers commenced working on the app. In the end, we built an app that was functional yet overall scaling would be a problem.
Usability Testing
I tested the existing app with 20 participants in my school. I wanted to see whether users could easily understand how the app works without guidance. I identified the key areas below for my research:
Why do I need to refresh my location?
Participants were annoyed when they had to refresh their location every time they were in different counties. They expected iGovern to automatically pick up their location using their phones’ GPS instead of reiterating.
What do these icons do?
The compass icon and dollar sign icons didn't make sense to any of the participants. I even noticed that users took a long time to figure out where to go next. It became obvious at this point that our approach to have everything on one platform blew up on our faces!
Why did we even decide to have the notifications at the bottom navigation as if that was one of the app’s primary feature🤦♀️
I cannt use this…
Most participants complained about the general look and feel of the app. Kenya being a youthful country, I realized youths would be our immediate clients hence improving the general look was paramount if we are ever going to hit the market. As a result, I improved the onboarding experience and included illustrations that are youthful and appealing.
Storyboarding
When sharing the idea with the team (the two devs who developed version 1.0) I used the image below to pass the idea across. I believe storyboards play a big role in passing information fast and effectively without the use of many words. I used storyboardthat.com when making the visuals below.
Persona
For the purpose of making this case study short, I will only share one user type that would most likely use igovern.
User flow
Sketches
My main aim was to cut down the number of steps and choices needed when interacting on the app.
Wireframes
I used Figma for the wireframes showing the user flows.
Pain point 1: Users seem overwhelmed with all the options provided on the current home page.
Pain point 2: Users took a long time deciding on what to do and what the icons meant.
Design solution:
Simplified the home screen so that one was only able to view the issues already submitted by others. They can then upvote or “downvote” an issue and the issues with the highest votes are given high priority when being solved. I separated the progress, suggestion, and report screens to reduce confusion and used better icons that were more communicative.
High Fidelity
To keep the article short, I will only be explaining my favorite screens :) which happen to be the screens I designed the illustrations and icons from scratch.
The illustrations used in the designs below were obtained from uistore.design, however, I worked on the doodles in the background.
Summary
Below is a summary of my proposed solution:
I reduced the cognitive load for the user by separating the screens.
The app is more appealing and user friendly
The icons used are now easily understood.
Hopefully, when the user uses the app, their location should/would be picked without the need to refresh. Fingers crossed on the devs :)
By making the minor suggested changes, the general user experience would be improved.
One more thing!
This is the first case study that I have published, I hope you loved it as much as I did. If you have any comments or suggestions feel free to get in touch. I am a huge fan of feedback and I get better by hearing people’s amazing thoughts.
If you’d like to say hello, drop me an email at vuyanziglorious@gmail.com or connect via LinkedIn.
Keep smiling and never stop creating 😊
Mob love,
Vuyanzi
