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 page 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.

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, while work hours were restricted to my daughters nap schedule.

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.