Page 1

WSF WASHINGTON STATE FERRY APP Tressa Randolph


Table of Contents

Project Overview

3

Client Research

4

Competitive Analysis

11

Concept Process

12

Sketch Walk-through

14

User Scenario & Path Example

18

Logic Flow Map

19

Creative Brief

20

Usability Test

21

Usability Results

27

Hi-Fi & Gestural Icons

29

2


Project Overview

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


Client Research

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. APPLE APP

ANDROID APP

4


Client Research

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

WSF

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


Client Research

WSDOT WEBSITE: HOME PAGE * Highlighted areas indicate navigation elements that should be included in the new WSF app.

6


Client Research

WASHINGTON STATE FERRY: HOME SCREEN * Highlighted areas indicate navigation elements that should be included in the new WSF app.

7


Client Research

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

8


Client Research

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

9


Client Research

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

10


Competitive Analysis

aFerry App PROS Aesthetically pleasing Intuitive navigation Route comparison Pay feature Social media

CONS

-

-

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

NY Waterway App PROS Very readable Icon/text based nav Route maps Advisories Ticket purchase

CONS

-

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

WSF Schedule App PROS WSF schedule Next boat run indicator Ferry cameras & maps On/Off Alert feature

CONS

-

-

App has ads Unattractive typeface Basic design Complicated navigation

WSDOT App PROS Simple Icon nav on HP Multiple platforms Camera & map options Simple navigation Alerts feature

CONS

-

-

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

Ferries+ App PROS Multiple platforms Simple color scheme Free & upgradeable Rout options Free stickers?

CONS

-

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

11


Concept Process

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) ]. 12


Concept Process

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

13


Sketch Walk-through

WSF APP, SKETCHES 1-2 1. Click the app button to open the app. 2. Select route and click GO button.

14


Sketch Walk-through

WSF APP, SKETCHES 3-4 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.

15


Sketch Walk-through

WSF APP, SKETCHES 5-6 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.

16


Sketch Walk-through

WSF APP, SKETCHES 7-8 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.

17


USER SCENARIO AND PATH EXAMPLE

USER SCENARIO 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.

PATH EXAMPLE Home screen

WSF A p

Route Menu

Schedule

WSF App Mukilteo to Clinton

Vessel Watch Ferry Cameras Schedule Mukilteo > Clinton

WSF App

Cameras

WSF App

Alerts

WSF App

Schedule

Cameras

Alerts

Leaving Mukilteo

Mukilteo Landing

Mukilteo to Clinton

03:30pm

Training drill scheduled

M T W Tz F S Su

for 3:30pm on Tuesday Mar 6th. May cause delay in take-off /arrival

04:00pm M T W Th F S Su

04:30pm

times.

M T W Th F S Su

Alerts

05:00pm

Fares

05:30pm

M T W Th F S Su

GO

M T W Th F S Su

1 Open App

from home screen. Select

Route and press ‘GO’ to see the route info.

2

Select ‘Schedule’ to view current route schedule.

3

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

18

4

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

5

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


Logic Flow Map

19


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.

Evergreen | Hex #00725B

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

Navy Blue | Hex #164A76

Turquoise | Hex #43C6ED

TYPEFACE Headline:

Blue-grey | Hex #A6B8CB

Sub-Headline: Dove Grey | Hex #F2F2F2

VERDANA BOLD | Caps Verdana Bold

Body Copy:

Verdana Regular

Sub-Menu:

Verdana Regular | Navy Blue

Accent:

Charcoal | Hex #231F20

Warning/Alert:

Verdana Italic | Grey

Verdana Bold | Red

ICON SET

WSF App Icon

Switch

Menu

Vessel Watch

App Icon

Enlarge

Close

Cameras

Fares & Tickets

Favorites

Open

Settings

Schedule

Loading Bar

20

Alerts


Usability Test

TEST SCRIPT Introduction 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?

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

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?

21


Usability Test

HOME SCREEN

12:34 PM

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

WSF app

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

Choose a Route

Mukilteo > Clinton

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?

Add To Favorites

GO

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.

PRIMARY NAVIGATION MENU What do you think your options are on this screen? 12:34 PM

WSF app

Do you find the icons on the screen indicative?

Mukilteo > Clinton Vessel Watch

Cameras

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

Schedule

How do you think you would close this app?

Alerts

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

Fares & Ticketing

22


Usability Test

VESSEL WATCH SCREEN What do you think you are looking at? 12:34 PM

WSF app Vessel Watch Mukilteo > Clinton

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?

Refreshed every 15 sec.

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

SCHEDULE SCREEN 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? 12:34PM PM 12:34

WSF app

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

Schedule Leaving Mukilteo 03:30 pm

86 spaces available

Vessel Watch

M Tu W Th F S Su

04:00 pm M Tu W Th F S Su

Cameras

04:30 pm

120 spaces available

M Tu W Th F S Su

Schedule

Winter Schedule

What do you think the ferry icon indicates?

Departure: 04:30pm

Alerts

Crossing time: 20 min.

Vessel: Cathlamet

05:00 pm

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

Help

Jan. 12, 2014 - April 5, 2014

Arrival: 04:50pm

Do you think there is any additional info available?

120 spaces available

120 spaces available

What information do you see in the drop-down

Fares & Ticketing

M Tu W Th F S Su

05:30 pm M Tu W Th F S Su

120 spaces available

Is there any additional information you would expect to see here? Great, let’s go back. 23


Usability Test

