MTA UX/UI Redesign

Hand holding smartphone displaying MTA Riders app concept with weather, arrival time, and news, next to a MTA information kiosk.

The Process

Hand holding phone with MTA riders app concept showcasing LIRR tickets outside at a LIRR station

Problem Statement

Our design objective is meant to optimize the process of receiving information on MTA service, schedules, routes, and news.  We are dedicated to providing a more conscious experience as we strive to expand our role in the lives of commuters.

Person wearing a hood and face mask holding a pole inside a bus, with another masked passenger seated in the background.

Opportunity Statement

1

We plan to eliminate service uncertainties and alleviate the stress of trip planning.

2

We intend to quickly resolve on-site confusion when commuters are faced with service changes or lost.

3

We aim to ensure the comfort and loyalty of commuters during long waiting periods and delays.

The Solutions

Braille screen on a subway platform in digital kiosk

Braille Kiosk

Users with visual and hearing disabilities will be able to use this mini electronic braille tablet. The dimensions of the tablet are 9.75 x 7.03”. With vibrational technology and braille keyboard, users will be able to use braille easily. They also have the audio option that they can use for more accessibility.

Gif of Tablet displaying an MTA screen with braille and text reading: 'How may we assist you?' followed by three colorful buttons labeled 'Directions,' 'Information,' and 'Announcements' with corresponding braille above each word.
Gif of Tablet screen displaying Braille text with corresponding letters spelling 'HOW MAY WE ASSIST YOU?' and three colored buttons labeled DIRECTIONS, INFORMATION, and ANNOUNCEMENTS.
Gif of Animated map showing Bx15 bus route with 2 stops highlighted in blue, total 7 minutes travel for 1.5 miles on a simplified line map.
MTA kiosk in subway station showing map along with train lines

Regular Kiosk

A new accessible digital train station system to alleviate service confusion among passengers of all backgrounds.

Gif of flow of kiosk going from welcome page to map where user can get directions
Gif of kiosk screen going through FAQ
Dimensions of kiosk next to a 5'8 figure
Hand holding phone of screen showing MTA riders app concept of homepage with profile

MTA Riders - Mobile App

A consolidated app meant to make trip planning more efficient for out of state commuters.

Gif of MTA riders app where user logs in to their profile and goes to their trip bookmarks
Gif of MTA riders app where user is scrolling through and navigating to their tickets wallet to then go to LIRR tickets
Bus pole concept in front of MTA bus

Bus Pole

A renovation of the MTA bus experience through interactive information and accommodating transit resources.

Gif of bus pole screen going from route to time to stops to audio and text
Gif of bus pole screen showing all the features such as weather, news, and stocks
Dimensions and conception of bus pole

The Design System

Colors

Primary colors of design system - new blue, off white, and black

Primary

The main brand colors.

secondary colors used for signals - green, red, yellow, and orange

Secondary

Supportive colors used for signals.

tertiary colors used for accents - pink, purple, dark blue, dark grey, and medium grey

Tertiary

Additional colors used for accents.

Typography + Braille

Typography scale ranging from display large to body copy
Braille design system with shadow styles

Takeaways

The secret to a great group project is clear communication. Our entire group communicated together very well even though we were remote, which is quite difficult. Our great communication carried our project!

Credit

Design by: Gianelle Leger, Mimi Buan, Sophie Tatarchuk, Miguel Gaspar
Course: CT304
Professor: Christie Shin
Disclaimer - Please note: This classroom project was created for the course “CT304 Design Systems for UX & UI.” This is purely for educational purposes and I do not claim any textual information and/or photos.

Discover more of my work below!

The most brutalist and efficient library

A Webflow library infused with the brutalist way

Just drag, drop and make your first MRR faster

Assets for Webflow builders.

Back to TopBack to Top