🚋

Fare Vending + Wayfinding Redesign

Tags
Product DesignDesign SystemsPassion Project
Year
2020

Once again inspired by design giant Massimo Vignelli, I tried to reimagine his design contributions to things like NYC subway signage in the digital age, starting with a ticket kiosk. Then, I designed accompanying design systems to handle in-station and in-vehicle way-finding.

Fare and Transit Card Vending Kiosk Interface

An interactive demo is available here, I invite you to check it out. Click around to see what you can click; the blue boxes will lead the way.

Bird's eye view of the decision flow for the kiosk.
Bird's eye view of the decision flow for the kiosk.
How I rigged the demo to be functional. I promise our working relationship will be less complex.
How I rigged the demo to be functional. I promise our working relationship will be less complex.

Process

Something I kept in mind while designing the interface and user experience were my less than ideal experiences using fare vending machines in the real world. It can often feel punishing, confusing, and clunky. GovTech and local idiosyncrasies are typically on full display. I'm reminded of the existential question that the MTA's kiosk asks; add value? Or add time? I wanted to not only simplify the experience, but to plan for user error, and make making a mistakes a resolvable experience rather than a punishing one. Here's an example.

1 - "Purchase New Connect Card"
1 - "Purchase New Connect Card"
2 - "$15"
2 - "$15"
3 - "Load an existing card instead"
3 - "Load an existing card instead"
4
4

This screen (3) displays after a user has selected to purchase a new card, and specified what amount of value they'd like to add.

The use case I've planned for is someone who already has a transit card, and needs to add balance. Seeing an option that contains the phrase "transit card", they mistakenly select "Purchase New Connect Card". On this screen, they can change user flow to keep the amount of value they specified, but add it to an existing card rather than purchasing a new one, without having to start the transaction over.

Vector Illustrations

Illustrations were needed to serve as simple visual prompts as to what physical actions the user would need to take to proceed, and to represent different concepts unique to transit operators.

image
image

Skeuomorphism never hurt anybody... in moderation, at least.

image

I quite enjoy the Finder-inspired faces on the cash and coins— a personal highlight.

In-Station Wayfinding

Inspired by the general uniformity of airport terminals, and Vignelli's work itself, I designed signage to direct users to services, platforms, and exits, using iconography consistent with the fare vending machines when possible for reinforcement of the visual language.

image

In-Vehicle Wayfinding

I wanted to explore what an effective digital way-finding experience could look like inside a transit vehicle. Visualizing the current and next stop, as well as regularly displaying the train and its direction in an elegant way were my priorities.