Project Info
Type App Design
Tool Figma / Adobe Xd
Time 20 hours
Year 2020 / Sophomore Year
Purpose School Project
Academic Project | 2020
App Design
MTA Subway App
01
How did I approach this task?
01 | Background Research
02 | Color Palette & Visual Elements
03 | User Flow Map
04 | Wireframes & Prototypes
01
Background Research
Identify the problem and pain points of our key user profile.
During the pandemic, New York City’s transit service and subway schedules have been hampered by changing policies and disease rates.
We sent out 45 surveys, as an outcome, residents of the city are plagued by three major problems: 01. frequent changes in health policies, 02. delays in subway schedules, and 03. the number of cases in destination areas. We hope to design an App to fill this market gap.
We were inspired by the New York City subway map designed by Massimo Vignelli. We hope that our visual system can be consistent with the real subway signage design, so that people can quickly understand and choose the line they want to take.
02
Color Palette
& Visual Elements
Design a constant visual theme that correspond with the prompt.
03
User Flow
Design
Based on our feedback from user survey, we constructed 4 major features:
01. Browse and select a subway line;
02. Add the line to your favorite for a shortcut;
03. Check the number of Covid case per day along your trip.
04. Keep updated with the newest policy.
We sketched out the user flow, construct the pages in Adobe XD.
We conducted 15 user testing and refine the model based on the feedback.
04
Final
UI Design
Home Screen
Tap the 'General Info' to check recent updated info by each trains. Use 'My Account' to sign-in or sign-up. Use 'COVID-19 Information' to see the recent updated info posted by MTA. Tap to see your 'Favorite Lines' after signing in or tap to see the instruction of adding favorite lines.
Train Selection
All lines are listing on this page. Scroll and tap on the train you're looking for. The chosen train will highlight in its own MTA color. To move forward, double-tap on the line, or tap <next>.
Train Updates
Each train has its own page with a map and additional info listed below. To check Covid-19 cases in the area, zoom-in and out the map and tap on black dots along the selected line. To add this train to your favorite, tap on the star on top right. To check updated infos about selected line, swipe down the bottom section.
Covid-19 Info
This page includes recent updated MTA COVID-19 Infos. Lock-down policies and MTA services during the pandemic era changes frequently. All users have access to this page from home screen.
Favorites
Save your most frequently used trains to your list of favorites. Simply enter the Favorites page from home screen. This enables user to get to their favorite train page within 3 taps.
Final Product
