European high speed rail operator Eurostar were undergoing a major rebrand. The decision was made to overhaul the design system.
At the same time as implementing the new brand, our team was tasked with building this new system, which presented an opportunity for much needed improvements.
Over 6 months, as we applied the new brand to component designs, we constructed a design system, documented it and then handed it over to developers.
The result was a much improved method for building new products, all in line with the new brand.
Insights from user segments and analysis of industry leaders such as IBM’s Carbon and Google’s Material, to provide valuable benchmarks.
Synthesising these findings facilitated informed decision-making throughout the design system's creation process.
We formulated a strategic roadmap guided by clear goals and design principles. This framework ensured alignment with organisational objectives, laying the groundwork for a cohesive and sustainable design ecosystem.
After buy in from senior stakeholders and engineering teams, we were ready to start designing.
The new brand font La Pontaise was very recognisable and was to be used liberally in headlines.
However, the secondary font that was first put forward by the branding agency was inadequate for our accessibility needs, and so we settled on the robust and reliable font named ABC Social.
Together, these ensured readability across various platforms and screen sizes.
Colour was a big part of the new brand and the palette underwent a meticulous revision to align accordingly.
It needed to be flexible enough to accommodate a wide variety of uses, yet we set limits to avoid it being unwieldy.
Accessibility considerations were paramount, prioritising contrast ratios and colour combinations to ensure compliance with WCAG accessibility standards and enhance legibility for all users.
We used tokens, which are predefined variables representing specific colours or other values.
These tokens enable consistent application of values across user interfaces, facilitating efficient design updates and ensuring visual coherence throughout the system.
I implemented a new flexible grid system that provided structure and consistency to design layouts.
By establishing clear guidelines for spacing, alignment, and hierarchy, I sought to streamline content presentation and navigation, facilitating intuitive user interactions and ensuring a seamless experience across devices and screen resolutions.
Atom components, such as buttons and text, were then used to build more complex Molecule components, which in turn make up Organisms (such as content cards), Templates, and Pages.
We leveraged the Variants feature in Figma to merge variations into component sets, complete with bespoke properties and values. This adoption of variants streamlines component management, navigation, and swapping within the sidebar menu.
Accessibility was integrated into every aspect of the design system, from colour choices to typography and interaction patterns.
We adhered to WCAG guidelines, prioritising inclusive design practices to accommodate users with diverse needs and abilities.
This included optimising text contrast, providing alternative text for images, and ensuring keyboard navigability and screen reader compatibility.
We conducted a comprehensive sign-off process after the first round of components had been completed, involving stakeholders and the engineering team. Stakeholders provided feedback and validation to ensure alignment with the brand.
Concurrently, close collaboration with developers ensured feasibility and scalability. This sign-off marked readiness for implementation, minimising potential challenges and ensuring a smooth transition to the next phase.
We provided detailed documentation and guidelines for the developers, facilitating the seamless implementation of design assets into production code.
Storybook was also used for documentation and to showcase code-based components in an interactive development environment, across different platforms and devices.
