Departing - A public transit web app

During my parental leave I found myself with a little down time while my daughter took naps and after she went to bed at night. I took this opportunity to develop a small webapp for the Stockholm Public Transit System (SL) using their open API.

This case study is not yet complete and is updated on a daily basis.

My role

Visual designInteraction designDevelopmentNap enforcementDiaper changesPlaydate arrangement

Background

Existing apps for checking departure times were clunky and required alot of manual input and typing. For a “trip optimizer” like myself, who wants to get to where they’re going as fast and efficiently as possible, they simply weren’t cutting it.

Existing apps

Two of the most popular apps in the Appstore relied heavily on text input and advanced search options.

The problem

Stockholmers are constantly chasing minutes, especially when it comes to their commute. Making the right train or bus can shave several minutes off of your commute! That’s right, several minutes. That’s huge!

Perhaps even more important than enjoying those extra minutes of your non-commuting life is the feeling of a perfectly timed and synchronised commute. It has the potential to set the tone for the rest of your day and ensuring you arrive at your destination in a good mood.

Key insights


1. Minutes matter

People running and diving through closing subway doors is a common site in Stockholm's subway system. People are willing to risk life and limb in order to avoid waiting 2 minutes for the next train. Opening up an app and typing in your current location and destination does not fit into this context.

2. A busy platform at rush hour is neither the time or the place to stare at your phone

Spending time typing and staring into your phone while trying to navigate a busy place like Central Station is not a good experience for you, or your fellow commuters.

3. You might not think to plan your trip until it’s time to leave

As you’re stepping out the door you might wonder if you should walk, power-walk or opt for a light jog in order to time the buss just right. Having to fumble around with an app, typing in the names of stations defeats the purpose as you spend several minutes staring and tapping at your phone.

4. People only frequent a handfull of stations

We all move in predictable patterns, and in a typical week we might travel to an average of 6 different stations. We might not always make the exact same trip, but our trips tend to involve the same stations. Therefore relying on the lists of “recent searches” or “favorite trips” that current apps provide is rarely useful. The lists tend to become long when considering the wide number of trip combinations that are possible with only 6 stations (30 possible trip combinations).

Hypothesis


Existing apps are too cumbersome to be useful in crowded and "on-the-go" contexts

There is a plethora of apps that allow you to search and plan your commute. But they all require lots of typing or scanning through lists of “recent searches” and "favorite trips".

“By creating a UI that allows the user to spend less time in the app will provide a better experience and could help shorten the user’s commute.”

Interaction design

The success of this app would be fully dependant on the interaction. There were tons of apps on the appstore with the same basic functionality, this app was simply intended to do it better and more efficiently.

Drag and drop layout

A grid based layout allows for a large number of trip combinations.

A drag and drop grid

Placing the users’ most frequently visited stations in a grid and allowing them to be dragged and dropped onto each other created a flexible and powerful interaction pattern. It was easy to use with just one hand and provided a good overview of a large number of stations.

By focusing on stations rather than complete trips, a very large number of trip combinations are made possible. Instead of a long list with common trips the user has taken in the past, the user can now simply drag one station to another to see the upcoming departures.

List vs grid layout

With a grid based drag and drop pattern, all trip combinations are still available but provide a better overview and take up less screen real estate.

Endless possibilities

The grid layout created a limit of a total of 12 stations. Although I knew that most people frequented around 6 stations in a typical week, the app needed to be handle more scenarios to be truely useful.

List vs grid layout

Enter the “Current location” and “New location” icons. The current location icon accesses your geo location and makes it possible to find a trip from the closest metro or busstop without ever having to type. In case you’re going somewhere new and you don’t have the station already on your start screen the new location icon allows you to type in any station or adress you’d like.

Drag and drop layout

“Current location” and “New location” were placed in opposite corners of the layout to increase findability.

Visual Design

SL (Stockholm Public Transit) had just started rolling out their new graphic profile for print and signage at selected stations in the city. It was sleek, modern and dark and I decided to try it in a digital context.

Solna Strand station

Solna Strand was one of the first stations to get the new graphic profile designed by Familjen Pangea. It happened to be the station right by my work.

Embracing the dark

The dark nature of the subway signs felt like it would suit itself well in a digital context as well. In my opinion, Spotify provides an excellent example of a dark UI done right. It is immersive and bold but it lets the content take center stage. My app needed to be task oriented, it needed to be clutter free and the UI itself should not demand any unneccesary attention. A dark UI would lend itself well to that type of requirement.

“Just like Spotify had used their dark UI in order to place their ‘content first’, I wanted to use a dark UI in order to place focus on the users' tasks.”

Colors

Using similar shapes and colors as the physical signage at the stations was not only a stylistic choice but also a functional one. Since the app would be used in the subway and on the move it was important to quickly be able to switch your attention between app and signage to find the right train and platform. Using the same color reduces the cognitive load significantly when swithing between different sources of information.

Solna Strand station

I wasn’t able to find a proper styleguide so I used photographs I had taken while riding the subway.

Color palette

Validating the MVP

It was time to put the concept to the test. I needed to develop a working prototype in order to validate the concept. My daughter's nap schedule provided the perfect time constraint and forced me to prioritize and set realistic goals.

What I learned

Beyond learning the basics of JSON and working with APIs the process of deciding on and validating an MVP taught me alot about product design and development.