00

OVERVIEW

• OVERVIEW

• PROJECT

• STYLE

• PROCESS

• TIMELINE

• PERSONAS

• WORKFLOWS

• SITEMAP

• TEST

PROJECT

• BRIEF

OMNY is New York's fare payment system for local transportation system. To learn about OMNY, visit https://www.omny.info.

• PROBLEM

EVERYDAY, New Yorkers AND TOURISTS who visit the city FACE PROBLEMS with PUBLIC TRAnsportation. COMMON PROBLEMS such as: subway delays, BUS ROUTES, not knowing how much funds are LEFT on their MetroCards, or how to USE PUBLIC TRANSPORTATION when visiting the NEW YORK CITY for the first time AND AMONG OTHER THINGS.

• SOLUTION

CREATE AN APP WITH BUSINESS MODEL THAT WILL MOTIVATE COMMUTERS TO TAKE PUBLIC TRANSPORTATION AND TO ALLOCATE MORE LOCAL FUNDING TO LOCAL INFRASTRUCTURE AND JOBS.

• CHALLENGE

DEALING WITH A LARGE-DIVERSE POPULATION TO FIND THE END USER AND IDENTIFYING A COMMON problem. AFTERWARDS, create a solution WHILE MAKING THE APP EQUITABLE and accessible for others who also face this SAME PROBLEM IN A MODERN DESIGN.
01
02

PROCESS

MOUSE: HOVER
EMPATHIZE
|LEARN ABOUT THE USERS
DEFINE
|IDENTIFY THE USERS' PROBLEM
IDEATE
|GENERATE IDEAS AND SOLUTIONS
PROTOTYPE
|MAKE IDEAS INTO CONCRETE EXAMPLES
TEST
|EVALUATE THE DESIGN

OMNY app concept

Oct. 2020 - Mar 2021
UI/UX, Strategy
Tools
Xd
Ae
Dn
Ps

Insight

OMNY is a contactless fare payment system, currently implemented for use on public transit in New York City and the surrounding area. When OMNY is completely rolled out, it will replace the MetroCard on the New York City Subway, the Staten Island Railway, PATH trains, MTA buses, Bee-Line buses, and NICE buses.

Idea

The idea arose when I arrived a the train station with my Metro Card hoping to make it to an important photoshoot. At the time, I didn't have my bank card connected to my mobile phone, so all I depended on was my Metro Card. As I swipe my Metro Card and move through the turnstile simultaneously assuming I had enough balance on my card, I didn't have enough funds to get through the turnstile. Not knowing my balance beforehand, I would've made my commute if only I knew ahead of time.

Goal

Create a mobile app to help local New York residents and tourists commute more easily and to increase local revenue after the pandemic.

02

STYLE

HERO TYPEFACE
Apercu Mono Pro
Regular, Light, Medium, Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

TIMELINE

03

BREAKDOWN OF THE DESIGN PROCESS THAT WAS USED FOR THIS PROJECT.

PROCEED WITH SCROLLING

EMPATHIZE
4-6 WEEKS
Dealing with a large audience, I had to venture out to various neighborhoods, subway stations, and ride numerous bus routes to get a better scope of my target audience. I observed many demographics in their communities to see how they live and how they use the public transportation.
SUCCESSES: Learning how different cultures live in NYC.
STRUGGLES: Stepping out of my comfort zone, continuing the project in extreme weather conditions.
DEFINE
2 WEEKS
Seeing how various demographics lived, tourists navigating in the city, reading articles about New Yorkers pains with the public transportation, and MTA's own problems.

Numerous, yet common problems were found; Problems such as:

• Unaware of card balance
• Unaware of delays and closures
• Difference between Uptown & Downtown
• Other apps not being intuitive enough
SUCCESSES: Purposely getting lost to identify problems, being immersed in the city and getting raw results.
STRUGGLES: Identified too many problems, process became lengthy as I saw more problems come into play.
IDEATE
2 WEEKS
After identifying the problems, I then proceeded with generating solutions. I wanted to be unique and create a UI that leaned more towards the future, so typeface and the use of negative space was going to be the two design elements I factored in the most. During this stage of the process, I spent most of time  in the city sketching so I can create unique ideas.
SUCCESSES: Sketching and being away from the computer.
STRUGGLES: Wasted time trying to create rough drafts digitally in the beginning oppose to sketching so I could seamlessly incorporate them into my case study.
PROTOTYPE
6 WEEKS
During this phase, I started with a style guide, and gathered necessary assets that will be used to speed up this stage in the process.

I then proceeded with designing in Adobe XD and started to create my ideas into concrete mockups.
SUCCESSES: Finding my style through films and various video games.
STRUGGLES: Having to find workarounds in Adobe XD when prototyping interactions, narrowing down designs for each screen.
TEST
4 WEEKS
During the final phase, I tested my product out in the field to see how it would do. Adobe XD allowed me to test the app via cloud.
SUCCESSES: Being able to test the app via cloud and allow others to see it through my phone.
STRUGGLES: Dealing with mobile app crashes and design revisions resulted going back to prototyping too many times.
04

PERSONAS

SAMANTHA CLARK

Lucas WEST

Hue Nguyen

Esme & Arthur Blanchet

Diego Santiago

05

WORKFLOWS

OMNY CARD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

BALANCE INDICATOR

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

IN-APP WEATHER SYSTEM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

LOOPING NOTIFICATIONS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

NATIVE SEARCH BAR

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

WATCHLIST

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

SCHEDULE / PLAN TRIP

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

DARK UI

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

OFFLINE MODE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

MORE COMMUTE INFO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

DARK UI

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

06

SCREENS

SITEMAP

07