Mapping out required steps to meet the user goal
The first task was to identify all the micro-steps that the user needs to successfully book a ferry ride from their mobile device: the type of info that would be required, amount of time it would take, and ways how I could enhance and simplify that experience with design.
Sketching ideas to define what goes into each step
Then I quickly drew a low-fidelity wireframe to start thinking about specific UI elements for each step that could help to simplify and improve the completion of those required steps.
Default view: schedule or map
When I was thinking about the default view of the first page, at first I was considering to show the schedule with previously searched items, but then after I drew the entire flow I realized that having a map with possible routes would serve the users much better.
Digital Wireframes
After solidifying my ideas, I started to create digital wireframes. My goal was to have a mid-fidelity deliverables and ignore anything not directly-related to this flow.
Specify the start destination
A quick simplification of this step is to enable location services, so the app could immediately locate the user and propose the closest ferry station.
Showing a map with visualized possible routes could be an excellent way to educate users on their destinations from where they are, aid them to make the correct choice faster and remember names of the station they need.
Specify the end destination
A lot of platforms do not restrain users from selecting from an entire database of stations, which often leads to choosing of routes that don't exist. I decided to restrict the options only to the possible ones based on the start destination. The available destinations are in alphabetic order.
Selecting passengers: The default selection for number of passengers is "1 Adult" which seems the most reasonable (which in reality need to be verified with research).
One way vs. round trip: Although many ferry business offer only "one way" tickets, it's important to include roundtrip as it's an expected option (instead of expecting a user to do the same transaction twice).
Choosing day and time: Time is critical in transportation. I decided to make the default "now," so if the user is in a hurry, she has one less step to complete. Otherwise, I imagine the best UI element to quickly select the date and time is the iOS picker wheel.
Schedule: The schedule appears underneath the search and gets refreshed as the user applies more filters.
When users start to scroll through that list, the search will collapse to give more space to the search results. I decided to put a dragging UI element just to educated the first users that they could drag the list and thus minimize the search area.
Each schedule box contains the most critical information about
- departure and arrival times,
- travel length,
- route type (non-stop vs. with stops),
- the price for the one-way trip, and
- possible amenities (wifi, hot beverages, accessibility).
Accessibility can be problematic when traveling, so indicating if the ferry is wheelchair-accessible is critical on the top level (and potentially be one of the filters in the search).
Ferry ride details: The detail screen contains the visual representation of the route, complete information about the trip, the price of the ticket, and an option to purchase the ticket.
Easy payment: For the payment screen, my objective was to keep it as minimal as possible, yet friendly. Another idea I'd explore for inputting card details is photo capture of the card, so the user won't have to type.
When the user has a card on file, the payment step should be completely automated (skipped).
Goal accomplished: The last screen contains the ferry ticket with complete information about the trip and a QR code to be scanned by ferry staff.
People have different habits and expectations about tickets (and so do transportation companies) - an ability to export the ticket in a .pdf format, add it to iOS Passport app, or text it to the mobile device or email can add a final touch of usability at the end of this transaction.
Set an alarm: An timely alarm could help users to remember about this booking and arrive on time for their ferry ride.
