Washington State Ferry App Proposal

WSF

WASHINGTON STATE FERRY APPTressa Randolph

2

3Project Overview

4Client Research

11Competitive Analysis

12Concept Process

14Sketch Walk-through

18User Scenario & Path Example

19Logic Flow Map

20Creative Brief

21Usability Test

27Usability Results

29Hi-Fi & Gestural Icons

Table of Contents

3

CLIENT

Washington State Ferries (WSF) is currently a department housed within the Washington State Department of Transportation (WSDOT). WSF does not currently have an application specifically for its department’s services. There is a need in the market for a WSF Ferry app for commuters. The Client will need to maintain continuity with the WSDOT website and application, but will also need careful delineation from it’s parent company.

OBJECTIVE

Create an application for use primarily by western Washington commuters who make use of the Washington State Ferry system on a daily, or near-daily basis. Provide a way for people on the move to quickly assess current ferry locations, arrivals, departures, cameras and ticketing information. This app will need to function well for people who are possibly already behind the wheel of their car, which means large buttons and text for easy navigation at-a-glance.

PROCESS

We will begin with an examination of the current WSDOT website as the parent company of WSF. After determining which portions of the current site need to be included in the application, we will check for duplication and unnecessary navigation in order to focus on only the elements which will need to be included and designed. Additionally, we will research the current WSDOT app, as well as, any other apps which may provide competition or inspiration for our new design.

A site-map will then be created to identify navigation hierarchy and functionality. From there we begin the process of design.

Project Overview

4

WSDOT APP

WSDOT currently has one app available on both Android and Apple platforms. The target audience for this app appears to be western Washington travelers in general and includes information in six specific categories; Traffic, Ferries, Mountain Passes, Social Media, Toll Rates, & Border Waits.

The ferry segment of this app is limited to Route Schedules, Vehicle Reservations, and a Vessel Watch with access to current boat location, by route, and cameras. Information is either over-crowded or too sparse depending on where you are in the navigation portal.

Client Research

ANDROID APP

APPLE APP

5

WSDOT WEBSITE

Washington State Ferries is one of many departments housed within the WSDOT. As such, it does not have it’s own website, but is located under the parent site, www.wsdot.gov. This state website contains a very large quantity of information that is, for it’s part, well organized and not in need of a transformation.

However, due to the large quantity of information available for Washington State Ferries, it can be more time consuming to navigate on mobile devices.

RECOMMENDATION

The WSDOT website features a lot of information about Washington State ferries. However, that information is not easily accessible from mobile platforms. The current application being provided by WSDOT does address some of the basic ferry information, but either links back to the difficult-to-use website, or is difficult to use because of tiny links/buttons and limited information. In addition, WSDOT’s app is aimed toward a broader audience, supplying information on borders, traffic, and mountain passes.

While there are other apps available for ferry travel, they tend to either have limited features or poor design, resulting in apps that are not as user friendly as they could be.

My recommendation for WSDOT is to invest in the creation of an application specifically for local ferry commuters. A WSF specific application which can be optimized to include more features than are currently offered with the current WSDOT app, that has minimal link-backs to the mobile-unfriendly website, and has simple, fast navigation for those on the go.

Client Research

WSF

6

WSDOT WEBSITE: HOME PAGE

* Highlighted areas indicate navigation elements that should be included in the new WSF app.

Client Research

7

Client Research

WASHINGTON STATE FERRY: HOME SCREEN


8

WSF: VESSEL WATCH


Client Research

9

WSF: ROUTE SCHEDULE SCREEN


Client Research

10

WSF: FERRY CAMERA SCREEN


Client Research

11

Competitive Analysis

- European ferries only- A lot of info to plug-in- No camera option- No mapping- No alerts

Aesthetically pleasing - Intuitive navigation -

Route comparison -Pay feature -

Social media -

PROS CONS

- Color scheme inconsistency- Apple only- Must sign-up for account

Very readable -Icon/text based nav -

Route maps -Advisories -

Ticket purchase -

PROS CONS

- App has ads- Unattractive typeface- Basic design- Complicated navigation

WSF schedule -Next boat run indicator -Ferry cameras & maps -

On/Off Alert feature -

PROS CONS

- Too broad- Cams hard to click- Small nav links- Links back to website (which is not mobile)

Simple Icon nav on HP -Multiple platforms -

Camera & map options -Simple navigation -

Alerts feature -

