Tbilisi parking app redesign — case study
As a final project of the UI/UX course of the Academy of Digital Industries, I chose to redesign the Tbilisi parking application.
The context
Tbilisi parking is the application for the Tbilisi city residents and visitors with vehicles. It allows users to park their car in the city, pay the zonal-hour parking fee, find the parking space in the city and register free parking places for certain users. The application is issued by the Tbilisi government and that`s the main reason why it has a poor user experience and cluttered interface.
The research
I focused mostly on the UI of the app. I wanted to use design thinking in practice.
I still conducted a little research to better emphasize with users and define problems.
I did secondary research — I read the reviews on the AppStore and PlayStore. I conducted user interviews — On the Instagram story I asked my followers if they used Tbilisi Parking and some of them replied. Then, I asked them a few questions about their experience. I also conducted a comparative audit — as I mentioned, Tbilisi Parking App does not have direct competitors in Georgia, and I compared it to foreign parking app — Easypark.
In the third stage of design thinking, I started working in Figma to create wireframes, prototypes, and mockups. Tbilisi parking is an app, so for testing, I used the Figma app and asked family members and friends to test the app for me.
Even though I did more of the simulation of design thinking, it was still a very exciting, enlightening, and enriching experience for me.
I downloaded the application and started using it. First, I ignored reviews and comments about the app because I did not want to be biased. After exploring the Tbilisi parking app, I started to read all the reviews. The app had 1.9 stars and 430 reviews on the Playstore and 1.8 stars and 75 reviews on the Appstore.
I noticed that many users experienced the same issues as I had. I interviewed my friends who are using Tbilisi parking daily or on special occasions, from different backgrounds and technical knowledge. I collected their answers, my experience, and reviews, and based on that, I defined several user pain points. Some of those issues were outside of my scope (for instance, I could not fix the payment issues or bugs in the app) so I focused on the pain points, which were solvable for me.
The user`s pain points and solutions
I used principles of Material design to redesign the Tbilisi parking app. I started the redesign process by creating paper wireframes and digital wireframes.
- The password recovery was (almost) impossible
Many users complained about this issue. I tested and noticed that after attempting to recover a password, the notification popped up that “username was not found” (see the picture down below).
As a solution, I decided to add a password recovery using the user`s mobile number. In this way, the user will receive the one-time password, log in and then change the password.
- In case of error, the app does not gives users relevant feedback
When I added a new car, accidentally I typed my personal number incorrectly. Instead of 11 digit number, I wrote 12-digit. I did not receive feedback about an error I just made. Maybe it does not seems like a big problem, but the same happened with the car registration number. So, if a user mistakenly writes down a false registration number and starts parking, they can be fined.
As a solution, I made errors clear with relevant color and text.
- The interface is cluttered
The information architecture is puzzling in the original app. Colors, typefaces, and icons are mismatched to the application.
As a solution, I chose different colors, icons, and typefaces. From the screen below, I removed the balance. Instead of first filling balance and then paying for a parking fee, now the users can pay with cards and avoid additional steps to payment.
- Readability is the major issue for the app
On the right screen, white text on the grey background is almost non-readable. On the left, the size of the text is larger, and the contrast between the background color and text color is high. The font I used for the Georgian/English version of the application is FiraGo. The main language of the app is Georgian, so I did not have many choices.
Regular, medium, and bold are used in the texts with different importance.
Increased contrast between the text and background color, together with increased font sizes improved readability.
- The icons and texts under them are mismatched. Icons add nothing but visual noise to the application
The icons are very heavy-looking and inconsistent. The second icon looks like a home, but the text below the icon says ‘free’. For the users, it is unclear and puzzling what is free in the first place and why is free expressed with this icon. All the icons, except the hamburger menu, are placed inside of the circle (and I still do not know why).
I chose Material design icons and this way new icons became more consistent and pleasant to the eye.
- It is possible to scan QR codes instead of writing with hand the lot and zone numbers
When I shared this project, I received positive feedback. Among the other feedbacks, there was one where I got advice to simplify the process by adding a scan option. I take into account this feedback and added a QR code scanner into the app.
The design system
To better organize the project, I created a mini design system.
As the main color, I chose blue because the logo of Tbilisi city is blue, as well as parking signs. For variety, I used different shades and tints of blue. As a secondary color, I used blueberry and its variations.
For the text and additional information, I choose a color named police blue and its variations.
You can see the whole project on Behance.
Conclusion
Even though it was not a real project, I gained a lot of knowledge. I learned how to empathize with users, how to do research in practice, how to create wireframes, and how to choose colors, typefaces, icons, and so much more.
Thanks a lot for the scroll and reading this case study. Drop feedback or ask any questions.
