OMNY

UX UI Design

Problem

OMNY currently doesn't have the option or users to pay for Unlimited payments. Users are now tied between using physical metro cards that could be lost, or pay per ride without being able to budget on transportation.


The Challenge



Design the OMNY mobile app for riding the NYC Subway feature that will allow daily MTA riders access to the metro in a more budget friendly manner, no physical MetroCard required. Users will be able to 


  • Add Balance
  • Ride Unlimited Rides
  • Alerts


Goals


User: Pay for Unlimited, save time, save money/ ride

Business: Increase engagement and retention of daily commuters

Product: Maintain our current earnings structure 


Current OMNY Payments

User Interviews


Determined to create a seamless payment and trips for users, I took the next steps  to further my understanding of OMNY’s target audience, I ran primary research where I interviewed 10-15  individuals who take the MTA frequently and use the Metro Card and OMNY on a daily basis.  
Below are some questions and key pain points that I received.

Questions

  1. What are some downsides would you change to the current metro card and its transaction process?
  2. How often do you use the MTA for ftrasport in a daily basis?
  3. Which card do you purchase the most? Single ride ($2.75), 70-Day unlimited ($33.00), or 30 - Day unlimited ($121.00)?
  4. Do you use commuter benefits from work?
  5. Which of the following would you prefer to use a physical Metrocard or your phone? And Why


Pain points


The answers I received were surprisingly similar to one another. The majority of users interact with the train or bus daily and would prefer a digital card over a physical one. After compiling the research together and studying it, I was able to produce these 3 pain points and my user persona for the project.

Users hate that the vending machines take too much time. Riders have to wait in long lines to buy unlimited rides and pay an extra fee to buy a metro card.  These interrupts  commute and pose as missed opportunities to catch the train

OMNY is super convenient, but users find it annoying how it charges for every single ride, whether it's a short/ long trip, even for transfers.

No subscription or reward points for rides that users use every single day.

Users wanted  more detailed information about delays and show other alternative ways for transportation.

The subway cards, where commuters wish it would be easier to pay and not have to worry about having a physical card or paying for every single ride. Finally, the multiple system commuters. who felt there was a huge cost and connections were difficult.


User Persona

To communicate the insights gathered, I've come up with a user persona to condense  to create reliable and realistic representations of key audience segments for reference.


Framing Jean's POV


We clarified exactly what Jean's point of views (POV) are to help us ideate how we can help her have a better user experience with the website.

POV 1 - Jean wants to purchase a month's unlimited pass because she wants to save money and pay conveniently.

POV 2 - Jean also wants to be able to add balance on her mobile OMNY card just incase her bank doesnt have enough money to pay for her and her friends MTA rides.

POV 3 - Jean wants to track her rides so that she can expense her trips and wants alerts for her daily commute for her rides so that she can get to work on time.

Taking my findings, I decided to design an app that would allow users a quicker, more streamlined way of interacting with the MTA’s MetroCard payment process. This way allows for prepayment for one’s ride before they even enter the subway system that interacts with the near-field communication (NFC) model with just a tap of their smartphone.

No hassle of the archaic MTA machines required. Being that the cards themselves are not tangible can no longer break or get lost.

I gathered the research together and developed a task-flow for how the app would function. Each point would feed into optimizing the checkout process for the users, giving them quick options but also the ability to map out their experience efficiently.

Connecting Research into Information Architecture


A simple navigation is important.


We prioritized the top 4 features from research:


• Filter options for quick and simple ticket reloads

• Consistent photos, reviews, and details about products

• AR feature to try on multiple jewelry

• Seamless checkout

Task Flow & User Flow


Happy Flow

After defining two key tasks that users would want to complete on the site, the steps that they would take to accomplish these tasks were mapped out a happy flow. This happy flow would show the default scenario featuring no exceptional or error conditions.

User Flow

I created the routes that users take when navigating your website or application, for them from browsing the product they are looking for, to trying on the rings with AR, then checking out.

I decided to create a Journey Map for my users to help visualize the individual's relationships with a product/brand over time and across different channels.

I also researched other payment based apps for inspiration on how to set up a seamless check-out process. I wrote down notes about performance, features, aesthetics and so on. 

This led me to think more about the visual direction and how to optimize the user flow aesthetically.

Low- Fi & Mid- Fi wireframes


Using the best sketches, a these wireframes was created in Figma to gain a better understanding  of how pieces of content, features, and pages will be distributed.



Branding & UI Design



OMNY’S Colors

The color palette tributes the NYC transportation, while unifying the initiatives to modernize both the MTA vehicles and ticketing system.

