SmartPark

An intuitive solution to simplify paying for parking

Role

Sole UX designer

Tools

Adobe Illustrator, Figma, Google Forms,  Miro

disclosure

This project was created purely to demonstrate my skills and knowledge in the field, without any connection to a real company or product.

Jump to final design

Background 💭

How it started

For as long as I've lived on Long Island, a tiny fish-shaped island just east of New York City, I can't recall one pleasant experience at a parking meter. Can anyone? Parking meters have always been the bane of my existence, and I'm sure many others would say the same. The problem stemmed from the design-flawed user interface and overall structure.

INTRODUCING 👋🏼

SmartPark

SmartPark is a redesigned parking meter application that revolutionizes the way you pay for parking.

DEFINE 📚

Problem

Locals need an easy way to pay for parking because the existing parking meter is difficult to use and time-consuming.

Individuals spent time grappling with the process of operating the haphazardly designed parking meter.

Paying with coins

1. Enter space number > 2. Press green button > 3. Insert coins > 4. Input duration > 5. Take receipt

Paying with card

1. Enter space number > 2. Press green button > 3. Insert card > 4. Input duration > 5. Take receipt

Goal

Allow locals to easily pay for parking, shortening the amount of time it typically takes to pay for parking.

The Town of Islip community needs a solution that incorporates a user-friendly interface that makes paying for parking seamless.

RESEARCH 🧪

Research

20 local residents were surveyed.

How bad is this problem really? To gauge users' experiences using the existing parking meters, 20 Town of Islip residents were surveyed.

Findings

The steps on how to pay for parking are confusing and time-consuming.

When it’s time to pay, users don’t know where to look on the meter to continue.

Entering the amount of time to park is the most difficult step to users.

The parking meter is not useful to non-English speakers.

Most users think an entirely new machine with a touchscreen would be easier to use.

The screen is difficult to see.

themes

Users are unsure how to use the existing parking meter.

Solution: Reduce cognitive load

The existing parking meter is haphazardly designed.

Solution: Grouping related elements to give meaning

The existing parking meter can't be used by everyone.

Solution: Implement accessibility-focused features

IDEATE ✍️

Target users' frustrations

The research findings impacted the direction. The sketches evolved into wireframes, which eventually became a low-fidelity prototype.

Wireframes

Solution: Reduce cognitive load

> Centralized touchscreen display with all elements

Solution: Grouping related elements to give meaning

> Progress tracker

Solution: Implement accessibility-focused features

> Accessibility widget

> Option to change language

Solution: Grouping related elements to give meaning

> Placing text and icons within buttons to signify a call-to-action

Solution: Reduce cognitive load

> Animated element that indicates where to insert coins

Solution: Make it accessible

> Large font size and color contrast in order to maximize visibility

* Noted as being the most difficult step by users

Solution: Grouping related elements to give meaning

> Placing icons within buttons to signify a call-to-action

* Noted as being the most difficult step by users

Solution: Reduce cognitive load

> Animated element that indicates where to insert or tap

Solution: Reduce cognitive load

> Provide the parking details for users to ensure that they’re correct

Solution: Grouping related elements to give meaning

> Placing text and icons within buttons to signify a call-to-action

User testing 👾

Prototype

The lo-fi prototype allowed me to explore how a product will function and how a user will move through the flow, without having to design every detail.

Test & modify

By conducting moderated usability studies, I assessed how easy or difficult it was for users to complete the core task, which was to pay for parking. The overall user experience appeared to be sufficient enough to move forward without any massive changes. All the users completed the core task with ease.

I needed to rethink my approach.

There was something I was missing. I approached the usability studies with a different mindset. Instead of directly instructing the user to perform a task, I'll make them think about how to perform the task.

Example

Before

“Input a time of 2 hours and 15 minutes to park.”

After

“The time now is 6:20 AM, and you need to leave by 11:50 AM. Input the correct amount of time you need.”

“You have $2.25 to spend. Input the max amount of time you can pay to park.”

Viola!

By changing my approach and allowing users to think through tasks, I uncovered pain points in the new design.

set time (w/ credit)

45s average time-on-task

Time-on-task increased by 800% from the original usability study, which averaged 5 seconds.

insight

Users spent a long time calculating how long they needed to be parked.

The new design lacked helpful elements that could impact users’ desired parking time, such as the current time and rates.

Updates:

> Current time

> Dynamic display
of expiry time

> Financial elements
(rates & cost)

Set time (w/ coins)

100% user error rate

100% of users were unable to input the max parking time available with $2.25, because the total cost wasn’t shown on the screen.

insight

Users lacked awareness around specific details.

Details, such as the parking spot #, weren’t present on-screen, so the user would never know if they were incorrect. Also, there was no option to revise these details.

Updates:

> Parking spot #

> Edit option

Types of accepted credit, which is always displayed during any transaction, weren’t shown when the user would pay.

Updates:

> Accepted credit

FinaliDesign ✨