Seamless Parking Payments via In-Vehicle Infotainment
Timeline
1 Month
Role
Product Designer (UX/UI)
Responsibilities
Prototyping
UX research
Visual Design
Usability testing
Project Type
Commercial case study,
iOS and Android App, In-Vehicle Infotainment App
This project is a fictitious scenario.
Tool
Figma, Adobe Suite
Overview
In Malaysia, every public parking lot requires payment. Different regions and states have their own parking apps or coupons for charging fees. However, signing up for each parking app often requires an initial debit, adding up to significant expenses. Moreover, the parking standards and regulations vary across different areas, causing inconvenience and confusion for drivers.
Challenge
Simplifying the entire payment process and making it appealing to people of different age groups is the challenge we face.
Solution
Parkpal is a third-party payment software. It not only allows you to pay for parking via your mobile phone but also enables payment directly through your car's In-Vehicle Infotainment system. This allows you to seamlessly pay for parking without having to take out your phone while parked.
Firstly,
Why choose Parkpal when there are already many parking payment apps available in Malaysia? What sets Parkpal apart? Here are the services that Parkpal offers:
Save your time
When you park, Parkpal prompts if payment is needed and provides parking details. With In-Vehicle Infotainment, you can make payments without using your phone.
Remote Payment
Wish to pay for other family members? Even when not on-site, you can remotely make payments directly for your loved ones.
Never Forget to pay your Parking Fee
Integrating with your car's In-Vehicle Infotainment, Parkpal detects when you park and reminds you to pay.
One App for Nationwide Access
In Malaysia, different regions have their own parking apps, and some areas require parking coupons for payment. Parkpal acts as a third-party software to handle parking fee payments to the respective city councils.
Scan and Start Paying
Bought a new car? Scan the QR code for automatic link car and access to car info, no manual input needed.
Feedback Reporting System
Got Parking Area Issues? Report Directly to Improve Parking Services.
Then,
I want to talk about why I wanted to create this app.
This is a problem I frequently encounter:
And, normally this cause me 15minutes to settle this
And, normally this cause me 15 minutes to settle this...
Observation
Elderly individuals are reluctant to sign up for parking apps because it requires an initial debit. Consequently, sometimes only one person in a family has a parking app account and is responsible for making payments. However, drivers may not always know where they have parked. This can be frustrating for the person responsible for making payments, as they may not know which area's parking fee to pay.
8 out of 10 interviewers reported encountering this issue.
So I'm considering the possibility of allowing the elderly to make payments independently without causing them or others any inconvenience.
Besides, to ensure this parking app meets the needs of the general public, not just a specific group, I established goals and a design process.
Heading
High Level Goals
01.
Design an app that solves common parking issues for the public, making them willing to use Parkpal and boosting its user base.
02.
Enhance the overall parking process to allow the public to report issues and improve the service as a whole.
Design process
I first plan out the required design steps and then allocate time for each stage, ensuring that I can control and complete the project within the deadline.
1. Conduct User Interview
- I interviewed 5 users, all of whom are drivers.
2. Summarize Personas and Craft The User Journey
- Summarize 2 personas.
- Creating an affinity map to summarize the priority order of opportunity points.
3. Ideate
- Create happy path user flow.
- Brainstorming how to seamlessly facilitate payment completion for users.
4. Information Architecture and Wireframing
- Setting up information architecture.
- Create user flow and wireframes to make sure the interaction flow is smooth.
5. Prototyping
- Develop an in-vehicle infotainment interface as well as iOS and Android interfaces for this app.
6. Usability Testing
- 5 people participated in the usability test.
Research and insight
My main goal is to understand the public's perspective on parking to avoid making the final product too subjective. Therefore, in addition to interviewing users, I also explored Malaysian drivers' complaints about parking through newspapers, news articles, and Facebook forums to understand the majority's perspective.
User Interview and research
I have an idea: putting a QR code on the car's windshield so traffic enforcers can scan it to see if the parking fee is paid. This way, we won't mistakenly get fined.
An individual who filed a complaint in the news
"Sometime the City Council system is not synchronized with the parking app, fines may still be imposed even if payment has been made. Showing the parking receipt still cannot help in this situation."
Having a feature that detects you're parking and reminds you to pay is quite appealing.
One of the interviewees said
"Sometimes, in a hurry, I forget to pay the parking fee. When I remember to do it, I've already received a fine."
All respondents find it inconvenient to use different parking applications for each area.
Empathy Map
Starting with a WHODO exercise, I identified drivers and outlined all of the actions they typically undertake. Following this, I conducted an empathy mapping session. This allowed me to delineate their current pain points and explore potential opportunities for improvement or gains.
Persona
To help communicate information about users that I collected during research, I created 2 personas.
Individuals proficient in using mobile devices and primarily responsible for paying parking fees for family members.
Drivers who are not proficient in using mobile devices and unwilling to register for new accounts.
Affinity Map
I categorized my findings into three categories based on user needs and business value: process efficiency, integration of parking information, and creating a stable and trustworthy app. These findings were then organized on an affinity map to understand their relationship and determine priorities moving forward. With the short timeline for this project, it was crucial for me to identify areas to focus on that would provide the greatest benefit to the app.
Pain Point
Process efficiency
It’s hard to help your family members to pay the parking Fee.
Easy to forget to pay the parking fee.
Every time you drive a different vehicle, you need to apply each time.
In some place, parking app is no an options. So we have to buy coupon.
Pain Point
Lack of parking information
Parking information in different state is no clear or not state in the parking area.
The marking in the parking lot had faded but hard to inform government.
Pain Point
Product problem - Users lose confidence in the app
The government’s parking system suddenly becomes unavailable.
Accidentally pressing the wrong button without any warning, ended up paying a hefty sum.
Paying the wrong amount due to not noticing the license plate number.
Opportunities
A feature that can detect your family member’s car location.
Add a reminder feature when the car is parked.
Be a paying platform between drivers and the government. Create an unified payment institution. Drivers can pay parking fee easily and city council also can receive the money from digital transaction.
Make the payment process seamlessly.
Opportunities
Automatically locate the parking position and display relevant information about the parking spot.
Provide feedback mechanism
Opportunities
Store transaction details in the app and make it accessible in real-time to traffic officers.
When it doesn't make sense, a warning should pop up.
Show the picture of the Car when making payments.
Ideate
The current parking apps in the market have already addressed the payment issue. Therefore, I am considering whether there is a new interactive mode that can address my original idea while effectively solving other users' pain points.
Next, I thought about what mediums users would use throughout the entire user journey. At that moment, I considered the in-vehicle infotainment system in cars.
This is the happy path I envisioned：
For car owners with in-vehicle infotainment systems and GPS trackers:
The app can detect parking and prepare parking information, allowing users to directly select parking duration and make payment.
For car owners without in-vehicle infotainment systems but with GPS trackers:
The app can automatically record the car's location to facilitate payment.
Creating User Flow
This project involves two types of devices: a mobile phone and an in-vehicle infotainment system.
The mobile app serves as an electronic wallet and also a payment system for vehicles without in-vehicle infotainment:
Allowing users to reload money.
Transfer funds.
Set parking duration and payments.
Extend Parking Duration.
Scan and link car.
The in-vehicle infotainment system serves as the payment system:
Parking detect sensor.
Set parking duration and payments.
Wireframe
The interfaces for both devices are different, with a focus on ensuring that the in-vehicle infotainment interface does not distract drivers and is easy to navigate. Additionally, to prevent accidental touches by children, payment requires swiping a button to complete the transaction.
The interface of the mobile app not only allows users to set parking duration and make payments, but also includes a photo of each vehicle. This is because many families in Malaysia have the habit of assigning the same license plate number to each car. Including a photo of the vehicle makes it easier to distinguish between them.
Branding Choices And Design
Parkpal is a parking application that can detect the parking status of drivers and prompt them to pay. Therefore, I chose blue and red as the color scheme for the logo. In non-parking situations, the logo color is blue, while a red warning light appears when parking is detected. The logo animation hints at this concept.
In addition, I also designed a small character to represent communication between the app and the users.
After obtaining the data and conducting research, I developed an iOS and Android app along with an in-vehicle infotainment system interface.
Animated And clickable Prototypes
I develop an in-vehicle infotainment interface as well as iOS and Android interfaces for this app. Because different devices are responsible for different functions, I listed down the functionalities of each device and showcased them in the animated prototypes. These functionalities are also operable in the clickable prototypes.
In-Vehicle Infotainment
View Prototype >>The first time you watch, please press "restart" to view the full prototypes.
Because the program takes time to process, please wait a moment after clicking the button for it to respond.
In-Vehicle Infotainment Function Showcase
Here are the features provided by the In-Vehicle Infotainment system, including the Payment Duration Check feature, to prevent users from accidentally paying excessive parking fees.
00:00 s - 00:20 s
Make Payment00:20 s - 00:46 s
Payment Duration Check00:46 s - 00:56 s
Delete Payer
Something interesting I want to share 💡
I found that in Figma, if there are more than 3 states in the if condition, the prototype will break. It works fine the first time, but after reopening, there will be bugs.
For example, the code inside the red box, like this program should include #min>=30 because parking overdue is only considered after 6:30 pm. However, adding an extra state causes errors, so it wasn't included.
Mobile Link With In-Vehicle Infotainment
View Prototype >>Mobile link with in-vehicle infotainment
With this feature, users don't need to manually input vehicle information, saving them time.
Besides, users can first make a payment using in-vehicle infotainment and then extend the parking duration using their mobile devices.
Mobile App
Mobile App Function Showcase
The mobile device acts as an electronic wallet, facilitating monetary transactions, paying parking fees, and extending parking durations. I have developed iOS and Android apps.
00:00 s - 00:21 s
Set parking duration and make payment00:21 s - 00:32 s
Extend parking duration00:32 s - 00:50 s
Reset parking location00:50 s - 01:11 s
Manually add vehicle information01:11 s - 01:26 s
Reload balance
01:26 s - 01:50 s
View parking history01:50 s - 02:09 s
Check transaction history02:09 s - 02:39 s
Transfer money02:39 s - 02:52 s
Feedback mechanism02:52 s - 03:03 s
Check Notification03:03 s - 03:38 s
Setting
Something interesting I want to share 💡
An observation
This is the first prototype I did. I want to save users' time so I consolidate setting parking time, selecting payer, and completing payment into one screen. However, users found the crowded interface confusing initially. So, I've learned that guiding users step by step to complete tasks correctly is more important than saving time.
Figma Files
If you'd like to view high-resolution images, feel free to visit my Figma file. Any questions or suggestions are welcome, please feel free to contact me.
Usability Test
I interviewed a total of 5 participants for the usability test. Since there were two devices involved this time, I prepared a smartphone and a laptop. The smartphone mirrored the interface of the Parkpal mobile app, while the laptop displayed the interface of the in-vehicle infotainment system. I also designed some tasks for the participants to perform. Below are the results of the usability test.
For In-Vehicle Infotainment:
1. You are now Neko. You need to input new car information into your Parkpal app on your phone. Based on the instructions in the app, can you understand how to connect with the car and successfully link it?
2. Can you successfully switch to your name and make the payment?
3. Please test parking for a duration that exceeds the allowed time. See if the app displays a warning. Do you find it clear?
4. Please try to see if you can remove your information from the in-vehicle infotainment interface.
5. Please try to see if you can set the parking duration and make a payment using the in-vehicle infotainment system.
For Mobile Phone App:
1. Can you use the mobile app to set parking duration and make payment?
2. Can you modify the parking location and make payment?
3. Can you view detailed information about the parking location, including pricing, time, and other notices?
4. Can you add credit card information using the mobile app?
5. Can you transfer money to others using the mobile app?
6. Can you filter and view parking records using the mobile app?
7. Can you manually add car information?
8. You notice that the parking time is about to expire. Can you use the mobile app to extend the parking duration?
My idea is to use the vehicle's location information and parking sensors to detect if the vehicle is parked. However, it's important to collaborate with other professionals to research better methods.
One of the interviewees said
"I quite like paying directly in the car, so I don't need to take out my phone. I'm just wondering how it will accurately detect when I'm actually parked."
That's a great suggestion! I feel that I need to understand the habits of children and gain further insights from parents.
One of the interviewees said
"The payment button in the car, although activated by swiping, might still be prone to accidental presses by children. A better approach would be to require entering a PIN number for confirmation."
Key learnings
This is my first time developing an app, and throughout the process, I've learned a lot and encountered many questions and problem. Fortunately, the internet provides abundant resources where I could find most of the answers. I hope to further immerse myself in the UX team and collaborate with other UX designers and engineers to solve more UX challenges.
Here are the key learnings I gained throughout the entire process.
· The payment process flow should avoid being too short
Previously, in an attempt to simplify the payment process, I combined several screens into one, including selecting parking duration, choosing the payer, making the payment, and completing the payment. However, this made users feel uneasy. Moreover, presenting too many options on a single screen caused confusion as users couldn't discern what action to take next, leading to inconvenience.
· The importance of collaborating with professionals from different fields.
There are many technical aspects to consider and overcome with this parking app. A deeper understanding is needed to address user inquiries effectively.
Something interesting I want to share 💡
In Malaysia, there are as many as 33 million registered vehicles. This means that, on average, every Malaysian owns one car. With such a large demand and user base, there is an opportunity to provide more convenient services to Malaysian drivers. I am looking forward to have the opportunity to collaborate with more professional experts to discuss this topic further.
Next Project
Redesign AllTrails' paywall to increase conversion rates
Next Project
A Responsive Website For Customers To Find Ideal Open Account Solution In 3 Minutes