A darker UI also avoids excessive light emission underground. Secondary and tertiary colors were based off Material Design’s dark theme.

Inspired colors from NYC subways

Inspired colors from NYC subway

Hi- Fi wireframes

Here are some wire frames that show the different process pages in order for users to purchase a ticket or add balance to their card.

Sign In / Log In

Info Cards

Home Page

Unlimited Payment Methods

Add to Balance

Payment Method
Alerts & Account

Prototype


In order to determine the ease of use and overall experience with the website, I created a prototype within Figma and ran a usability test with 12 participants.

The goal was to evaluate users’ interactions with the website to identify any pain points, opportunities, and learn about users’ preferences and behaviors.

Usability Testing


In order to determine the ease of use and overall experience with the website, I created a high fidelity to identify the pain points, opportunities, and learn about users’ preferences and behavior.


Here are some questions I asked users to give feedback on my hi-fi frames.

  • Was everything readable on the app?
  • Were you able to find all the information you were looking for?
  • Was the app's theme feel like its Brand (OMNY) feels?
  • What difficulties did you find?
  • Did you find the way the app is structured too complex?
  • Do you think you can benefit from this app?



I used two different methods for usability testing

⌑ In- Person Usability Testing : close friends and family who were able to be nearby

⌑ Monitored Remote Usability Testing : due to covid, some of them had to be remote

Findings

🔸 The Add Balance feature was easy to go through and made sense

🔸 80% Liked how there were other unlimited ride features with description, but felt like there were too many works

🔸 Almost all participants were confused about the unlimited function and adding extra balance to their card

🔸 Majority of the users said that they would like to be able to have it as a reoccuring payment with a reminder

🔸 A user appreciated the alert section where they are able to show alternative routes for users to take when main train isnt available

🔸 7/12 users said that the contrasts in the background color and texts are hard to read

🔸 All users said that the feature is desireable and easy to use

🔸 One of the users who currently do not live in NYC wanted this OMNY app in their state as well because it seems so convenient

🔸 Majoority of the users wanted to use this feature now so that they dont have to keep buying metro cards and use OMNY and pay $2.75 every ride

🔸 Branding and message of platform was over all aesthetically pleasing

🔸 Information is easy to grasp and navigate

🔸 Buying tickets/ un limited rides is simple and straight to the point

🔸 TAs were well spotted and led users to their expected page


Opportunities


🔸 The app itself didn't feel realistic
🔸 Two users wanted to speak to a MTA agent and thought it would be helpful to have direct help when they need imediate help.
🔸 Overall aesthetics were inconsistent, and it hurt users eyes when it went from dark to bright
🔸 50% said that it looked too simple and the design felt it wasnt amplified with no depth
🔸 Almost all participants were confused about the unlimited function and adding extra balance to their card

Because there numerous feedback about how this website didn't feel realistic, I decided to go ahead and redesign it to more simpler and realistic wireframes.

Iterations
‍‍

Revised prototype based on usability testing feed back. I referred back to the affinity map and prioritized the opportunities to make it better.

Over all, most of the users showed that they desired this version more than the previous version.

Final Design
For full prototype: click on Link

If I were to explore this concept further, there are a few additional features I think could be useful. 
A ride where OMNY is available everywhere in the states and where this payment method minimizes the time they have to pay for every single ride using a machine. 
With this opportunity, there will be more users who save and never have to wait in line to buy a physical metro card. Business wise, OMNY will have the opportunity to grow and expand its brand name as the best contactless payments in US.

Also, if I had more time, Id also add another feature that would allow a user to add a friend to their ride free of charge. This feature would charge your friends account not yours, so they would be allowed to swipe through with you without the worry of a double charge with a form of verification code to protect security.


Another feature that would be nice is to create a reward system, where users are able to gain points (coins) kind of cash back way for user to use them to use. This encourages a lot more people to stop driving and use public transportation.


I enjoyed working on this project, and I am excited about seeing the current system in action in the years to come. I think the MTA has a real opportunity to propel the city transit system forward positively.





Thank you for reading, I’d appreciate any and all feedback below!



My Projects

OMNY

Website Redesign for a Smart Home Company

Global Wave Integration
Website Revamp


View Case study

Welltech app platform
for FutureCare.Ai

Healthcare technology that transforming homes for healthier lifestyles for senior care


View Website
Adding a feature to an existing app that will allow users to have the ability to track the frequency and charges on the app. I combined the OMNy system and MTA app to provide the best value to the users and consumer expectations to grow.

Elevating Mejuri's
Online Shopping with
Live Streaming & AR

Real-time human connection with AR shopping.

View Case Study

OMNY

Enjoy the convenience of contactless payment rides


View Case Study