A Product that helps users to check schedules of T-line trains and plan their commute efficiently 

Project Overview

People in big cities or towns rely on public transportation to reach to their destination on time and it is really frustrating when we miss the train or have to wait too long for the next train, that is the reason why Tracking applications and schedule applications which give us real-time updates are being developed, but what if we still miss the train due to complexity of the application? As one of the users of this application we were able to relate to the problem, we wanted to understand how other users are impacted by this and then redesign the application to solve this problem and provide a better and effortless experience for the T-line users in Boston.

My role

Research, Ideation, and UX/UI Design

Duration

10 weeks

Application As-is

Screenshot_20191204-105906.png
Screenshot_20191121-191643.png
480481E3-46FF-4CA5-9AB5-9E78B063E97C.png
Screenshot_20191121-192356.png

No zoom in-out button

Improper alignment of content 

Multiple arrows on the page confusing the users

No information about arrival time of the next trains

Long list of stations with no search bar

Long loading time

(These problems were defined based on our user research described below)

Proposed Solution

Design a usable and understandable schedule page for the users to easily find the schedule times of the t-line.

Design Process

Design button.png
User Research

Usability Testing 

To find out the problem we conducted four usability tests with 2 current users  and 2 New users

  • Users pointed out that they didn't understand what the were Arrows indicating

  • They mentioned that the list of all trains on one card was confusing and difficult to figure out

  • They mentioned it is frustrating to scroll up and down to find the arrival time of the train at a particular station

“It is difficult to check when the train is arriving and when is it departing with the icons” – Participant of Usability Test

User Interviews

UR.png

Personas

We created two personas based on primary users and secondary users, to understand user behavior, goals, and expectations when they face challenges with the application. This helps us to empathize with users. By analyzing our personas’ frustrations and goals with the application, we were able to start ideating solutions.

iPhone X-XS-11 Pro – 3.png
iPhone X-XS-11 Pro – 5.png

Storyboard

Scenario:  Tom's car is at an auto mechanic shop for repair. He has a dental appointment at 11 am and he decided to take T-line to the clinic as the green line station is a 7min walk from his house. His daughter suggested to him the Boston T-map application so that he can check schedules and plan his trip accordingly.

Before:

Storyboard.png

After:

Stoarboard 2.png
Ideation

Sitemap

Based on user research and insights, We proposed some new features to better serve users. Before developing the visual process of our app, we created a sitemap. This helped us to define the component’s hierarchy and its general structure. It also guided us to decide each content location inside the app and how users will navigate through it.

 
 
 
Screen Shot 2019-12-05 at 12.49_edited.j
Design

Wireframes

We came up with several potential solutions to each of the pain points and made some low fidelity wireframes. we included features that were most important and eliminated features that were not useful.

 

  •  The departure time feature was eliminated, as 95% of the users mentioned they really don't bother about it when they know about the arrival time of the next train.

 

  • Although 75% of the users mentioned they didn't use the map on the homepage, we decided not to eliminate it, as the rest of the users mentioned it was very helpful when they didn't have access to the internet.

iPhone X-XS – 1.png
iPhone X-XS – 9.png
iPhone X-XS – 11.png
iPhone X-XS – 10.png
iPhone X-XS – 2.png
iPhone X-XS – 3.png
iPhone X-XS – 9.png
iPhone X-XS – 11.png
iPhone X-XS – 10.png
iPhone X-XS – 5.png
iPhone X-XS – 9.png
iPhone X-XS – 11.png
iPhone X-XS – 10.png
iPhone X-XS – 6.png
iPhone X-XS – 7.png
iPhone X-XS – 9.png
iPhone X-XS – 11.png
iPhone X-XS – 10.png
iPhone X-XS – 4.png
iPhone X-XS – 8.png

User Testing

We conducted user testing with 10 participants. for a total of 15 minutes each. We had participants sit in front of us and go through the prototype. User testing in this phase gave us significant insights into how people would use our re-imagined App on the go.

 

Key findings:

 

1. Users were able to find the schedule of their trains quickly

 

2. Users mentioned that the arrival times of the next trains feature is very useful

3. The Search by location and recommended T-line routes, was an efficient feature.

Visual Design Guide

Visual .png

 The primary colors are the key indicators of the Boston -T line trains and we chose Arial font for body copy and Helvetica Neue for heading because these fonts render well with all sizes, they make the design look soft and friendly.

Mockup Design

T-line application design

before

after

T-line app Design

before

after

before

after

public transport app design
Recommended pages.png

High-fidelity Prototype

 

Reflection:

Working on this project helped me to learn the importance of Human-centered design. I learned how crucial it is to know what user really wants and how a simple Schedule App can meticulously be designed to serve users' demand. Wireframing and iterations on initial mockups, made me understand the importance of implementing feedback. The most important that this project taught me was thatI need to keep testing the product because I will always get great user insights, the things which seem obvious to us can be confusing for our users.