EasyPark — Find, book and pay your parking spot

Danis Okic
Bootcamp
Published in
8 min readMar 27, 2023

Introduction

Hello Medium! In this UI UX case study, I will present “EasyPark”! “EasyPark” is the first mobile application I made comprising and offering various parking services and special features. I intended to make this app innovative and unique but more importantly user-friendly and functional.

The Problem

As the number of cars continues to increase, our lifestyles become faster and as we are always in a hurry, parking your car can be a challenge. In the following are some of the problems I noticed people have when dealing with car parking:

  • Paying for parking can be a hassle sometimes
    In some parking areas (whether it was street parking, underground parking etc.), it can be unusually difficult to find a ticket payment terminal and secondly, to actually purchase the ticket. We find ourselves wandering around the parking lot wasting our precious time looking for the payment machine. What can sometimes be a nightmare too is when we finally find the payment terminal but they do not function properly and we must find another one! When we finally find it, we struggle dealing with coins, paper bills and paper receipts…
  • Finding an adequate parking spot is often a problem
    Every driver experienced the feeling of going somewhere, expecting to find a proper parking space only to end up driving around a certain area frustrated looking for a spot to park. Even when they find a place to leave their car, it ends up being something like an off the curb parking that is far from their wished destination. In that manner, the driver becomes frustrated since he/she spent more time than planned looking for parking and he/she is now probably late a movie for an example!
  • Parking your car in a certain area in a specific time period is almost impossible
    Did you ever come to your workplace or apartment just to see your go-to parking spot already taken? A similar scenario would be; imagine you plan on leaving your car on a particular parking lot in your city centre on a Friday night. You come and see that the entire lot is already full. You still have to park somewhere! Therefore, you go around looking for an alternate spot while being late to a date.
  • Drivers forget where they parked their car
    With today’s bustling lifestyles and stressful agendas, it sometimes happens that people forget where they parked their car and just can’t remember where they left it!

In response to these hardships practically every driver faces, I started working on an app addressing exactly these pain points.

Research and inspiration

Having the above stated problems in mind, I started doing research. The first thing I did was analysing competition applications. This way, I gained some inspiration on what I could add into my app but more importantly, I looked for flaws and shortcomings in the apps of my competition. My goal was to make the best and the most unique app of this purpose!

In regards to the UI (UX as well, but on a smaller scale) elements of my app, I made a big moodboard consisting of a large number of various screens and shots from different apps. It might seem weird, however, I gained inspiration from fitness apps, travel apps, food delivery apps, navigation apps etc. I was mindful of everything — fonts, colours, sliders, input fields, illustrations, menus, icons, buttons etc. It is unbelievable just how many UI elements practically all the apps have in common!

So, after saving numerous shots from Dribbble, Mobbin, Behance and similar platforms into my “Moodboard” page in Figma, I also made sure to leave notes on every shot to remind me what was the exact thing that drew my attention. I knew that I only needed to imitate and readjust the works of various other great designers to make my own app look great!
I must mention the stage in which upon completion of the research part, I had two long brainstorming sessions. In a Word file, I wrote a note of every minor and major idea (about app’s concept, UX, special features etc.) that came into my mind.

Moodboard

User persona

User persona

When starting the project we need to understand for who are we making this application. My user persona is Kenan, a busy marketing manager with a stressful agenda. He is unhappy because he never knows where he can park when driving to work. Such problems can easily be avoided with the use of “EasyPark”.

User flow

User flow

After already having compiled all my ideas into one place (the above mentioned Word file), I structured the user flow. In it, I included firstly all the features the app would have and secondly, the path the user will go through to complete a certain action. Still, the entire app revolves around finding, buying a ticket or booking a spot and paying for the service through the app. I aspired to make that those two (that is, three) actions as easy as they can get! The user should be able to do everything in a few clicks but still benefit from all the app’s fantastic possibilities.

Sketching

Sketch

I sketched a few of the main screens on a piece of paper. They are not precise and in detail and the final design looks relatively different of course but the sketches were more than enough for me to visualise and start designing!

Lo-Fi wireframes

Lo-Fi wireframes

After finishing my sketches, I had to make a Lo-Fi version of what I had in mind to confirm that it was going to be looking good for both the user experience and the user interface. The above are some of the shots that served as my reference when making the final design.

Typeface and colours

Typeface and colours

It came to choosing typeface and colours. Bright and vibrant shade of blue for the main colour is a perfect fit. When I was researching the font options I was looking for something that would fit this theme, not being too serious but still not too comic. I think that this font and colour combination ended up being good for the app as a whole.

Final design

Starting screens — Log in & Sign up

The first time that the user opens the app, he/she goes through three welcoming screens. On the third page, the user can log in if he/she already has an account or can proceed to create an account. For the sake of user-friendliness, one can also use the app “as guest” (can instantly start using the app) but is informed that some of the app’s features will not be available. Essentially, to create an account, the only information needed is the user’s name, email, and a password. The user can also enter his vehicle information but that part is not mandatory and can be skipped.

Buy ticket & payment options

The first screen upon login/registration is the “Buy ticket” tab. That is the home screen in the same time. The action of buying a ticket is the one of most important actions in my app and it is supposed to be accessed easily. Upon selecting the wished parking and ticket type, the user has three payment option to choose from — by bank card, by SMS or through the app’s wallet.

Explore tab

The explore tab is the tab in which the user can easily find a parking spot using a map and locator pins. One is able to click on the pin and a parking infocard will appear on the bottom of the screen. Also, the user can search for particular parking lots and can filter his search preferences. That way, if one looks for something specific that the parking should have (e.g price per hour, EV charging ports, working hours), that is made possible.

Parking info & reservation (and ticket) offers

Upon selecting a certain parking or clicking on the infocard, the parking information screen will appear. There, the user can see a bit more detail about the parking itself but more importantly, he/she can buy a ticket and book a spot. The user can reserve a place on a certain date in a certain time period. Upon booking, the driver can be sure that his parking place is waiting for him.

Wallet

Another feature that is very useful for the user is the app wallet. The wallet is a virtual money balance within the app. With some money in the wallet, buying a ticket is made easier! No need to fill in any information when purchasing a ticket or reserving a spot.
This balance can be refilled manually by the user whenever he/she decides or it can refill itself automatically. The user can set up auto-refill which transfers money from the user’s bank card to app’s wallet every time the balance comes down to $0. Of course, the user can activate and deactivate this feature at any time.
One more unique characteristic of the wallet tab are the ticket cards. All the ever purchased tickets (expired, ongoing and reserved) can be found in this section. Whilst ticket cards, when clicked, open up into a small ticket. This small ticket gives the user more information. Furthermore, from the ticket screen, he/she with just a click can buy more hours and they can open their car’s location. As stated in the beginning of this case study, sometimes drivers simply forget where they parked their car! With this simple feature, such problems can be easily avoided.

Conclusion

I enjoyed every moment of creating “EasyPark” and writing this case study.
In regards to the app, I tried to make it user-friendly, simple and functional.
I spent a lot of time and effort on this project as a whole. One big step in my design journey, still, a long way is ahead of me, but I am ready for this awesome journey!

Thank you for taking the time to read this case study and I hope you liked it. If that’s the case (no pun intended), make sure to generously clap this article.

Get in touch

Find me on LinkedIn or email me on danisokic.design@gmail.com

--

--

Danis Okic
Bootcamp

UI UX designer eager to share his work with the world!