top of page
photoshop file.png

Parki   (Parking app UI/UX case study)


A responsive application for renting or leasing parking spaces

 

 

Project overview

Putting out on lease or taking on lease your parking is a matter of clicks now!

​

  • I got a request from a new client experiencing a noticeable demand for parking spots due to the high number of cars in the region where the client resides(Spain), creating an unpleasant parking experience. The main problem of the users was that they couldn't easily find a parking spot with their desired facilities in the nearest location to their destination using the existing apps, and they often ended up parking in an unsafe place they found on-site. Therefore, I collaborated with a full-stack programmer during this project to design an app with a better user experience to come up with a better solution.

  • The parking app’s main goal was to let drivers do everything as quickly as possible, in a few clicks — search-book-pay-park-rate. 

My role:
User Experience (UX)
& User Interface (UI)

Tools used:

Figma, Google docs, Excel, Miro

Collaborations:

Full stack developer

​

Project Duration:

6 months

​

Main tasks:

  • Design strategy

  • research 

  • Competitor analysis 

  • User interviews

  • User flows

  • Sketching

  • Information Architecture

  • Wireframes

  • Visual design

  • Prototyping-Motion & Interactions

  • Usability Testing

Design Thinking framework
To work on this project I took the Design Thinking framework as a basis 

ArtboardNEW – 13.png

User research

To validate the problem and get a better understanding of the issues faced by the users in their daily life along with building user empathy, I developed a research plan which included studying past researches on parking issues in addition to conducting user interviews.

For this, I interviewed five people from different age groups (18 to 50)and various occupations to understand their pain points and motivations. Some of the questions out of the set of questions I prepared are as below:​

1.png
2.png
4.png
3_edited.jpg

The major pain points

After conducting the research and analyzing the information gained throughout the process, I discovered the major pain points that the users are facing. The major pain points as quoted directly from the users are:

​​

Dialog.png

User personas

I identified major groups that would be the potential users of a parking app (for both car owners who are looking for a parking spot and spot owners who are willing to rent out their space), based on which I developed the following user personas.

Mario Persona.jpg
Pablo Persona.jpg

Competitive analysis

I analyzed the market and existing apps, to realize which features these apps lack.

Some of the apps were

  • ParkMobile

  • SpotHero

  • ParkWhiz

  • Parkopedia

When I analyzed these apps, I saw that they mainly lack the features below which were also the pain points our persona was experiencing:

A. Convenient filtering for search results: Apart from the inability to find a parking spot, schedule parking time, and book it, many drivers face problems when they can’t park a specific vehicle type (oversized vehicle, bike, etc.) or determine the maximum distance between the parking spots and the user's desired destination in search results.

Opportunity: The users should be able to filter search results based on the parking ratings, range of distance from the user's desired destination, personal or organizational spots,  and specific parking features such as being covered, guarded, or having CCTV and also filter the exact vehicle size(small, medium, large, truck, bike)

 

 

B. Problems with booking: When I reviewed the booking feature and how it works, I faced a problem with booking schedules. For example, if you booked a spot for 2 hours from 12 p.m. to 2 p.m. and don’t have enough time to take your car, other users may already reserve this spot at 14.

And if the user arrives in the parking and sees that the spot is occupied, they will be angry and confused. 

