WORK ABOUT ME

THE FERRY APP

THE PROJECT

Thousands of people take the Washington State Ferries every day, but unlike similar systems like trains or buses, there wasn't  an easy way to find and keep track of schedules, ferries, and cameras. I designed an app that people could use on the go that let them get a route's most important info at a glance and quickly engage in a number of different interactions to help them plan their schedules.

MY ROLE

Thousands of people take the Washington State Ferries every day, but unlike similar systems like trains or buses, there wasn't  an easy way to find and keep track of schedules, ferries, and cameras. I designed an app that people could use on the go that let them get a route's most important info at a glance and quickly engage in a number of different interactions to help them plan their schedules.

CLIENT

The Ferry App

PLATFORM

Android

URL

goo.gl/Kq9caQ

SKETCHING A USER EXPERIENCE

While the concept for The Ferry App seems simple at its core, there is a lot to consider. The primary use case is to view information for a single ferry route, but there are a lot of other important actions - like swapping destinations, selecting different terminals, and saving routes for later - that still needed to be considered. Because of the way people use the app (frequently while on-the-go) and the fact that all of these actions are related, we needed to make them all easily available to the user without distracting them from the main goal of viewing route info.

I spent a lot of time early on in the process sketching out different solutions to help visualize how all of the different pieces of the app might fit together and how they would work.

We had to listen to user feedback and make adjustments based on it, like adding notes on ferries that are foot-traffic only.

UI EXPLORATION

I went through a number of different iterations of the user interface. Part of this was due to a natural exploration of different styles that is present in any project; part of it was due to an evolving list of features and functionality based on feedback gathered from users. Once the app launched, we began collecting feedback from people who used it regularly about what they would like to see added and important features that they felt were missing. We had to figure out how to add stuff to the app in a way that made sense without breaking any of the current interactions or user flows.

These UI directions reflect the limitations of older versions of Android for which they were designed.

UI DESIGN

We settled on a minimalist aesthetic that allowed the actual information to shine. I wanted to be able to use clean typography and ample white space to make it easy for the user to process what they were looking at on-the-go, without making the information density so low that people had to be constantly scrolling to find what they were looking for.

We settled on a minimalist aesthetic that allowed the actual information to shine.

From the dashboard, the user can see the most important, timely info for all of their saved routes. Diving into a specific route, the user can see the upcoming schedule. Related screens, like traffic cameras for that terminal and a map of nearby vessels, are a swipe away. Important related actions, like viewing the complete schedule, swapping terminals, or changing the destination, or available with a press of the "expand" button.

AN OPPORTUNITY FOR MOTION

Animations helped the app feel smoother and more professional. They also served a functional purpose by allowing the user to follow what's happening on-screen. For example, when transitioning from the dashboard to a route detail page, the information slides up into place instead of blinking out and re-appearing. This makes it easier for the user to track what's going on and to follow the loading of the new page. An instant after the route info slides into place, the upcoming schedule loads - this slight delay makes it easier for the user to notice that new information has loaded, because they've had time to see the route info finish sliding up.

NEXT PROJECT:
— YESLER APPAREL —