Embedded Files
Overview
Summary
PathFinder was created to improve users' experience navigating the seven bus lines running through Washington & State. Public transportation isn’t always reliable or enjoyable. PathFinder is here to provide relevant route information and allow riders to seamlessly purchase and access their bus passes on their mobile device.
Business Requirements
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.
Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.
Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop.
Roles & Responsibilities
Working autonomously as the sole UX and UI designer on this project, I completed all tasks end to end, starting with user research and ending with design solutions. The research and discovery process included competitive analysis, user surveys, and interviews. From there, I developed personas, user journeys, and user flows, sketched out wireframes and their iterations, oversaw brand development, led usability testing, and produced a final prototype of PathFinder.
The Problem
The Washington & State bus stop is growing rapidly. With seven lines and growing, bus commuters are experiencing increased frustration with managing both their schedule and the buses.
The Solution
PathFinder was developed to empower the bus commuters of Washington & State. PathFinder understands its users are busy and wastes no time in providing bus commuters with the most up to date schedule routes and seamless bus pass purchasing experience.
Process
Discovery & Research
Competitive Analysis
I conducted a full SWOT analysis of three leading transportation apps in the marketplace currently. Below are highlights of what I discovered.
City Mapper
City Mapper had obvious CTA's and included pricing methods for different routes, but their interface was busy and the icons were small.
Transit Stop
Transit Stop had a quick onboarding process simple interface, however, the process of selecting a route is confusing.
DC Metro
DC Metro's bottom navigation bar is laid out well, but there are no CTA's and it's laborious to get to the screen with arrival times.
User Surveys & Interviews
I conducted a survey and three interviews. The survey, with 10 respondents, was completed by participants from varying socio-economic backgrounds, occupations, gender, and age. Here’s what I learned:
9 out of 10 of respondents rely on transportation apps to navigate their daily commute
9 out of 10 of respondents said they are interested In receiving notifications for bus delays
7 out of 10 of respondents said they are interested in tracking their buses progress visually in real time
8 out of 10 of respondents are interested in a short cut feature to view their most used or favorite routes
9 out of 10 of respondents are interested in purchasing and accessing their bus passes within an app
User Interviews
I conducted user interviews with participants from my survey that live in large cities and use public transportation regularly. This criteria for users was put into place because these users will provide perspective most in line with who would be using the Washington & State bus app.
Users want the app not only to track the bus schedule, but also to purchase bus passes. This will save them time and allow them to plan ahead for their daily commute.
Users want to use their transportation app to show their bus pass so they don't have to carry a physical card to swipe upon arrival.
Users are frustrated when transportation apps require too many steps and don't allow them to personalize their settings with their favorite routes.
Personas
Based on Insights gleaned from my research, I developed two personas depicting two potential app users.
Information Architecture
High Priority User Stories
As a bus rider, I want to know when my bus is arriving at the Washington & State bus stop, so I can calculate how much time I have to reach the bus stop.
As a bus rider, I want the ability to view future arrival times for any of the seven bus lines (serving Washington & State), so that I know when my bus arrives.
As a bus rider, I want to purchase bus passes ahead of time using an app.
User Flows
I developed this user flow to represent all possible features and flows within the app. A loop is included to represent new users who are learning how to use the app for the first time.
Site Map
The site map was intuitively laid out based on mental models users might already have.
First Draft Sketches
The search bar on the map screen allows users to search for and view route schedules
The account icon allows users to edit their profile, alert settings, and favorite routes
The "hamburger" icon would take users to routes, schedules, favorites, and settings
Lo-Fi Wireframes
My first draft sketches were then translated into the wireframes below.
First Iteration Mockups
My first wireframes were then translated into the first iteration mockups below.
Second Iteration Mockups
After a first round of usability testing and constructive feedback, I pivoted my project in several ways.
The app name was changed from "Rapid Route" to "PathFinder." Majority of users found "Rapid Route" to evoke feelings of pressure and anxiety, while "PathFinder" made them feel confident and at ease.
The color palette evolved to better address accessibility concerns and also to represent a common color scheme for buses and public transportation in general.
The search bar moved to the top of the screen to create a hierarchy of features. The map screen's main function is to allow users to search for different routes.
Prototyping
Usability Testing Tasks
I completed several rounds of usability testing with three different people spanning a wide range of technical abilities and preferences. Here are the tasks they were asked to complete:
Create a new account
Purchase a bus pass
Search for and find a bus route schedule
Accessibility Examined
Several rounds of usability testing provided valuable insights to accessibility concerns...
Contrast & Size
Increasing font size universally and editing color scheme to better account for accessibility
Adding Labels
Adding labels to bottom navigation bar to simplify and facilitate exploration
Enhance Learnability
Altering shapes to make a more clear distinction between an option and an action button
Usability Testing Results
Several rounds of usability testing provided valuable insights...
Calls to Action
Editing and adding copy to better communicate calls to action with users
Mental Models
Adding ghost buttons due to mental models (users experience and knowledge of others common designs) and editing the input fields to more closely resemble other onboarding screens
Surprise & Delight
Changing the options under settings from another monotonous list to a grid of eye catching icons
Final Prototype
Final Thoughts
Key Takeaways
If I had additional time and resources, I would...
Integrate the ability to add a bus pass to Apple Wallet
Include a brief overview detailing the app's features during onboarding
Before completing my first UX project, I was aware of the role empathy and user needs play in developing a product. After completing this project, I learned better practices for designing a product accessible to all users, how to more effectively implement research to eliminating bias, and how to organize all the required information to build my case study and presentation.
Page updated
Google Sites
Report abuse