PROS CONS

- Completely text based- Too much information- Most features need upgrade to access

Multiple platforms -Simple color scheme -Free & upgradeable -

Rout options -Free stickers? -

PROS CONS

aFerry App

NY Waterway App

WSF Schedule App

WSDOT App

Ferries+ App

12

WSDOT WEBSITE

Areas on the website screen shots, highlighted for inclusion in the new application, contain important navigation information. However there is also some redundancy and unnecessary navigation points that need to be weeded out prior to creating a site-map.

My notes (above) indicate areas that can be excluded from the application [ STRIKE-THROUGH ], and areas of redundancy [ (D) ].

Concept Process

13

Concept Process

WSDOT WEBSITE

Initial conception phase focused on navigational elements and basic screen layouts in preparation for the site map design.

14

Sketch Walk-through

WSF APP, SKETCHES 1-2

1. Click the app button to open the app.

2. Select route and click GO button.

15


3. Choose Vessel Watch to see the route and up-to-date ferry location information in map view.

4. Choose Schedule Icon to view sailing schedule for the selected route.

Sketch Walk-through

16


5. View route details including the next ferry to leave (default), alerts (if any), dates & times route applies to, and current availability of vehicle spaces left on the boat (see ferry icon fill indicator).

6. Select Camera Icon to view ferry landing cameras for the current route.

Sketch Walk-through

17


7. Click on Hamburger menu to view additional options. Select Fares & Ticketing to see ticket info.

8. Select from Fares & Ticketing menu to purchase tickets. Ticket purchase then takes you to Online ticketing site to complete purchase.

Sketch Walk-through

18

USER SCENARIO

PATH EXAMPLE

Jasper Coogan currently lives on Whidbey Island and commutes to his place of employment, a Marketing Agency, in Kirkland, WA, on a Monday through Thursday. His wife works as a nurse on the island, as well as caring for their three year old daughter. Because of the nature of his work Jasper doesn’t have much leeway in his schedule.

Every day he uses the current WSDOT app or the website to try to gage the ferry schedule and wait times, so that he can make all of his meetings on time. He gets frustrated by how long it takes to navigate to the primary information, current ferry locations, and cameras.

He would like an app that is specifically dedicated to the Ferry System, with large, quick, easy-to-use navigation that can be accessed from his phone or tablet both prior to, and while en-route to, his destination.

USER SCENARIO AND PATH EXAMPLE

WSF A p

Mukilteo > Clinton

GO

WSF App WSF App WSF App WSF AppMukilteo to Clinton

Vessel Watch

Ferry Cameras

Schedule

Alerts

Leaving Mukilteo

Schedule

Fares

03:30pmM T W Tz F S Su

04:00pmM T W Th F S Su




Mukilteo Landing

Cameras

Mukilteo to Clinton

Alerts

Training drill scheduledfor 3:30pm on TuesdayMar 6th. May causedelay in take-off /arrivaltimes.

Open App from home screen. Select Route and press ‘GO’ to see the route info.

Select ‘Schedule’ to view current route schedule.

Select the ‘camera icon’ to view live cam feeds for this location.

Click ‘Alert’ icon to see the current alert status for this route.

Read alert and then navigate back using ‘Back’ button or hamburger menu.

1 2 3 4 5

Home screen Route Menu Schedule Cameras Alerts

19

Logic Flow Map

20

Creative Brief

COLOR PALETTE

WSDOT and Washington State Ferries already have an established color scheme. As such, this same color scheme will be used in the app for continuity purposes. All photography and graphic elements will be matched to this color palette, as well.

*While not an official part of the color scheme, Red will be included as an accent color for alert/warning purposes only.

TYPEFACE

ICON SET

VERDANA BOLD | Caps

Verdana Bold

Verdana Bold | Red

Verdana Regular

Verdana Regular | Navy Blue

Verdana Italic | Grey

Headline:

Sub-Headline:

Body Copy:

Sub-Menu:

Accent:

Warning/Alert:

Evergreen | Hex #00725B

Navy Blue | Hex #164A76

Turquoise | Hex #43C6ED

Blue-grey | Hex #A6B8CB

Dove Grey | Hex #F2F2F2

Charcoal | Hex #231F20

WSFApp Icon

App Icon

Favorites

Switch

Enlarge

Open

Menu

Close

Settings

Vessel Watch

Cameras

Schedule

Alerts

Fares & Tickets