CAMERA VIEW SCREEN Is it clear what you are looking at? 12:34 PM

WSF app Cameras Mukilteo Landing

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? If you wanted to see additional navigation options for this app, what would you do? Is the location of these cameras clear to you? What is it that location?

Refreshed every 15 sec.

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

ALERTS SCREEN What information do you think is on the screen? 12:34 PM

WSF app Alerts Mukilteo > Clinton

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

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?

Schedule Vessel Watch Seattle to Bainbridge

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

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

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

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

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

Seattle to Bainbridge

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

24


Usability Test

HAMBURGER MENU SCREEN

12:34 PM

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

WSF app

Is it clear what you can do from this menu?

Vessel Alerts Watch

Mukilteo > Clinton

Cameras Mukilteo to Clinton Wednesday, March 5th, 2014:

Schedule Training drill scheduled for 3:30

pm. May cause delays in take-off

& arrival times. Please plan Alerts accordingly. Thank you for your patience.

Is there anything here that you expected to see, that you don’t? Great, let’s continue. Where do you want to go next?

FaresLast&Updated Ticketing Mar. 5th, 2014 @ 2:15pm Seattle to Bainbridge > Fares & Tickets

Wednesday, March 5th, 2014: Expect delayed take-off for the 11:00 am ferry from Seattle due to > Use your ORCA pass emergency vehicle loading request. Thank you for your Change Route patience. > Vehicle Reservations

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

Settings Refreshed every 15 sec.

Seattle to Bainbridge

FARES & TICKETING MENU

12:34 PM

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

WSF app

Do you find the icons indicative?

Mukilteo > Clinton

Is it clear to which ferry route this info applies?

Passenger Fares 12:34 PM

Car & Driver

Motorcycle Schedule Vessel Watch Vehicle length-based Alerts Cameras

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?

25


Usability Test

PASSENGER FARES SCREEN What do you think you can do from this screen? 12:34 PM

WSF app Fares & Tickets

Round Trip Rates

OFF

Mukilteo > Clinton

What navigational options can you identify on the screen? Where do you think they lead? Is it clear what the On/Off switch does?

PASSENGER FARES $4.75

Adult (ages 19 - 64 yrs.)

Purchase Tickets

Senior / Disabled

$2.35

(ages 65 yrs. & over)

Purchase Tickets

$2.35

Youth (ages 6 - 18 yrs.)

Purchase Tickets

$1.00

Bicycle (surcharge only)

Purchase Tickets

$38.50

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

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.

Purchase Tickets

$61.60

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

Purchase Tickets

WAVE2GO SCREEN Is it clear what this screen is? 12:34 PM

Wave2Go

Shopping Cart 1

Adult Passenger

$4.75

Vessel Watch

Total

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

12:34 PM

+ Add more

Alerts Cameras

What navigational elements do you see?

$4.75

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?

Proceed to Checkout

Refreshed every 15 sec.

26


Usability Results

HOME SCREEN (1) Problem: Confusing Navigation Icon: Unclear whether it indicates Switch or Refresh? Solution: Changed Icon to bi-directional arrows.

3:15 PM

12:34 PM

WSF app

Clinton Mukilteo

Choose a Route

1

1

Mukilteo > Clinton

GO

Add To Favorites

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

3:15 PM

12:34 PM

WSF app Schedule Leaving Mukilteo 03:30 pm

86 spaces available

M Tu W Th F S Su

04:00 pm

120 spaces available

M Tu W Th F S Su

04:30 pm

120 spaces available

M Tu W Th F S Su

Winter Schedule

Help

Jan. 12, 2014 - April 5, 2014 Departure: 04:30pm Arrival: 04:50pm

2

2

3

3

Crossing time: 20 min.

Vessel: Cathlamet

05:00 pm

120 spaces available

M Tu W Th F S Su

05:30 pm

120 spaces available

M Tu W Th F S Su

27


Usability Results

AESTHETIC CHANGES PREVIOUS DESIGN

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.

NEW DESIGN

28


Hi-Fi & Gestural Icons

3:15 PM

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

1

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

3

3:15 PM

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

4

SCROLL

6

29

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.


Hi-Fi & Gestural Icons

3:15 PM

ROUTE MENU SCREEN

TAP

1

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.

3:15 PM

VESSEL WATCH SCREEN

4

3. TAP the icon to zoom.

TAP

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.

5 SPREAD

PINCH

30


Hi-Fi & Gestural Icons

3:15 PM

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

1

TAP

2 SCROLL

3

SWIPE

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.

3:15 PM

SCHEDULE SCREEN, DROP-DOWN

4

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

TAP

5. TAP to close the drop-down for the current time frame. 6. TAP to navigate to the Fares and Ticketing Menu screen.

6

5

31


Hi-Fi & Gestural Icons

3:15 PM

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

TAP

2

1

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

SCROLL

3:15 PM

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

3

32


Hi-Fi & Gestural Icons

3:15 PM

1

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

TAP

TAP again to close the sub-menu.

2

3

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

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

3:15 PM

FARES & TICKETING MENU

TAP

4

33

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.


Hi-Fi & Gestural Icons

3:15 PM

PASSENGER FARES SCREEN

1 2

TAP

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.

PRESS AND SLIDE

3:15 PM

3

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

4

TAP

5

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.

6

34


FIN.


Washington State Ferry App Proposal  

This proposal argues the need for a new app for the Washington State Ferry system, targeted at local commuters and designed to aid rider sch...