Trainline
Brand x Design vision
🤜🤛 DREAM TEAM
Let us begin by introducing the dedicated Design team that looks after crafting the UI Vision.
🎯 OBJECTIVE
The primary objective is to provide an in-depth understanding how to apply Trainline branding on our product. Our North Star is to engage the UX team while providing clear and purposeful direction.
Our purpose
Why a UI vision?
Our vision is to ensure that our product truly embodies the core essence of our brand.
The UI Vision serves as our guiding North Star.
Provides direction.
Maintaining a cohesive look and feel within our product.
Aligning design elements with our brand identity, establishing a singular, recognisable visual identity.
Quick application, enables efficiency and consistently.
Our what guide us
UX principles
Capturing Brand essence in the product:
Utilise our brand's unique shapes, typography, modules, and photography to infuse our product with its essence.
Divergence in Visual Expression:
Acknowledge that certain visual aspects may vary between the Product and Out-of-Home materials.
These variations are driven by factors such as Accessibility and adherence to UX standards.
Product expression
Brand colours
Enhancing design and interaction: Color serves to enhance design accessibility, hierarchy, and user interaction.
Bold core colours: We use bold core colours except when alongside CTAs, where lighter versions are preferred.
Expanded colour palette: Additional colours define hierarchy and content sections.
Typography choices: "TL Circular Bold" and device-specific fonts (iOS: "San Francisco," Android: "Roboto") maintain consistency.
Product expression
Photograph and shapes
Within the product, we restrict the overlay of text on imagery to merchandising slots exclusively. This approach aligns with our commitment to maintaining accessibility standards while safeguarding the core functionality.
Product delight
Animation
Collaborative motion guidelines: In collaboration with the Brand team, we have established comprehensive Motion guidelines.
Defining parameters: To ensure cohesion, we have defined specific parameters for Easing, Duration, and Delays for all animations.
Easing choices: For basic functionality, we employ Productive parameters, while for more branded interactions, we opt for Expressive parameters.