MTA UX/UI Redesign
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5a26ecdc9ce843a1da610_Title%20(1).jpg)
Project Overview
Striving for continuous improvement and committed to public quality service, this is The Metropolitan Transportation Authority.
Challenge
The MTA has a lack of structure and consolidation with their digital products, which is very confusing, inaccessible, and frustrating for users.
Solution
Provide a consolidated mobile app, an accessible electronic kiosk, and a digital bus hub and pole for efficiency and easy access.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a687bfab8568ba25c8f615_timeline.png)
The Process
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5891805452f21da7b3582_app_mockup2%201.jpg)
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.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a58b3cc18cfc067a37cd93_Group%204%202.png)
Opportunity Statement
01
We plan to eliminate service uncertainties and alleviate the stress of trip planning.
02
We intend to quickly resolve on-site confusion when commuters are faced with service changes or lost.
03
We aim to ensure the comfort and loyalty of commuters during long waiting periods and delays.
The Solutions
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a58d6112ac7158a50b5e44_SuccessMetrics%2021.jpg)
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.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61917253514f506fbf27e5df_ezgif.com-gif-maker%20(18).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/619174ff462780e04eceec69_ezgif.com-gif-maker%20(19).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61917649767c353fb9987325_ezgif.com-gif-maker%20(20).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5a6c4ec9a45cf3689f876__Subway_shot03_animation%201.png)
Kiosk
A new accessible digital train station system to alleviate service confusion among passengers of all backgrounds.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61917b8c3fb9e7787beaa5fc_ezgif.com-gif-maker%20(22).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/619182d8a46a31686e0b88a6_ezgif.com-gif-maker%20(23).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5a8ed9eefc628dc1e793b_SuccessMetrics%207.jpg)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a59fb3990fad5612d6bfa5_SuccessMetrics.jpg)
MTA Riders - Mobile App
A consolidated app meant to make trip planning more efficient for out of state commuters.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/6191dc013a8d5ac8190810b8_ezgif.com-gif-maker%20(18).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/6191e00c756c4c0292e9363e_ezgif.com-gif-maker%20(18).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5a960c18cfc8fdd3935e4_SuccessMetrics%2016.jpg)
Bus Pole
A renovation of the MTA bus experience through interactive information and accommodating transit resources.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/6191e740f3028a30211fa656_ezgif.com-gif-maker%20(20).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/6191e6968fa52f41f88acf35_ezgif.com-gif-maker%20(19).gif)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61aebb2b662674e30835879f_bus%20pole%20dimensions.png)
The Design System
Colors
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5ae76ec9a451c5e8a3e68_Group%20733.png)
Primary
The main brand colors.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5afa4afc70e0751692ca6_Group%20734.png)
Secondary
Supportive colors used for signals.
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5af626ed9624dd42a91ad_Group%20735.png)
Tertiary
Additional colors used for accents.
Typography + Braille
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5b092e00509372e602501_type%20scale.png)
![](https://uploads-ssl.webflow.com/6143f8d9f00e3d76c225b727/61a5b0fe70ab63174020e057_braille%20scale.png)
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.