Russell Smith - Design System

Design System

EF Education First is one of the worlds largest private educational companies and consists of 22 business units operating in 114 countries/regions. Each business unit operates independently but still belongs to the EF brand family. In other words EF is a branded house, not a house of brands.

We approached our directive of bringing and maintaining consistency within all our digital touch-points by implementing a Design System. One that is based on the methodology of atomic design. Icons, buttons, and typestyles being our atoms, they can be combined to make components, where there is more freedom for creativity. Within these components, like cards, expression comes into play in changing the background colour, imagery, interaction and so fourth.

For our 300 designers, a Sketch document houses all our core elements, such as our logos, type varieties, horizontal and vertical spacing rules. As well as common components we highlighted through audits headers, footers, forms, carousels and video windows to name a few.

In an networking pursuit, our studio aligned the majority of marketing teams onto our plug and play CMS (Content Management System). Ultimately freeing up our designers to focus on expressing brand values and designing specific solutions, rather than reproducing variations of common components.

Putting our Design System side-by-side our Global Brand Guidelines, this holistic, digital platform became a single source of truth for the entire organisation to access and rely upon. It empowered our teams to produce consistancy, but more impressively - rapidly move into being more expressive with brand identities and inspiring experiences.

A common challenge to overcome is the cultural differences between Design and Development teams. Interaction Design and Branding are all too often at the mercy of poor scoping; and to alleviate this, the design system was built alongside a developer friendly environment that the product teams can kick start from. It houses all the components, spacing rules, colour values and so fourth which are kept updated and in-line with the ever evolving Design System.

Designers and Developers using the same tool sets and guidelines from beginning to end, ensured the user experience was consistant and visually competent across all our products and future initiatives. The follow projects all influenced and benefitted from the development of EF Education First's Design System.