Commuter Transit App
This is a transit app built for commuters: a simple interface coupled with automated personalized filters to help users find their most personally optimized route and service updates.
2021
Team
1 UX/UI Designer
TOOLS USED
Figma
Photoshop
Google Sheets
Purpose
BrainStation capstone
Duration
3 months through weekly installments
MY Role & CONTRIBUTIONS
User research
Competitive Research
UX/UI design
User testing
Hi-fi & lo-fi prototypes
Interaction design
Branding and concept
Problem Space
Many local transit apps in the GTA don't have systems for real-time updates or query personalization. Users are forced to use multiple apps/websites to fact-check times and service delay details, causing increased drop-off rates due to the clunky process of finding information. How do we make it easier for commuters to find info?
Project Goals
To create an easy-to-use solution that helps commuters efficiently find the information they're looking for.
What does success look like?
This project heavily relies on the idea that success is defined by granting the ability to simultaneously query for personally optimized directions, service updates, and transit conditions within a single query/travel experience.
Design Process
Hypothesis
I predict the solution will be the most effective presented in a simple format that carries only necessary (and supportive) functions as commuters don't care for fluff. We need to gain focus on user mental models to answer why they favour/dropped certain apps.
1 | User Interviews
Many users revealed that the biggest motivations for drop-off were confusing interfaces, unreliability, and poor timing of updates (if any). They favoured apps with low switching costs and quick delivery of relevant information.
Most problems arise in the route consideration and travel stages
2 | Competitor research
During the interviews, users were asked to rate their perception of competitor apps based on different categories regarding usability. By doing this, I was able to determine the format of strong and weak points/features and mental models that our targeted demographic had around them. I tested out the features to understand these points further -- a combination of these key features made their way into my design.
3 | Defining a Persona: The Planner
Personality Traits
-
Always punctual and plans meticulously
-
Prefers planned outings vs. spontaneous ones
-
Able to pivot but would rather stick to a plan
-
Loves personal space and having time for hobbies
Pain Points
-
Dislikes being late, slow updates, and big crowds
-
Switching between apps to find correct information
-
Information being outdated or incorrect
-
Slow updates
Potential Solutions
-
Trusted info pool in-app
-
Providing a scheduling system for daily routines
-
Crowd warnings
-
Real-time tracking of transit vehicles
-
Stagnant and dynamic schedules included
Implications of this persona tells us that we need to create a solution that prioritizes speed and accuracy.
4 | Information Architecture and Taskflow Mapping
To keep things simple, I went with shallow information architecture (see below) as users clearly disliked clutter and having too many options. The search feature will be supported by the automated filter feature. This will allow the user to set up filters that will apply to all future searches to cut down on decision fatigue and increase speed.
5 | Moving from Sketches to a Hi-fi Prototype & Validation
I conducted a Crazy 8's exercise to select a delivery method. Sketches were concept tested then turned into lo-fi wireframes and user-tested. After considering the feedback, I transitioned them into hi-fi frames and conducted more user testing to finalize the views and UI.
Users were able to navigate the happy path on the first go thanks to the simplicity. However, after multiple rounds of user-testing the prototype, I discovered that the visual hierarchy and IxD were lacking. Users couldn't tell what could be actioned or if their actions had been accepted by the system.
Key findings in the lo-fi stage:
-
Needed to inform users that personalized filters are turned on + they have the ability to re-filter without leaving the search experience.
-
Include a map preview of the selected route before starting the route as some prefer visuals in the consideration stage (this would be the prime page to capitalize on feature location).
-
Was compared a LOT to Google Maps.
Key findings in the hi-fi stage:
-
Interactive components needed to be emphasized with higher visual contrast and changing states without being obnoxious.
-
Semantic colours and icons were appreciated and made it easy for users to detect delays/best routes right away.
-
With the context of the UI, the details in the map were lacking and users wanted to see more detail in vehicle location and status. Community reporting could be of use here.
Final Design Solution
The final product provides 3 solutions to make finding information easier:
-
Speed up the query process/consideration stage with personalized filter automation
-
A clean interface emphasizing only alerts, information, and features that will aid in decision making
-
Community reporting to accurately notify the user of vehicle details/status on top of service provider alerts