Loading Bar

21

Usability Test

TEST SCRIPTIntroduction

Hi, my name is Tressa. Thank you for helping me test the usability of my site. Tell me, are you familiar with the Washington State ferry system? If yes: Great! Can you tell me when the last time you rode a Washington State Ferry, and what was your destination?

What is the frequency with which you use the ferry system?

Would you consider yourself a regular commuter on the ferry system?

If yes: Great! You are part of the target audience for this product!

If no: Okay then, I’ll be interested to get your input on the usability of this product.

If no: Okay. Have you had occasion to use a ferry system in a different state or country?

If yes: Okay, great. Then you will have some basic knowledge of ferry use.

If no: Okay, then this should be a new experience for you.

User Scenario

You live on Whidbey Island but you work in Seattle. You are on your way home and you want to find out how full the ferry parking lot is, which boat is loading now, and purchase your ticket for the ride home.

Great. Shall we get started?

Test conducted on a prototype mobile app with limited functionality on InVision at http://in-vis.io/K2PAONHY

HOME SCREEN

PRIMARY NAVIGATION MENU

12:34 PM12:34 PM

Clinton

Mukilteo

WSF app

Choose a Route

Add To FavoritesGO

Mukilteo > Clinton

12:34 PM12:34 PM

Vessel Watch

Cameras

Schedule

Alerts

Fares & Ticketing

Mukilteo > Clinton

WSF app

On viewing the home screen of the app, what information can you extrapolate?

Where do you believe the navigational elements on this page are?

For the purposes of this test we will be using the Mukilteo/Clinton ferry run. However, if you wanted to choose another route, how do you think you might do that?

What is it your instinct to do next?

What do you think will happen when you touch the star in the lower left hand side of the screen?

Let’s go ahead and select the Mukilteo to Clinton Route and push ‘GO’ to view the next screen.

What do you think your options are on this screen?

Do you find the icons on the screen indicative?

What do you want to do first?

How do you think you would go back to the previous screen?

How do you think you would close this app?

Okay, let’s explore. What do you want to do first?

22

Usability Test

VESSEL WATCH SCREEN

SCHEDULE SCREEN

12:34 PM12:34 PM

Vessel Watch

Cameras

Schedule

Alerts

Fares & Ticketing

What do you think you are looking at?

Is it clear which route you are looking at?

How do you think you would zoom in or out?

What other navigation options can you identify? Where do you think they lead?

If you wanted to see additional navigation options for this app, what would you do?

Do you feel there is any additional information that you might like to see but which isn’t there?

Okay, great, let’s continue. Where do you want to go next?

What do you see on the screen?

Where is your first instinct to touch?

What other navigation options can you identify? Where do you think they lead?

What time do you think the next scheduled ferry boat leaves the dock?

Do you think there is any additional info available?

What do you think the exclamation point in a red circle means?

What do you think the ferry icon indicates?

What information do you see in the drop-down Is there any additional information you would expect to see here?

Great, let’s go back.

Usability Test

12:34 PM12:34 PM12:34 PM

Vessel WatchMukilteo > Clinton

Refreshed every 15 sec.

WSF app

12:34 PM12:34 PM

Schedule

03:30 pm

Leaving Mukilteo

M Tu W Th F S Su

86 spaces available

120 spaces available




04:00 pmM Tu W Th F S Su

04:30 pm

Winter ScheduleJan. 12, 2014 - April 5, 2014

Help

Departure: 04:30pmArrival: 04:50pm

Vessel: Cathlamet

M Tu W Th F S Su



WSF app

Crossing time: 20 min.

23

CAMERA VIEW SCREEN

ALERTS SCREEN

12:34 PM12:34 PM

Vessel Watch

Cameras

Schedule

Alerts

Is it clear what you are looking at?

What navigational options can you identify on the screen? Where do you think they lead?

If you wanted to see a larger view of the cameras what do you think you might do?

How would you navigate to the previous screen?


Is the location of these cameras clear to you? What is it that location?


What information do you think is on the screen?

On this page there is information that is faded out. What do you think that indicates?

How current do you think this information is?

When do you think this information gets updated?

What other navigational options can you identify on the screen? Where do you think they lead?



Usability Test

12:34 PM12:34 PM

CamerasMukilteo Landing


WSF app

12:34 PM12:34 PM

AlertsMukilteo > Clinton


