top of page

项目概况

类型       App UI 设计
工具       Figma / Adobe Xd
时间       20课时

创作年份       2020 / 大二
作品类别       校内作业

AppCover.png

Academic Project  |  2020

App Design
MTA Subway App

01

*项目介绍

这个项目是在大二时做的App设计。
我们小组选择为
纽约市民解决疫情时期乘坐地铁的问题。包括时刻表变动频繁、目的地病例未知等问题。在产品设计过程中,我们发出了45份调研,了解潜在用户存在的问题。在视觉表达方面,我们借鉴了纽约现有的地铁地图和指示图标设计,更利于用户理解。在制作流程时,我们找到了15位同学进行A/B测试,修改路径。
整体项目花费5节课,约20小时,这也是我第一次接触App设计。


* 这个项目体现了我 “关注用户生活品质需求”、“解决当前社会问题” 、 “小组合作顺利沟通” 的工作能力 *

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.

background.png
background-1.png

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.

Screenshot 2023-09-24 at 2.09.33 PM.png

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.

Metro-3.png

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.

Metro-4.png
Metro-2.png

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

其他项目

bottom of page