2550 Stephens St.
Vancouver, BC  Canada V6K 4K4
+1 604 565 0382
info@studiofaculty.com
M–F / 900am–500pm
2013

Commute App

www.thisiscommute.com
Developer: Ben Wu

BACKGROUND

In our first year of running the studio, we found a studio space located right at the corner of Cambie St. and Water St.—across the iconic steam clock in Gastown. Commuting to and from work from outside the downtown area, it was often needed to check multiple bus schedules to make sure we caught the best ride to our destination. We found this as an opportunity to offer a solution that was not available at the time.

 

DISCOVERY

We began recording our use cases and scenarios for our every commute. This helped build the framework for the project and highlight the main objectives we wanted to focus on. The primary issue we wanted to address was the ability to personalize a list of bus routes and be able to quickly check all their arrival times in a matter seconds. Some features we focused on included the ability to set a timer, a real time GPS tracker of the bus location, and options to set up personal routes.

Faculty-Vancouver-Commute-App-Design-8wFaculty-Vancouver-Commute-App-Design-7w

left: Commute app icon using a map.
right: Commute app bus arrival time page display.

Faculty-Vancouver-Commute-App-Design-Process-1w

Design Process

Final wireframe sketches with interactive feature notes.

DESIGN

Web 2.0 was the standard at the time with a clear display of options, menus and guidance to the user. In light of this, we wanted to create an interface that was more subtle and intuitive. Our desire was for the interface to be second-nature once a user used the app for a period of time. In addition to the bus related features, we also included an indication of the weather through the colour of the background. Depending on the weather, the background would either be bright blue (sunny), dark blue (rain) or grey (cloudy). The background was also sectioned into gradations of the colour to note the time remaining before bus arrival. In this way, we were able to use a subtle approach to visually indicate information without any need for the user to act.

 

DEVELOPMENT

Much thanks to our friend and local developer, Ben Wu, we were able to translate our design into a real product. Ben was instrumental in executing the right animations and transitions we imagined—all of which are vital to the overall experience of the app. An interesting part of the project was the fabrication of the sound effects for the buttons. We explored various possibilities and referenced different sounds used on existing apps. Ultimately, we recorded the sound of a ping pong hitting the racket to use as our sound indicator.

Faculty-Vancouver-Commute-App-Design-Process-2w

Development Process

Collaborating with Ben Wu, we built the Commute app with Apple’s XCode.

Faculty-Vancouver-Commute-App-Design-Process-3w

Design Process

Inspired by the colour of Vancouver’s sky, the colour palette represents sunny, rain and cloudy/snow.

Faculty-Vancouver-Commute-App-Design-1w

Commute App Home Screen

Preset commute routes are accessible on the home screen. Users can find his/her commute route information with only one tap.

Faculty-Vancouver-Commute-App-Design-3w

Commute App Commute Route Screen

This screen displays the time remaining until the next bus arrives at the user’s bus stop (real-time via Translink).

Faculty-Vancouver-Commute-App-Design-4w

Commute App Alert Screen

User can swipe up the screen to set an alert. For example, if the user knows it takes 8 minutes to walk to his/her bus stop, he can set an alert for 10 minutes. This way, he/she will know when to leave his/her house on time.

Faculty-Vancouver-Commute-App-Design-5w

Commute App Map Screen

Viewers can also access the Map Screen to locate how far away is his/her next bus.

Faculty-Vancouver-Commute-App-Design-2w

Commute App Commute Route Screen (Cloudy/Snow/Foggy)

We wanted to include a subtle display of the current weather so users can be prepared before leaving the house or workplace. A light blue screen represents sunny weather, grey represents cloudy, snow or foggy, and dark blue represents raining.

Faculty-Vancouver-Commute-App-Design-6w

Commute App Route Configuration/Setup Screen

Users need to enter the bus number and address to setup their bus route.