Opportunity: (as I shared this problem with a focus group, I realized that automatically suggesting alternative parking spots and offering automatic compensation as a gift for inconvenience can potentially be exploited by some individuals in certain situations. That's why this route is facilitated through support to create a sense of follow-up and backing for the user, as well as to prevent possible issues.) The support group should provide bonuses to such users and make rebooking to a nearby spot to get over such situations. 

Research results
Based on the conducted research, competitor analysis, and interviews with users, I have concluded that the main issues and goals list of the application are as follows.

  • Many popular areas have limited parking places: Most of the major cities have limited parking slots and some places don't even have proper parking slots. in peak hours finding a convenient space is always difficult and on the other hand parking on the roadside may lead to fines and car theft issues. On the other hand, parking lot owners (Especially personal spots) in busy areas are willing to rent out their empty spaces at a desired price to individuals whenever they want. However, finding customers at specific times with a predetermined and non-negotiable price, and mastering the parking rental process, are concerns for these individuals.    

  • No way of knowing if parking has vacant spots until you reach there.

  • Many parking places use physical tokens or tickets that can be easily damaged or replaced.

  •  Most of the private parking spots don’t accept online payment.

  • Hard to find your car afterward, especially if you forget your spot number.

​

Setting Goals🚩

  1. Providing users with places to park their vehicles.

  2. Reminding them where they have parked in case they’ve forgotten.

  3. Digital Payment as well as a cash payment

  4. Providing sufficient permissions and accurate information to parking lot owners for managing spaces and customers.

Ideate and design

User flows

For the users to easily reach their goal in the application I came up with a user flow. the faster and easier the user flow, the faster the user will reach their goals and become satisfied with the app.

USERFLOW– Parki.jpg

Information Architecture

Information architecture is all about the organization of information clearly and logically to help users navigate complex sets of information. As the app had two sections (the parking owner and the car owner), I created an information architecture graph to have a clear view of each page and its features.

Information architecture transparent.png

Design Process

Low-fidelity wireframes: Now that I have reached the design stage this is where I quickly design a low-fed wireframe That connects the information architecture to the visual design of the app. Here are some examples of lo-fi wireframes.  (Lo-fi wireframes do not represent the final visual design)

Low-fi testing:

To test the lo-fi wireframes and different user flows I prototyped lo-fi wireframes and tested the prototypes with five participants

​

Learnings:

  • The sending review page of the parking should be straightforward, without any unnecessary complexities, so that users do not skip the review submission step and are more inclined to provide feedback about the parking.

FD

  • Car owners should be able to submit additional parking requests with different times and other details for the same spot when they have an active request for that parking.

FD

  • Spot owners should be able to review the submitted requests and choose the desired one after comparing them, without being obligated to reject or accept a request at the first moment. This method allows parking owners to have more freedom in accepting requests.

Design system:

 I built a design system that contains all elements of the UI design of the project. It will help to quickly scale the app up for the next app version and make quick changes after the testing stage.

Visual design:

I have converted the wireframes into final screens and tried to have a user-centered approach with the UI.

1-Onboarding:

Onboarding screens help the user to have a basic understanding of the application.

Artboard – 3.png

2- Sign-up/sign-in, verification screens, and welcome page

General sign-up sign-in pages are viewed at first. spot owners will be able to sign up the moment they want to upload their first spot.

Artboard – 6.png

3-Booking process and other screens

Artboard – 7.png

4-Spot owner section

Artboard – 8.png

Usability test with high-fidelity wireframes

After prototyping high-fidelity wireframes I conducted a usability test with 5 users to understand how they interact with the product and figure out what changes need to be made to improve the user experience. In this test, I asked users to perform various application tasks while thinking out loud.

During this process, the success rate and usability of the application were over 85%. After completing the test, I interviewed users about the strengths and weaknesses of the application, ambiguous and challenging aspects, and necessary features that users feel are not included in the application, to obtain more accurate feedback from users.

​

Here are some Post-Test Interview questions that I asked:

  • How do you feel while doing the task given?

  • What difficulties did you find when using this application?

  • What do you like about this platform?

  • What do you dislike about this platform?

  • In your opinion, who are the suitable people to use the website/application?

​

What did I find?

Based on the test, here are some pain points that the user experienced: 

  • “I’m confused, the button’s icon is not what I expected “

  • “I have enough space for bikes and cars, do I need to create another spot in the app to upload the bike spaces?”

  • “I can't withdraw my money from the wallet and I don't know why”

Conclusion and Recommendation

I made the necessary edits based on the usability test results.

Some of the edits made after the usability test included:

  • In addition to displaying accessible parking spaces, the ability to view inactive parking spaces (spots that don't have any extra capacity or the owner has turned off the receiving request feature at that moment) was added as the users wanted to see all existing parking spaces so that if they liked one of the inactive spots, they could check the parking status later and make a reservation then.

Artboard – 12.png

  • The selection of vehicle type for the spot owner was redesigned for a better user experience

Artboard – 11.png

  • The payout details were added to the wallet to prevent confusion about the payout timing

Artboard – 10.png

  •  The sessions icon was changed to match the expectations of the users

Artboard – 9.png

Reflection and Key Takeaways

What did I learn?

Designing the app has been a challenging and rewarding journey. I understood the needs of the users through the play store review, interviews, and usability testing. Finally, I faced the challenge of creating an engaging app both from the user experience and the Managers perspective.

  1. I’ve realized that a product development cycle can’t be linear, as once in a while you discover something that needs re-evaluation and iteration.

  2. More iterations for improving the design by taking regular user feedback.

  3. I understand that the actual development of the product can have multiple technical and financial constraints that may change the designer’s ideal flow or solution.

  4. The learning process is continuous….

landing4.png

Next project

Dipup Website

bottom of page