Digital first brand
Inheriting a brand with a naturally strong focus on print gave us the opportunity to make it fit for Flybe’s digital presence.
- Client
- Flybe
- Sector
- Travel
- Duration
- 4weeks
- What we did
- Interface design
- Digital–first branding
- Design ops
- Product design
Following an acquisition by a consortium that includes Virgin Atlantic, Flybe were looking to rebrand and refresh their identity as a new Virgin Atlantic sub-brand ‘Virgin Connect’.
Branding partner Pentagram were already enlisted to focus on identity at scale; from planes, uniforms & marketing collateral to napkins and paper cups. Flybe needed a digital partner to help rationalise the new brand direction and apply it to their existing UI components which could be rolled out across their digital estate to coincide with the new brand launch.
In a fast-paced four-week engagement, we redesigned core pages informed by the new brand direction. Then we delivered a library of components that would replace and compliment Flybe's existing design system.
The Results
Repurposed design system
We built upon Flybe's existing design system, updating all components with their new visual layer, while also setting them up for scale and complexity with new components to help maintain a level of consistency.
Collaboration at pace
Working closely with Pentagram and Flybe we collaborated every step of the way. Having the right people in the room made decision making more efficient, essential for when delivering a project at speed.
The Full Story
How do you design and deliver at pace while minimising project risk?
We had four weeks to redesign and deliver the entirety of Flybe’s digital presence. We broke down our approach into four key stages:
- Familiarise ourselves with the new brand direction and existing digital platform to uncover any limitations that may impact on time.
- Explore and redesign core user journey pages to visualise the application of the new brand across a breadth of UI.
- Run an audit throughout to cover all levels of components.
- Design a scalable systemised library of components that could be rolled out easily.
During the project the core brand was still in development, so we had to adapt our way of working in order to mitigate the associated risk. We did this in two main ways. We fast-tracked some of the decision making through frequent collaborative sessions, and we worked on low-risk areas first.
How do you optimise a print-led brand for its digital counterpart?
Digital-first brands are built on experiences. While offline branding for print helps to serve the building blocks. Establishing the digital touchpoints during brand development will help uncover how varying UI components can flex to share the same visual language.
From the start, we were working in parallel with Pentagram. The core brand was still evolving which allowed us to explore and refine the digital design application, and ensure it had the appropriate level of representation. We were able to consult with Pentagram to ensure guidelines were baked in, enforcing best practice web principles including accessibility, an extended colour range for the user interface, grids and typographic scale.
Collaborative systems thinking
Design tools are becoming more advanced in collaborative ways of working. The pattern library was created between two designers using Adobe XD, Flybe's tool of choice. We adopted XD as the tool to remain within Flybe's ecosystem. This decision allowed us to fast-track progress and any collaborative learning curves when handing over an artefact that would seamlessly fit within Flybe's DesignOps process.
We started with the functional booking flow to build up a shared language of the core atomic components. As we were designing the system at speed, we were missing a layer of governance where component styles were used inconsistently. So we introduced a contribution process that we dubbed ‘component teardown’. It's an exercise for when more than one designer is contributing to a system and needs to remain in sync over a short duration. We time-boxed this activity daily as a means to challenge UI styles and patterns. Every day we would strip out unnecessary bits we didn’t need, and refine what we had to enable confidence as we scaled out the complexity. Introducing this process created an efficient workflow and helped encourage more objective decision making.
Leaving behind a design impact for the future
Flybe initially had quite a low-level design system where few components were documented or simply went unused. What we left behind for their team was not only a reskin of their existing pattern library but a refined library with up to date, documented components, as well as implementing a structure that would scale for the future.
We also produced documentation on the atomic design process for the greater Flybe team. Visualising how the approach influences the makeup of their web pages and how this leads to faster page generation. This was crucial for embedding best practice and generating internal understanding to improve ways of working to support further developments.