Mukilteo to ClintonWednesday, March 5th, 2014: Training drill scheduled for 3:30 pm. May cause delays in take-off & arrival times. Please plan accordingly. Thank you for your patience.

Last Updated Mar. 5th, 2014 @ 2:15pm

Seattle to BainbridgeWednesday, March 5th, 2014: Expect delayed take-off for the 11:00 am ferry from Seattle due to emergency vehicle loading request. Thank you for your patience.

Last Updated Mar. 5th, 2014 @ 10:15am

Seattle to Bainbridge

WSF app

24

HAMBURGER MENU SCREEN

FARES & TICKETING MENU

12:34 PM12:34 PM

Vessel Watch

Cameras

Schedule

Alerts

Is this what you expected to see when you accessed this navigation source?

Is it clear what you can do from this menu?

Is there anything here that you expected to see, that you don’t?

Great, let’s continue. Where do you want to go next?

What do you think your options on this screen are?What do you want to do first?

Do you find the icons indicative?

Is it clear to which ferry route this info applies?

What do you think will happen if you push the ‘X’ in the top right corner of the screen?

Great, let’s continue. Where do you want to go next?

Usability Test

12:34 PM12:34 PM12:34 PM

AlertsMukilteo > Clinton


Mukilteo to Clinton

Wednesday, March 5th, 2014: Training drill scheduled for 3:30 pm. May cause delays in take-o� & arrival times. Please plan accordingly. Thank you for your patience.Last Updated Mar. 5th, 2014 @ 2:15pm


Wednesday, March 5th, 2014: Expect delayed take-o� for the 11:00 am ferry from Seattle due to emergency vehicle loading request. Thank you for your patience.Last Updated Mar. 5th, 2014 @ 10:15am


Vessel Watch

Cameras

Schedule

Alerts

Fares & Ticketing

Change Route

Settings

> Fares & Tickets

> Vehicle Reservations

> Use your ORCA pass

WSF app

12:34 PM12:34 PM12:34 PM12:34 PM12:34 PM

Passenger Fares

Car & Driver

Motorcycle

Vehicle length-based

Mukilteo > Clinton

WSF app

25

PASSENGER FARES SCREEN

WAVE2GO SCREEN

12:34 PM12:34 PM

Vessel Watch

CamerasAlerts

What do you think you can do from this screen?

What navigational options can you identify on the screen? Where do you think they lead?

Is it clear what the On/Off switch does?

Is it apparent to which ferry route these prices apply?

If you want to purchase a ticket, what do you think you could do on this screen to do that?

Great, let’s move on.

Is it clear what this screen is?

What navigational elements do you see?

If you wanted to add another ticket, how do you think you would do that?

If you wanted more than one of the same number of tickets, how do you think you might accomplish this task?

How do you think you might exit this purchasing screen if you wanted to cancel your order?

Usability Test

12:34 PM12:34 PM

Fares & Tickets

Adult

PASSENGER FARES

Mukilteo > Clinton

Round Trip Rates

(ages 19 - 64 yrs.) Purchase Tickets

OFFOFF

$4.75

Senior / Disabled(ages 65 yrs. & over) Purchase Tickets

$2.35

Youth(ages 6 - 18 yrs.) Purchase Tickets

$2.35

Bicycle(surcharge only) Purchase Tickets

$1.00

Multi-Ride Commuter(Good for 10 Rides one-way) Purchase Tickets

$38.50

WSF Monthly Pass(Good for 31 Rides one-way) Purchase Tickets

$61.60

WSF app

12:34 PM12:34 PM


Wave2Go

Shopping Cart

Adult Passenger

+ Add more

Proceed to Checkout

1 $4.75

Total $4.75

26

HOME SCREEN (1)

Problem: Confusing Navigation Icon: Unclear whether it indicates Switch or Refresh?

Solution: Changed Icon to bi-directional arrows.

SCHEDULE SCREEN (2)

Problem: No drop-down menu indicator.

Solution: Added an indicator on each section.

SCHEDULE SCREEN (3)

Problem: “Help” link unclear. Link to “Fares” suggested.

Solution: Changed “Help” to “Tickets”.

Usability Results

27

12:34 PM12:34 PM

Clinton

Mukilteo

WSF app

Choose a Route

Add To FavoritesGO

Mukilteo > Clinton

12:34 PM12:34 PM

Schedule

03:30 pm

Leaving Mukilteo

M Tu W Th F S Su

86 spaces available






