BC Ferries App Case Study

ux/UI | Brand Compliance

Technological problems are some of the last issues travellers should confront on a trip, so in this case study, I updated the interface of the BC Ferries iOS mobile app, making for a more straightforward user experience.

The Process & Design

In my process, I did a thorough review of the application to assess the main goals in each page, recognizing the problems that arose in user flow, then reorganizing the elements – even removing ones that were redundant or cluttering the interface. Throughout the project, I applied a flat design for an easy-to-read, minimalist look while also maintaining BC Ferries’ visual brand style in type and colour usage.

Problems
Some of the main concerns of the app was the amount of floating elements (such as text), its absence of groupings, and its ambiguous hierarchy in guiding users.

User Flow
Applying a newly strategized user flow, the interface was rearranged based on the order of priorities: quickly accessing booking information, booking a sailing, then browsing through sailing conditions and schedules.

Design Enhancements
Considering this perspective and after sketching the layout, I worked on Figma and Adobe Illustrator, creating low and high-fidelity mockups, reorganizing the navigation bar, grouping content into cards, ensuring icons were in a consistent style, as well as designing the buttons with rounded edges to stand out against the square-like cards, keeping them mainly in dark blue (#003467). Once completed, mock-ups were prepared on Adobe Photoshop.

The dark blue buttons and cards had the most contrast against the light-coloured background, selected intentionally to present a main target that draws in the user. Reinforcing this hierarchy, I selected buttons next in priority as a lighter blue (#0279A5) so not to overpower the dark, then disabled buttons and cards as various values of grey, almost blending in the background.

A. Home screen

Menu removed – consisted of features that redirected users externally to the BC Ferries website.
Travel advisory banner reduced to a button but incorporated use of a red circle to capture attention for unread notices which disappears once user opens it.
(H1) header in previous design lacked legibility against the photo banner. Replaced with another image and ensured text placement was against an area with high contrast.
Buttons under the banner image are meant to drive users to two key actions/conversions: booking a sailing or vacation package.
Duration of trip added, removes the task for user to calculate based on the provided departure and arrival times.
Added “Pass and details” button for users when they’re in a rush, within reach. Redirects to screen F: My booking.
Global navigation reordered based on user’s priorities, keeping personal bookings within the clickable hot zone – especially in the case when the user immediately requires their pass for scanning.

B. Book sailing

X removed for redundancy, users can use the back button.
Progress bar with icons added to quickly show users what steps are lined up in order to continue in booking a sailing. "Select trip preferences" card also remains static to keep users in check of what’s to be completed compared to the previous vertical arrangement which tends to get lost as more options are selected and the screen expands.
"Return" buttons under Passengers and Vehicle will remain disabled if user does not select a Return travel date.
Clicking on the buttons in each step will bring up a slide-up panel where the user can make their selections (each would look similar to C: Book sailing (Route selection)).
Global navigation removed for “Book sailing” screens to ensure user doesn’t click away and lose their progress while simultaneously helping fulfill a conversion.

C: Book sailing (Route selection)

Besides the search bar in the previous interface, there’s no clear direction of how the user should interact. Previous design required users to scroll to select their routes in a box on the card (located under "Routes by region"), but there’s no indication as to where the boundary of this box is. Replaced this arrangement with buttons containing imagery of sailing destinations. Use of imagery also engages the user while having a clear presentation of scrollable options.
“Book sailing” header in the original screen from B: Book sailing darkened in the background, but legible with a lowered opacity to help users remember which screen they’re on.
i. User has the option to either search for their departure and arrival location.
ii. Alternative is to begin by selecting a region in the drop down menu which then presents the city/terminal image buttons.

D: Book sailing (Summary screen)

Once all selections are completed, icons in the progress bar become dark blue on a white background.
Buttons for "Route", "Travel dates", "Passengers", and "Vehicles" will also match the formatting of the icons at this stage but will remain clickable for user edits.
"Continue" button only becomes enabled once selections are completed.

E: Conditions

Smaller blue buttons like this would open a slide-up panel providing more info.
This text would be transferred into a slide-up panel when clicking on the "Estimated space available" button.
Only the last three sailings would be listed before the upcoming, those before that become irrelevant to the user.
If necessary, users can refer to the link under “More sailings” redirecting them externally to the BC Ferries website.
Removed section for cameras to instead be accessible through a button as a slide-up panel.

F: My booking

Added feature to expand the barcode for ease of scanning by ferry terminal staff.
Clicking on these three buttons would redirect users to the corresponding page in the app ("Conditions" or "Schedule") or in the case of “Terminal cams”, display the footage in slide-up panel format similarly shown in C: Book Sailing (Route selection).
Global navigation removed to prevent users from accidentally clicking away from the screen and having to navigate back to the pass.
“Add to Apple Wallet” included to give users the option to have even faster access.
“Berth #” added to help users navigate where to head towards upon arrival at the terminal.

Reflection
In this case study, working with a monochromatic colour scheme brought its challenges, especially in determining the best tints, shades, and values of blue and grey that were still distinguishable to separate the elements. Overall however, this project helped me develop a careful eye in brand compliance, maintain a consistent style, and understand that all the difference is truly in the details.