Andrea Wong

Shoreliner complements traditional maps by presenting an alternative method of wayfinding based on landmarks rather than streets. The app provides a key to the structures that comprise Vancouver's skyline when viewed from the water to facilitate place-based learning, discovery, and orientation.

I researched False Creek Ferries’ reputation by searching online for reviews and profiles of their service and that of their main competitor. How do users perceive the service False Creek Ferries provides? Are the ferries a method of transportation, simply a vehicle from point A to point B, or are they a tourist attraction in and of themselves? I also looked to Twitter to investigate False Creek Ferries’ communication habits and to get a feel for the company’s existing level of engagement with their ridership. Twitter seems to facilitate communication with local Vancouver residents, both regular riders and those looking to be tourists in their hometown. Photos of interesting sights in False Creek and English Bay are mixed in with routine service announcements and notices of route closures due to inclement weather.

I am a regular ferry user myself, but I usually ride only one route at a specific time of day and with a specific transportation-oriented agenda. I wanted to know what other reasons my fellow False Creek Ferries passengers might have for using the ferry service, so I rode the ferries up and down the length of False Creek, observing and sometimes talking with the people riding with me. I also spoke with ferry operators with experience ranging from 1 through 15 years. I even tried my hand at driving one of the boats myself.

I documented my observations through photographs and in writing. Some of my notes were taken in the moment (pen), and some were recorded immediately following my field research (pencil). I did a third pass to review my notes (blue pencil), and tried to establish linkages between concepts that had come up through my research, making connections and constructing an understanding of user needs based on what I had seen and heard.

As I reviewed my notes, I noticed that issues related to cameras, maps, wayfinding, landmarks, and sightseeing came up again and again. Specifically, through my research, I discovered that wayfinding can prove difficult for ferry riders due to a number of reasons. False Creek Ferries doesn’t typically offer tour services, and so unless they ask specific questions, riders are left to interpret their surroundings on their own for the duration of their ride. Furthermore, ferry operators are preoccupied with driving the boat and taking tickets, and passengers may feel reluctant to approach them for fear of disrupting this work.

As a result, tourists riding the ferry for pleasure often don’t know what they’re seeing, and lack the points of reference that regular riders and locals might have, so giving (and receiving) directions to popular destinations like the train station using landmarks becomes difficult at best. Furthermore, the perspective of the city changes dramatically when viewed from the water, so even locals may become disoriented. In response to these identified pain points associated with orientation and wayfinding, I decided to build an app to help enrich the sightseeing and landmarking experience of tourists and non-regular riders on False Creek Ferries. The app is based on the concept of keyline drawings, and answers the question 'What’s that building over there?'

To plan the development of Shoreliner, I moved from my sketchbook to digital tools to create wireframes and then map the user interface flow between them. The exercise helped me foreground the app's primary interactions and gain a sense of which coding languages and development tools would best suit this project.

Users must be able to orient themselves within the app and quickly establish parallels between what appears on the screen and what they see in False Creek’s physical geography and built environment. For this reason, accurately representing the environment through included assets is imperative. For prototyping purposes, I started with the four most significant buildings bordering the Creek, and referred to photographs taken from various points along False Creek to illustrate the mountain horizon. Another issue to consider was that of branding. This is an app meant to be used by ferry passengers on board False Creek Ferries; as such, it should reflect the brand values of False Creek Ferries’ existing collatoral. This style is playful, graphic, geometric, at times child-like, and features bright, primary colours—all of which I considered as I designed the interface components for Shoreliner.

I developed a working version of Shoreliner using HTML, CSS, and JavaScript. For the information panes that pop up when a given landmark is tapped, I employed the jQuery plugin bPopup. I wrapped everything up with Apache Cordova to create a functioning prototype. Within the narrow timeframe I had for this project, my scope was limited. Though I figured out the concepts behind Shoreliner’s visual identity and its basic functionality, there’s still a long way to go to perfecting the app. Here’s what I’d like to do next: - Add detailed information to popups, populated via a database. - User test a prototype while riding the ferries on False Creek. - Iterate based on feedback and insights gained through user testing. - Continue to fill in the app's interface with buildings and landmarks visible form False Creek. - Use geolocation to orient the app according to the direction the user is facing and traveling.