Faculty — Commute App

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.

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.

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

2
Final wireframe sketches with interactive feature notes.

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

4
App Promotion video

5
Commute app icon using a map.

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

6
Home Screen

7
Commute Route Screen

8
Alert Screen

9
Map Screen

10
Commute Route Screen (Cloudy/Snow/Foggy)

11
Route Configuration/Setup Screen

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.