PUGET SOUND
TRIP PLANNER
OVERVIEW
Every day 397,000 people commute in King County*, using King County’s infrastructure, and almost none of them are using the Puget Sound Trip Planner (PSTP) app. PSTP is a native app developed by King County Metro to help users navigate public transportation in the Puget Sound region. While the app offers deep and broad information, it has very few users. The app currently has a score of 1.9 on the app store.
PROJECT SCOPE
-
Our team was tasked to improve this app. We chose to design in iOS for the iPhone 7+. A redesign was beyond the scope of the two-week time frame. Through usability testing and guerrilla research we determined that commuters - specifically those who used busses - wanted an accurate way to determine when their bus is scheduled to arrive. By utilizing fundamental UX principles, we were able to redesign the task flow of finding a personalized bus route in the PSTP.
DISCOVERY RESEARCH & PAIN POINTS
Our researcher, Kendall, was unable to find any users of the PSTP app, and therefore conducted guerrilla research on the way commuters use mobile apps to facilitate their commutes. In conjunction with this she conducted a survey of 23 participants to determine how frequently people in King County commute and what types of transport they use.
​
She found that the overwhelming majority of commuters used busses, mainly during weekdays. These insights determined the direction of our project.
​
Since the PSTP app is developed by King County, we expanded the scope of our problem beyond the digital realm and aimed to understand pain points with public transport commuters in general. The main frustrations bus commuters had was inaccurate bus information, late busses and full busses.
​
With this in mind, we aimed to improve the user flow in the PSTP app for commuters looking up bus routes.
​
We concluded our discovery research by deciding that if we display accurate and reliable bus arrival times to users on the PSTP app, we are likely to ease their frustrations with public transport and hopefully create a pleasant commuting experience.
​
The success of our redesign would be measured by an increase in the rating of the PSTP app.
SITE MAP
PSTP offers a wealth of information to commuters. Unfortunately, the app has been grandfathered into the app store, and does not conform to Apple's Human Interface Guidelines (HIG). As such, users found navigation in the app to be confusing because it was non-standardized and difficult to access particular screens.
​
The existing site map is documented below, followed by our proposed redesign.
Although the scope of our project only included one task flow within the app, we did not want to neglect the rest of the information in the PSTP app. I therefore designed the proposed sitemap (above) with global navigation in mind. According to HIG, users need to be able to navigate to all major sections of the app from any given screen.
INTERACTION DESIGN - KEY SCREENS
Before sketching and developing low-fidelity wireframes, it was first necessary for our team to consider the existing version of the PSTP app. As demonstrated by the site map, navigation within the app was confusing and unintuitive. While there is a lot of information to find, it is not always clear to users which paths to take to find information relevant to them. From this point on, we were developing with a single user flow in mind: users were asked to use the trip planner to find a bus route from their current destination to a predetermined address.
With identified pain points and a clear user flow in mind, the interaction designer began sketching and creating low fidelity wireframes. Below are several of her sample screens that I used in developing a high fidelity prototype.
VISUAL DESIGN: STYLE GUIDE
We redesigned the PSTP mobile app to conform to the following parameters:
The King County Style Guide (link)
King County require adherence to their style guide as "custom styling weakens the 'One King County' branding as well as the consistent user experience"
​
Typeface: Open Sans.
​
Icons: Font Awesome Icon Stack
​
Color Palette: PSTPs varied slightly between pages and on it's app. We therefore used the following palette generated from PSTP's homepage.
Apple's Human Interface Guidelines (link)
Navigation was our primary concern with HIG - specifically with regards to the global navigation bar.
Web Content Accessibility Guidelines 2.1 (link)
As a King County Service, the PSTP app needs to conform to at least the AA level of accessibility for visually impaired users. This meant using large font sizes, high contrast and that readability was our highest design priority.
VISUAL DESIGN: ESSENTIAL USER EXPERIENCES
Most bus commuters use an app to determine when their bus is going to arrive.
​
Public transport is bound to using fixed schedules. Hence, when a bus arrives several minutes after it's scheduled time, users have a negative experience. No one likes a late bus.
​
But, when people use Uber, there is no schedule. The arrival time is relative to the user's request.
​
Therefore, as a conceptual project, we proposed that King County place GPS trackers on their busses, and don't share the tracking information with competitors. This will allow the PSTP to manage user's expectations and create a positive experience by displaying the estimated bus arrival time, instead of displaying a static arrival time.
​
This will also give the PSTP a higher degree of arrival-time accuracy than competitors' apps
MEET USERS WHERE THEY'RE AT​
Based on user research, we learned that bus commuters use mobile apps to find out when their bus is arriving.
​
From the users' point of view, it seems like the PSTP app does not tell them when their bus is arriving.
​
The bus arrival time on the existing screen, perhaps the most critical piece of information for the user in their app experience, takes up 0.3% of the screen.
BUS ARRIVAL TIME REDESIGN
​
Using widely-available GPS tracking technology, the PSTP displays the bus arrival time instead of a static scheduled time.
The busses will still follow their given schedules, but users' expectations are managed so that they don't feel like their bus is running early or late - even if it is!
VISUAL DESIGN: KEY SCREENS
Fig3.1 The relevant icon in the global navigation bar becomes highlighted to show users where they are. All major screens are accessible throughout the app.
GLOBAL NAVIGATION
​
As required by HIG, we included a global navigation bar. This helped users create a clearer mental map of how to find information in the PSTP app.
Fig3.2 All search fields requiring text are consistent.
SEARCH​​
​
In early iterations, users' did not recognize the search bar. To solve for this, we included the magnifying glass and rounded the edges of each bar.
​
The 'erase text' button is not visualized here as users were not able to type in the prototype.
VISUAL HIERARCHY
​
In early iterations, users were unsure how to navigate to the next screen to complete their given task flow.
​
To assist users, we aimed to have an effective visual hierarchy by using a prescribed shade of blue from King County's style guide, to highlight the most relevant information on screen.
NEXT STEPS
Aim to improve accessibility:
A separate series of screens that conforms to the highest level of WCAG ensure maximum compatibility.
​
​
Develop screens for alternate user flows: We only designed for a specific user flow, but the PTSP app offers a lot more.​