via_rail_cover.png

Via Rail

 

Via Rail

Updating the UI for Via Rail’s mobile app, for a stress-free trip booking experience

 
 

Project Summary:

Done over a 1 week, this self-motivated project helped me improve my UI skills.

Deliverables:

  • Mock-ups

  • Design Library

Tools:

Figma

 
 
 
 

Strategy

As a frequent user of the Via Rail app, I wanted to simplify the experience and clean up the visual clutter

 

(Click to enlarge) Existing Via Rail UI

 

After reviewing the existing experience, I made note of the following issues:

  • Small touch points that make it difficult to interact with the interface

  • The design is cramped and doesn’t make full use of screen real estate

  • Colour contrast issues

  • Inconsistencies in font hierarchy and components i.e. buttons

Additionally, I read through app store reviews to understand what user feedback I could incorporate in my designs.

 
 
 
 

SKETCHING

When I sketch, it’s helpful to start with no outside references. When I finish my first round of sketching, I’ll pull references from websites like Mobbin, Dribble or from research on specific design patterns.

 

(Click to enlarge) Early sketches of the sign in page

 

(Click to enlarge) Sketches outlining the trip booking process

 
 
 
 

Design

To stay consistent, I developed a small scale design library focused on high-contrast components with bigger touch-points for a more accessible user interface

 
 

(Click to enlarge) Login screen variations

 
 

Working through the first-round of visuals, I focused on improving the following:

  • Login - included a background image with an overlay to guarantee enough contrast. This could also be an area of personalization for the brand, by giving them the opportunity to switch out images as the seasons change

  • My Trips - designated a separate section for offers/promos

  • New trip flow - reducing the content for each step to make it easier for passengers to process. This would also help the brand when translating to French

 

(Click to enlarge) First round of mock-ups

 
 

With the second round of mock-ups, the main updates included:

  • Simplifying the items in the toolbar from 5 to 4

  • Moving the first step of the new Trip flow to the home screen to reduce friction for users and help them get started faster

  • Reduced the number of steps for the New Trip flow from 5 to 3

 

(Click to enlarge) Second-round of mock-ups

 
 
 
 

thank-you for reading!

Wanna learn more about this project? Let’s chat

You can reach me at: kerleajoseph@gmail.com