OMNI: The new tap & GO payment system for New York’s MTA

Project Status: System rollout started early 2019 — View Live

My Role: Executive Creative Director; Executive Producer; also filled gaps for strategy, copy, UX, and visual design as needed.

Business Context: New York’s Metropolitan Transportation Authority (MTA) rolled out a new, integrated ‘tap-and-go’ payment system for the New York subway, busses, ferries, the Metro-North Rail (MNR), and Long Island Rail Road (LIRR). The system would be capable of accepting smartphone wallets and cards with NFC chips directly at turnstiles—no swipes or tokens required—and include an online portal for managing corporate, family, and individual accounts.

At the time I was running a small design firm, Bright Iron Group, and landed the contract to deliver an overarching design system, plus UX Design, UI Design, copy, and final production assets for a new website, mobile app, touch-screen interfaces for turnstile validators, touch-screen interfaces for new in-station vending machines, and a B2B portal for corporate and group account management.

We had a ton of fun with this project. We got to meet some of the people who made the original New York City Transit Authority Graphics Standards Manual, and worked to carry through their standards into our work. It was a huge honor just to meet them and hear their ideas, and we felt lucky for every moment of their time. And as luck would have it, the subway stations had also just begun a massive interior design overhaul that year. We had the great fortune to meet some of the design team involved with that initiative, and learned how they were working to make those spaces more accessible and navigable for the broadest possible audience of riders—important tenets for web traffic as well. Our goal was to learn from the design culture and heritage that had been carefully wrought over the years by world class designers, and then do our very best to not screw it up.

Accessibility being top of mind, we read up on WCAG guidelines and found various contrast tests and color blindness simulations to make sure our color selections worked for everyone. Our web development team also picked up the most used screen reader equipment for QA engineering. Spend some time browsing your favorite sites or accomplishing an online task with a screen reader and you’ll never let ADA non-compliance slip through your designs again.

As we researched, we started to sketch and collect photos.

Moodboards became Styleboards…

became design directions, themes, and compositions.

We eventually codified a comprehensive design system that was implemented across the mobile app, turnstile validators, and vending machines. Socializing the design system and delivering development assets was no small feat since we were working with distributed hardware and software contractors in different regions for different system components (railroad validators vs. subway and bus validators vs. vending machines, etc.).