04:30 pm

Winter ScheduleJan. 12, 2014 - April 5, 2014

Help

Departure: 04:30pmArrival: 04:50pm

Vessel: Cathlamet

M Tu W Th F S Su



WSF app

Crossing time: 20 min.

3:15 PM

3:15 PM

1

23

1

23

Usability Results

28

AESTHETIC CHANGES

A few changes to design elements of the application were also made based on user suggestions and comments made during the usability test.

First, a new background image was used to better represent the Washington State Ferry system.

Second, all navigational elements, which had previously had a gradient stroke as a visual indicator of click-ability, was changed to flat blocks/bars with only a subtle drop shadow instead.

Finally, some small changes were made to font size in a couple places in order to aid readability.

PREVIOUS DESIGN

NEW DESIGN

29

1

4

6

3

Hi-Fi & Gestural Icons

3:15 PM

3:15 PM

APP HOME SCREEN

TAP

TAP

SCROLL

1. TAP the icon to switch route direction on any page on which it appears.

2. TAP to add current route selection to favorites menu.

3. TAP to view route menu.

APP HOME, DROP-DOWN

4. TAP to view a drop down menu with a full list of WA State Ferry Routes. *Favorite routes will appear at the top of the list.

5. SCROLL through the listed routes to choose the one you want to view information for.

6. TAP to select a route from the drop down list.

30


3:15 PM

3:15 PM

ROUTE MENU SCREEN

VESSEL WATCH SCREEN

1

5

1. TAP any of the navigation buttons to proceed to the listed pages. This is the primary navigation system for this app.

2. TAP the Back Arrow to return to the previous page from any screen on which it appears.

4 3. TAP the icon to zoom.

4. TAP the icon to view the Schedule page for this route on any screen on which it appears.

5. SPREAD/PINCH to manually zoom in and out on the map/vessel watch screen.

TAP

TAP

SPREAD

PINCH

31


3:15 PM

3:15 PM

SCHEDULE SCREEN

SCHEDULE SCREEN, DROP-DOWN

1. TAP the icon to navigate to the Alerts screen to view information pertaining to this specific route and time.

2. TAP the down arrow or anywhere on the time bar to view a drop down menu with additional information.

3. SWIPE through the schedule, which defaults to the next ferry scheduled to leave dock, to view all times for the current day.

SCROLL to view schedule for the previous or following days.

4. TAP icon to navigate to the Camera Views screen.

5. TAP to close the drop-down for the current time frame.

6. TAP to navigate to the Fares and Ticketing Menu screen.

3

6 5

2

1

4

TAP

TAP

SCROLL

SWIPE

32


3:15 PM

3:15 PM

CAMERA VIEW SCREEN

ALERTS SCREEN

1. TAP the icon to view the camera image full-screen.

2. SCROLL to view all cameras available at the chosen route location.

3. SCROLL to view the current day’s Alerts.

1

TAP

SCROLL

SCROLL

2

3

33


3:15 PM

3:15 PM

HAMBURGER MENU

FARES & TICKETING MENU

1. TAP the hamburger menu icon to view the app navigation.

2. TAP down arrow to open additional navigation options in the sub-menu.

TAP again to close the sub-menu.

3. TAP any menu item to navigate to the corresponding screen. Accessible from any screen on which the hamburger menu appears.

4. TAP any of the navigation buttons to proceed to the listed pages. This is the primary navigation system for the Fares and Ticketing screen.

3

1

2

TAP

TAP

4

34


3:15 PM

3:15 PM

PASSENGER FARES SCREEN

WAVE2GO PURCHASE SCREEN

1. PRESS AND SLIDE the On/Off button to change purchase prices from one-way fares to round-trip fares as they appear on the screen below.

2. TAP to select the purchase ticket option and navigate to the Wave2Go purchase & check-out.

3. TAP to close the Wave2Go purchasing screen and return to the Fares and Ticketing screen.

4. TAP to bring up the keyboard in order to change the number of tickets for purchase.

5. TAP to add additional tickets of the same or different types from the previous screen.

6. TAP to proceed to the checkout screen to enter credit card information and submit payment through Wave2Go.

TAP

TAP

PRESS AND

SLIDE

1

2

3

5

6

4

FIN.

Washington State Ferry App Proposal

Documents

state website

current wsdot website

current wsdot app

current application

wsf ferry app

washington state ferry

basic ferry information

lot of information