Passion Project for Bethel School of Technology
Designed with users of BC Ferries and Salt Spring Transit in mind
Island Metro Logo
A collaboration between BC Ferries and Salt Spring Transit, to create a platform for Gulf Island Residents and Tourists to easily find, navigate and book their travel needs.
All in one spot.



Overview

Ferries are the main connection between remote island communities and bigger centers, yet there is very little communication between them and the smaller Salt Spring Transit. Users have reported frustration in navigating schedules and attempting to plan larger trips, with connections.

The Problem

Gulf Island Residents and Tourists, need a simple way to plan travel with local transit

The Solution

Design a simple way to navigate, quickly access, display and book all the necessary travel information in one place.

My Role

illustration: graph & man
User Research
Design Strategy
User Interviews
Competitive Analysis
illustration: man with puzzle
Affinity Mapping
User Persona’s
Card Sorting
Information Architecture
User Flow
illustration: man with puzzle
Wireframes
Usability Testing
Visual Design
Prototyping


Project Timeline

6

100 +

Weeks

Frames

timetable



Market Analysis

While there are a number of products on the market. None of them adequately address the needs of the gulf island user. They were either full of features and cumbersome to use. Or simple to use, but lacking features. The highest contender was the moovit app. However, it was lacking vital travel information for the gulf islands.
market table

User Insights

Key Insight 1

Lengthy and unorganized pages of information overwhelm users, keeping them from finding the information, alerts and updates they really need.

Key Insight 2

Finding schedules is of utmost importance for travelers. Doing so through the local transit websites is a time consuming process, and regular users use Google to navigate directly to the schedule page and bypass the local websites.

Key Insight 3

Currently there is no option to plan connections between BC Ferries and Salt Spring Transit, leaving travelers to navigate multiple tabs and pages to see travel details for a single trip. This results in user frustration, confusion, and requires them to rely on prior transit knowledge.
looking for insight

User Persona's

User Persona’s clearly outline the collective experience of interviewed users. Their insights are summarized to help us gain empathy for our target user while designing.
user persona Ally user persona Dale

Site Map

The site map outlines the overall layout for the final product. Fully designed with users in mind.

Main Menu

Trip Planner

Footer

site-map
main menu sitemap

Trip Planner

The next piece of the site map is the trip planner. This contains the most vital information that users are most often looking for when they visit local metro sites. All in one place!
trip planner sitemap

Footer

Finally, the footer menu contains the business information. This information is of little interest to the average user, but required for business operations.
footer site map

User Flow

User Flow demonstrates how a user will move through a product while utilizing the key features.


user flow

Wireframes

Wireframes outline the iteration process of an initial concept and determine the final design layout of a product.
wireframe intro

Wireframes

Wireframes outline the iteration process of an initial concept and determine the final design layout of a product.

Wireframe Sketches

sketch wireframes
sketch wireframes 2

Wireframe Lo-Fidelity

lo-fi wireframes
lo-fi wireframes 2

Wireframe Hi-Fidelity

lo-fi wireframes
lo-fi wireframes 2

Usability Testing

Usability testing was completed using the hi-fidelity wireframes,
with 3 users across various ages to test the product.
This was the discovery:

Pros

Average User Rating was 8.1 / 10 for simplicity and usability
Next Departure Feature was helpful
Pricing and Routing on the same page was beneficial

Cons

Users unaware of the How to Travel and Full Schedule options
More information was needed on the trip planner schedule
The total trip cost was not clear

Style Guide

Proxima Nova
Page Headline | Bold 35pt
Section Header | Bold 30pt
Text Header | Semi-Bold 25pt
Sub Header | Semi-Bold 18pt
Body Text | Medium 18pt

Input Label | Semi-Bold 16pt

Color Pallet
Icons
Buttons

Simple UI

Easy to use interface puts the information you need right
at your finger tips.
UI Preview

Best Route

Just Enter your origin and destination, it does the rest
Shows best options for your Schedule
Includes Thru Fare information for Ferries
best route

Best Route

Just Enter your origin and destination, it does the rest
Shows best options for your Schedule
Includes Thru Fare information for Ferries

Quick View

View the Next available bus/Ferry
View Times and fares quickly
Secondary display with the next 3 Departures
Quick View

Off Island Connections

Schedule your trip with off island connections included
Full route overview
Display terminal, stop, and transfer details on the map
off island connections screen

Off Island Connections

Schedule your trip with off island connections included
Full route overview
Display terminal, stop, and transfer details on the map

Bookings & Reservations

Easily reserve a ferry right from the schedule
See personalized Deals and Offers to save you money
Book a Hotel at the same time
Bookings & Reservations

Favorite Routes

Select your top 3 most used schedules
Save for quick access next time
one easy click = no more Google searches
favorites screen

Favorite Routes

Select your top 3 most used schedules
Save for quick access next time
one easy click = no more Google searches

WrapUp

At the outset of this project, the goal was to design a simplified user experience for users to find, navigate and book travel in the Gulf Islands. After 6 weeks of user research, IA development, design, and prototyping the result speaks for itself. In creating this product the greatest challenge was balancing between the in depth information presented on the site, while still maintaining a clean, and simple to use product. The product is now ready to ship to developers, and move into the final testing phase.