Designing a New Touchscreen Parking Meter

This is a design challenge given by Shopify.

The Challenge (given)

Some new touchscreen parking meters are being installed throughout your city (Vancouver, in my case). There is one meter for every 6 parking spots. Design the touchscreen interface so that drivers can pay for their parking spot for a certain duration, and parking attendants can give tickets to cars who do not pay, or whose parking has expired.

Constraints

• The machine has a single touchscreen. There isn't any kind of pinch and zoom, hard press or advanced touchscreen functionality supported.

• The parking meters can accept credit card payments, but are not otherwise connected to the internet and are not Bluetooth enabled.

Goals

In this scenario, I'm designing for the city of Vancouver. Before diving into the design process, let's clarify the goals and objectives.

Business goals

As the British Colombia government, main business goals for this project will be to:

• Maintain a smooth flow of traffic throughout Vancouver
• Manage parking to balance the needs of residents, commuters, and visitors

Reference: City of Vancouver website

Product objectives

The new parking meters should:

• Have a system that is usable, accessible, and useful to drivers and also parking attendants
• Make the car parking process easier while keeping a high level of security

The Process

For this design project, I took those steps below to design a user-centred product.

1. Research & Empathize: current state, field study, user interview
2. Define & Ideate: personas, user flow, task flow, assumptions
3. Design: sketch, wireframe, prototype
4. Usability testing & Iterate: usability testing, iterate

1. Research & Empathize

My first step was to do some research and user interviews to empathize with the current users and understand the problems.

Parking meters installed in downtown Vancouver

- Parking in the city

People have some options of where they can park in downtown Vancouver; 1) free street parking, 2) street metered parking, 3) public pay parking lot, 4) parking lot at shopping malls. Bus and train are very commonly used in the city as well.

- Other

In Vancouver, as it’s called “Raincouver“, it rains a lot in winter.

2. Define & Ideate

From the research results, I defined the problems. The biggest problems that should be solved are;

1. Complex parking meter design slows down the payment process
• When one parking meter covers a group of parking spots, users sometimes have to wait for other people to finish the payment at the meter.
• Some people don’t know where to start but some meters don’t clearly show instructions on it.
2. Normal touchscreens can be hard to see and properly respond outdoors depending on the weather condition. (Especially in Vancouver, it rains a lot in winter.)

Although the problem 2 is fatal for the product design and user experience, I can only design the touchscreen in this project, so I will just hypothesize that this screen will be a waterproof touchscreen made for outdoor use. So, my problem statement here is;

“How might we make the payment process as smooth as possible for every user?“

As for the usability of parking attendants, I couldn’t find an interviewee, so I assumed their problems and solutions.

All the problems and assumptions are in this sheet

3. Design

Now that I defined who I was designing for and what problem I was trying to solve, I moved on to the interface design for the touchscreen. After sketching, I created wireframes and a prototype. Here’s the first version of the prototype.

4. Usability Testing & Iterate

After creating the first low-fidelity wireframe and prototype, I conducted usability testing on 7 people. And from that, I could gain some points to fix on my design such as

• price is not shown on the screen
• some words are unclear to the user
• the ‘Back‘ button needs to be more noticeable at the payment screen (User Control and Freedom — Jakob’s 10 Usability Heuristics)

So, I went back to Figma and updated the wireframe based on the feedback.

You can see the full data of the usability testing in this sheet

Final design for this challenge

Navigating those 4 steps, I finalized my design for this design challenge.

You can check it out by clicking on the image below. This screen will be on the parking meter, and your license plate number is 123456 in this scenario.

1. Each element is big enough to be seen and touched to be optimized for outdoor use.

2. It guides users on what to do for each step clearly so that users don’t get lost.

3. Users can use mobile contactless payment like they do in their everyday life. (I make sure this machine is durable for that.)

4. Keyboard is layout just like computer keyboards nowadays so that people can type quicker.

I created this wireframe for parking attendants. They will see this screen right away when they tap a key to the machine so that they can check the times metered in the machine quickly on the screen.

(If I had more time for this project, I would take more time to focus on their usability. Let me know if you know any parking attendants…!)

A quick reflection

I started this project by myself after learning UX for a couple of months at a college because I felt like this was a good opportunity to try out some design methods and challenge myself with designing a product other than for computers and mobile devices.

The most challenging thing for me was that I got to design only the touchscreen while the experience of metered parking includes all other elements such as the parking layout, signs at parking, hardware design of the meter, etc. During the user interview, I even started wondering if a touchscreen is the best solution for parking meters because normal touchscreens can cause some problems of visibility and sensitivity in the outdoor environment. But for this project, I was supposed to design a touchscreen, so I hypothetically decided to use a waterproof touchscreen made for outdoor use and proceeded with the process!

Also, If I had more time and knew a parking attendant person, I would interview them and focus more on their usability…!

And that’s a wrap, thank you for reading!