Parko-Parking App: UI/UX Case study.
In this case study, I will be describing my A to Z decisions for designing a whole new parking experience.
So Ankita why did you choose a parking app for your next project?
This was my second personal UI/UX project. One day I was on a call with one of my friend and we were discussing what more problems can we solve. Among many topics, we came up with this one. I thought this would be a challenging one and also there are no proper parking applications in India.
Overview
Can you tell me at which point the app will come in handy?🙋♂️
Yes. Let me give you an example.
Krish has to travel to Bombay. He prefers taking his car and driving it to the railway station. He arrives at the station but finds it difficult to park. There was a crowd of too many vehicles.
You see in this situation, his only problem is parking his car. So that’s where an app like Parko will help him find a perfect spot for his car.👍
Problem Statement
To design a mobile app📱 that allows users to find a parking place, which also allows users to pay digital money and helps them track back to the parked vehicle🚗.
Understanding the problems
1. Many popular areas have limited parking place.
2. People park most of the time on the roadside. It becomes a disturbance to workers/staff to clean roads and people driving on the roads.
3. Many parking places use physical tokens or tickets.
4. People forgetting the area where they have parked their vehicle.
Who are the users?
People who own two-wheelers such as bike or scooter and four-wheeler which is a car.
Let’s get started
So here are some screens from each of the apps:
Problems Identified-
- Lack of proper information: Few areas didn’t tell how much time is needed to reach the place. Where exactly is the place located? Showed the wrong current location.
- Labels and buttons were confusing. Few looked like clickable buttons which were not a button.
- Confusing contents such as icons, labels, etc. It was not clear what it indicated.
- None of the apps had a feature to track the parked vehicles.
- Cash payments: 1 out of 3 apps had a digital payment option.
Competitive Analysis
Why did you take ParkingRhino in particular?👀
So there wasn’t a big reason behind taking it. I went through the ratings and reviews in Play Store. It had a rating of 4.0 and 10k downloads. So I thought what might have been the reason for so many downloads? Did it have a great product design? I needed to know all that and I went for it.
Let us look at the problems I noticed.🤔
The way I had explored the app was by questioning myself.
- The onboarding part had problems as I have mentioned below in the pictures.
2. In the first screen☝, why would the app even show the message of not operating in that particular location? In the beginning itself, it makes the user lose interest.
3. Next on the second screen✌. After entering the place I want to park, the information that the app had given was not clear. It didn’t show me what was my current location, how much time would it take me to reach the place, etc.
4. Clicking on the paid icon took me to the location page📍, which was completely unnecessary🤷♀️, and also details were not well written.
Setting Goals🚩
- Providing users places to park their vehicles.
- Reminding them where they have parked in case they’ve forgotten.
- Digital Payment.
Assumptions🤔
Parking hubs installed in many areas of the cities. So that people will make use of parking hubs to park their vehicles instead of parking anywhere.
Parking hub? What are they?
Yes, So parking hubs are large parking lots. Enough number of vehicles for parking. Which will have complete security and many other facilities.
“Beauty without depth is just decoration”
In the same way, UI without UX is just decoration.😜
Here are some of the sketches And wireframes that I made.😋
I did lots of iterations which lead me to design good screens. Also understanding the UX concept behind it.
Let’s have a look at some of my old screens.🤣
Design Execution😍
It seems like the dish is ready. After all, a perfect dish is design from combination of different ingredients.
So finally my designs were ready.😁
1. Onboarding Flow
Onboarding is the first impression on how your app actually looks.
Looking below at the screens, are for new and existing users. The new user has to enter basic personal details and the vehicle which he’ll be using. Vehicle details are the vehicle number and its model(name).
What is the use of “Existing User”?
Let me explain it.
You have uninstalled the app for some reason. Coming back, Installing it again will give you two options. In this situation, you will click on “existing user” cause you know you have an account already.
I have made the onboarding in a way that it makes users understand what the app is all about. I made it minimal and simple so the user doesn’t have to pass through many screens.
Onboarding is like a guide. It should feel like the screens are communicating with you. Content on the screens should be lively so as the user stays with you.
The illustrations look good! How did you do that?🤩
I thought about something which should be more than a picture, more engaging. The use of isometric illustrations is in trend.
You can check out Icograms Designer to make isometric illustrations, it’s super fun and easy.
2. Main activities (Searching hub, Selecting vehicle, Navigating, and Scan)
Home Screen, where users can enter the place they want to park. I felt it was easy if the user enters the parking place either by searching or by setting a location on the map.
Moving on, the search results will give parking pins as you can see below on the screens. Users can tap on any of the pins to know the details such as time, distance, price, etc.
Select the vehicle you are driving. That information will be used at the parking hub. The next step was to navigate. I gave constraints like reaching the parking place around 30mins⏱.
Why?👀
Let’s take this case.
Imagine a user had booked and couldn’t reach the parking place due to some reason. How will the booking get canceled? Should there be a button? So I kept a time limit for reaching the parking. If in case the user fails to reach, the parking will get automatically canceled.
When the user reaches its parking destination, scanning takes place at the entrance. Only then the user can access parking. The same scanning method will be used to proceed to the payment method.
3. Track parked vehicle
I've seen often people forget the place they have parked. Adding tracking would solve this problem😉. And it also tells you for how long you have parked your vehicle.
4. Payment
I chose to show the payment screen when the user completes the scanning process. I have shown the price more focussed which is important with details of parked time and area.
User can do easy payment online through wallet, card or net banking. Next, payment successful screen to ensure the user that the transaction was complete.
Coming on to the rest of the screens.🙆♀️
- Menu contains information about the vehicle, booking, scanning, track, etc.
- In-vehicle screen, the user can update its vehicle as in can delete or add a new vehicle.
- After completion of payment, the user has to provide feedback. It’s done to check how the app is being helpful.
- Exploring apps gave me several ideas of how products are actually designed.🤩
- Bringing this idea into reality will need lots of collaborative effort.
- This is my very first medium article that I wrote.😋I had gone through many articles to learn how to get started.
- Getting opinions from my friends and other designers helped me. The feedbacks which I got made me think and do changes in my designs accordingly. Altogether process was challenging and fun.
Thank You so much for reading this article. I would love to know about your views in the comment area.😬
Oh yeah, Don’t forget about the claps.👏
Hope to share more case studies in the future.🥰
And thank you Chethan KVS for being a really good mentor and a friend.😉
