BC Ferries
BC Ferries
BC Ferries is a main transportation service for the Greater Vancouver and Vancouver Island area. Users can book, view and plan trips through the BC Ferries website or app. Throughout the years, the ferry system is the main cause of a lot of painpoints for users needing to travel between the island and the Lower Mainland of Vancouver thus a design proposal was prompted. I saw an opportunity initiate and mockup screens as a part of my interview to showcase my design process.
Goals
Identify user painpoints through surveys.
Design and prototype quick wins in a limited timeframe.
Opportunities to improve screens with basic design principles.
Survey
I initiated a design sprint challenge. A friend of mine recently booked a trip through their website so I generated a user survey to understand user insight, painpoints, goals/challenges and additional feedback.
Top 3 Priorities:
1. Simplified navigation
2. Difficulty finding information
3. Payment processing
-Survey conducted
Current Sitemap
Login
From the feedback on the survey, the login user-flow is one of the highest pain-points on the user journey, so improving the user flow and reducing user input and challenges is top priority as it’s the first impression of the app. Additionally, number of functions are only available after logging in, so we want to eliminate redundant screens, reduce login popups and visual clutter.
Quick wins like better navigation placement can be improved, sand placing the BC Ferries logo on a better background that won’t blend in with the image.
Brand colours and information hierarchy can be improved. Items such as additional contact information and social media links adds to the overall interactivity and as a way to get help if users are stuck.
Old
New - with changing travel tip header
New - Login v1
New - Login v2
Renew/Create account
Repeated header/button text, button should be indicate the action.
Old
New
Login
Text overlayed on top of image is harder to read. Also a number of navigational elements are on top of the image - Logo, Menu, Text, Login button.
Booking is not available outside of the Login flow, so we can reduce visual clutter by removing the bottom two booking navigational buttons.
We can also save a lot of scrolling by reducing the height of the “Start Booking with the App” section.
Old
New
Menu
A large section of the menu is not available without logging in so this is also removed to simplify the design.
Contact Information is shown above the fold for additional help with an older demographic for support staff to help.
Old
New
Additional elements
Missing indicators for required fields to clean up the current UI.
Old
New
Proposed Sitemap
Reflection
Schedule & Current Condition tiles in the middle of the main screen are kept, however I would run user testing to observe the redundancy of these duplicated icons in the navigation. In addition I would test if these refreshed icons are understandable for users and help drive consistency in the redesign.
