Tumbnail.png

OMNY

MY ROLE

OVERVIEW

OMNY is New York City's new contactless fare payment system. Passengers can use the new fare payment system on all buses and subways in New York City. OMNY accepts several forms of payment, including credit, debit, and prepaid cards with NFC capability; smart devices such as the iPhone and Apple Watch via Apple Pay and Android phones; and smartwatches that have Google Pay, Samsung Pay, or Fitbit Pay enabled.

UX Research | UX Design | Visual Design​

PROJECT CONTEXT

(Oct 2021 - Feb 2022)

Mobile App | Solo Project

TOOLS

Figma | Miro

PROBLEM

How might we switch users to a new system?
 

OMNY has not launched a mobile app yet, so it does not support multiple fare plans and can only use single rides. Consequently, many passengers still use the current MetroCard, but they want to use a new system because the current MetroCard reloading and managing systems are inconvenient.

THE SOLUTION

Convenience, satisfaction, simplicity
 

More fare plans, the reloadable virtual MetroCard, transaction histories, no more swiping problems, individual accounts, and more on OMNY.

Recording 2022-10-02 at 14.14.49.gif

1. Home Page

  • Easy to refill the balance.

  • Do not wait in line to recharge the MetroCard at the subway station.

  • More features on the home page (schedules and transaction histories).

2. Fare Plans

  • Select the right fare plans.

  • Pass discounts are available.

  • Choose payment methods for purchasing.

Recording 2022-10-02 at 14.17.55.gif
Recording 2022-10-02 at 14.21.53.gif

3. Directions

  • Give multiple options for the search results.

  • No need to use other mobile apps to find the destination.

DESIGN PROCESS

Discover

Identify Problems

Set Project Goals

User Survey

User Interview

Competitor Research

Define
Prototype
Ideate

Comparative Analysis Affinity Map

User Persona

Sitemap

User Flows

Style Guide

Sketch

Wireframes

Hi-Fi Prototypes

Interactive Prototypes

Test

Usability Testing 

RESEARCH

User Research
 
1. User Survey

I conducted 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.12.51 PM
Screen Shot 2022-08-02 at 5.12.51 PM

press to zoom
Screen Shot 2022-08-02 at 5.07.21 PM
Screen Shot 2022-08-02 at 5.07.21 PM

press to zoom
Screen Shot 2022-08-02 at 5.07.36 PM
Screen Shot 2022-08-02 at 5.07.36 PM

press to zoom
Screen Shot 2022-08-02 at 5.12.51 PM
Screen Shot 2022-08-02 at 5.12.51 PM

press to zoom
1/4

50.0%

of passengers take public transportation 3-5 days a week

54.5%

of passengers prefer to use OMNY

40.9%

of passengers have experienced a swiping issue & insufficient balances

45.5%

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

40.9%

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

45.5%

of passengers prefer to use the current MetroCard

2. User Interview

I conducted user interviews with 5 participants to analyze pain points and user needs.

user interview.png
Findings

After conducting surveys and user interviews, 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

  • Pay more money 

Competitor Research & Analysis

I researched OMNY's competitors to gather ideas for features on the app. In the United States, contactless payment is not a standard system for public transportation.

Research Insights
compe final.png

SmarTrip

Clipper

Tap

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

Affinity Map

Based on research, I created an affinity map to organize information and emphasize user needs and pain points.

affinity map.png
Hypothesis
  • 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

Persona

Based on research, I created two personas that captured the essence of potential users and their characteristics for understanding needs and pain points.

persona 1
persona 1

press to zoom
persona 2
persona 2

press to zoom
persona 1
persona 1

press to zoom
1/2
Target Users
  • Live in New York City

  • Own a smartphone/smart device

  • Take public transportation more than two times a week 

  • Have experience riding public transportation

  • Age range of 20s-40s

User Needs
  • Check remaining balances

  • Refill MetroCard anywhere

  • Check transit transactions 

IDEATE

Sitemap
 

Using the findings as a guide for the app’s context and content, I created a sitemap to clarify the project goals.

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

I created the primary user flows to determine how users take steps for the tasks. Below are two user flows that are the essential functions of the app.

Omny flow 1.png

User flow - Purchase fare plan

omny flow 2.png

User flow - Quick top up

Sketch

I sketched my idea based on research and synthesis.

sketch.png
sketch.png
sketch.png

DESIGN

Wireframes
 

I created wireframes to visualize the structure clearly and clarify the interface's features.

wireframe.png
Style Guide

I created a mood board, then I determined the style guide with existing official OMNY colors and MTA colors. 

bus inside.jpeg
Image by Edoardo Busti
ommy.jpeg
design system.png
design system.png
design system.png
Useability Testing

I conducted usability testing with 5 participants. After usability testing, I discovered improvements, so I iterated my design solutions based on user feedback.

user testing2.png
user testing 2-1.png

1. Complicated Gestures

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.

2. Fare Options

Users wanted to add ‘Top-up’ on the fare screen because it was a more convenient way to reload custom amounts on the fare screen. I also edited the fare list with bright colors to clarify.

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

3. Clear Design

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

Final Design
 
fingal hifi.png

INTERACTIVE PROTOTYPE

REFLECTION

If I had more time, I would...

 
  • Explore more fare discounts 
    MTA provides student, elderly, and disability discounts. I want to research how I could give the same experience to them (i.e., sync with physical Metrocards, multiple Metrocards, etc.). 

  • Explore the details of competitors' products
    Due to location constraints, I could not use competitors' products and then see how they worked. I should be in their service areas if I want to use this app.