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.