Frame 10.png

OMNY(Public Transportation Contactless Payment system)

Individual Project

OMNY is New York City's new contactless fare payment system. Passengers can use the new fare payment system on all buses and subways with NFC-capable cards and smart devices in New York City. However, OMNY has not launched a mobile app yet.


Mobile Application

My Roles

UX/UI Designer | UX Researcher | Prototyping | Testing


Figma | Miro


Oct 2021 - Feb 2022

Design Process

Identify Problems

Set Project Goals

User Survey

User Interview

Competitor Research


Comparative Analysis Affinity Map

User Persona


User Flows

Style Guide



Hi-Fi Prototypes

Interactive Prototypes


User Testing 

How might we switch users to a new system?

OMNY does not support multiple fare plans and can only use single rides. MTA does not provide a mobile application for managing new systems. Also, the current MetroCard reloading and managing systems are inconvenient.

Convenience, satisfaction, simplicity

More fare plans, the ability to reload the balances anywhere, check transaction histories, resolve a swiping problem, manage an individual account, and increase users’ satisfaction with using the public transportation systems in NYC.

  1. Produced clean design concept

  2. Created dashboard, reloading system, GPS navigator, and bus/subway real-time schedules.

  3. Gained 300+ positive reactions in a global UX Design Group.

  4. Increased user satisfaction by conducting user testing.

User Survey

To conduct surveys via Google Forms to analyze general problems, the necessity of an app, and the preference for a payment system with 22 participants.

Screen Shot 2022-08-02 at 5.07.07 PM.png
Screen Shot 2022-08-02 at 5.12.51 PM.png
Screen Shot 2022-08-02 at 5.07.21 PM.png
Screen Shot 2022-08-02 at 5.07.36 PM.png


of passengers take public transportation 3-5 days a week


of passengers prefer to use OMNY


of passengers have experienced a swiping issue & insufficient balances


of passengers prefer to have ‘30 days unlimited fare plan’


of passengers prefer to have ‘Pay-per-ride’


of passengers prefer to use the current MetroCard

User Interview

To conduct user interviews with 5 participants to analyze the problems and user needs.

Group 5420.png
Competitor Research & Analysis

To conduct competitor research to gather ideas for features on the app.

compe final.png





After conducting surveys, user interviews, and competitor research, I discovered that all users had experienced similar issues with the current MetroCard system.

  • Swiping Metrocard 

  • Difficult to reload

  • Hard to manage MetroCard balances 

OMNY has problems as well. Users would like to use OMNY as the current MetroCard.

  • No variety of fare plans

  • Hard to manage fare expenses 

For competitor research and analysis, SmarTrip, Clipper, and Tap have similar functions that allow users to have multiple virtual MetroCards, various fare plans, and individual accounts.   

Affinity Map

To create an affinity map based on user interviews to organize information for improvement and solutions for the app.

affinity map.png

To create personas based on a survey, user interviews, and competitor research to gather the ideas for the app.

Target Users
User Needs
  • Live in New York City

  • Own a smartphone/ any smart device

  • Take public transportation more than two times a week 

  • Have an experience riding public transportations

  • Age of 20s-40s

  • Check remaining balances

  • Refill MetroCard anywhere

  • Check transit transactions 

  • An individual account helps users to manage their MetroCard

  • Synchronizing with more payment methods such as PayPal, Apple Pay, and multiple credit/debit cards

  • Transaction history helps to solve problems when they have an issue with MetroCard


To create a sitemap to clarify the project goals.

sitemap(revised) - Copy of Sitemap- OMNY 1.png
User Flows

To create user flows to determine how many pages I needed to develop. Below are two user flows that are the essential function of the app.

Omny flow 1.png

User flow - Purchase fare plan

omny flow 2.png

User flow - Quick top up


To sketch based on research and synthesis.


To create wireframes based on the sketching.

Style Guide

To determine the design system with existing official OMNY colors and MTA colors. I chose SF pro for font because it is one of the high readability fonts.

bus inside.jpeg
Image by Edoardo Busti
design system.png
design system.png
design system.png
Hi-Fi User Testing

To conduct usability testing with 5 participants. After usability testing, I discovered improvements, so I referred to users’ insights and revised the app.

user testing2.png
user testing 2-1.png

Users missed the swiping function of the search results. I revised the scrolling function to give an easy way to compare results on one page.

user testing 1.png
user testing 1-1.png

Users wanted to add ‘Top up’ on the fare screen because it was an inconvenient way to go back to the home screen if they wanted to reload the custom amounts. I edited the fare list with bright colors to clarify.

user testing 3.png
user testing 3-1.png

Users felt that it was hard to see alerts, so I edited two separate boxes for each sign to be precise.

user testign 4.png
user testing 4-1.png

Users wanted to have ‘Sign out’ on the setting screen and they wanted ‘Language’ option as well.

Final High-Fidelity Designs

To create and revise based on the research, synthesis, and user testing.

fingal hifi.png
What I learned,

I learned a lot from this project. This project made me think again about how important the research stage is. Through the research, I could frame the design and see users' needs. As a result, I could apply the knowledge I had learned so far while working on the project. 

Next time,

I want to have an interview with teenagers and people who are disabled because MTA provides student and disability discounts, so I want to add this service for them.