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
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
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
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.
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:
After:
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.
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.
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
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
before
after
before
after
before
after
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.