项目概况
类型 App UI 设计
工具 Figma / Adobe Xd
时间 20课时
创作年份 2020 / 大二
作品类别 校内作业
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.
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.