January 10th, 2019Note: Unfortunately my notebook with the original FerryFriend sketches was lost and otherwise would have been included.
FerryFriend was originally built to bridge a gap when there weren't other options available. Since that time, new ferry apps emerged, however, there was a lot of room for improvement.
Designing the Perfect Schedule
Making the schedule as clear, easy to access, and feature complete as possible was one of the primary goals of my design. By looking at the analytics data from the first FerryFriend, I knew that most people use the same routes routinely, so the first step was introducing "starred routes". A starred route would give you information on the next sailings from the home screen, as well as quick access to the full schedule. Here is the original mockup:
This was imagined at a time when I thought I would also be able to include real-time departure updates with the schedule. Spoiler alert: it didn't happen, yet...
The final design didn't end up too differently than the mockups. Some features of this design:
- Starred routes works by determining your location, and then showing you the schedule for the direction that you'd be traveling on the ferry.
- Tapping a schedule item shows you the arrival time for the ferry. The arrival time is determined by the crossing time and takes into account any schedule exceptions automatically.
- Reservation information is shown in-line with the schedule. You can quickly see how many reservation spaces are available and make a reservation directly within the app.
Making Line Cameras Useful
One of the most potentially useful features is line cameras. WSDOT (Washington State Department of Transportation) has cameras setup on the roads where cars queue for the ferry. However, they are very hard to use if you don't know what exactly they are looking at. Here is the WSDOT app ferry line camera screen:
Trying to figure out what "Edmonds Ferry Underpass" or "Edmonds Ferry Pine" is a challenge for even people familiar with the area. The solution for FerryFriend was putting the camera images directly on a map that shows where the camera is pointing. Users can swipe through the cameras to see what the line looks like at various points, or even select a camera direclty on the map.
The Loading Screen
This could probably be a post in itself, but I figured the most appropriate loading screen for FerryFriend would be an animated ferry loading. The image was built in illustrator and animated in After Effects.
And Much, Much More!
A ton of work went into making FerryFriend what it is and I could give you pages of screenshots, but some of the things I'm most proud of include:
- Calendar based date picker for easy trip planning.
- App color changes based on the schedule season. Those of you who are familiar with the paper schedule will recognize the colors for each season. FerryFriend emulates that throughout the whole app.
- Set reminders for when reservation space becomes available.
- An animated, live vessel map that shows the current position of each vessel.
- WSF alerts pushed straight to your phone if you choose to subscribe.
- A ferry ticket scanner that lets you check on the remaining uses for your tickets and passes.
- The first ferry app to show arrival times for every route.
Explore FerryFriend Yourself
Want to check it out? FerryFriend is free on the app store.