Introducing a Design System at EF Education First
Key thoughts and learnings from launching a Design System
How do you create consistency across digital touch-points in an organisation with over 46,000 employees, 22 different business units, that operate in 116 different countries, all with their own challenges, expressions and needs?
A few months ago we launched a Beta version of the very first EF Education First Design System. It contained a solid structure with a set of basic UI elements and guidelines along with tutorials and instructions for use.
The journey up until we launched was both intense and exciting. I must admit, up until the point of our first release it really felt like we were stumbling in the dark, sometimes not really knowing where we were going or how things would turn out. But somehow we managed to build, develop and ship a tool that designers and developers at EF today find useful and have keenly accepted into their daily workflows.
Here are some of my key learnings and thoughts along that journey:
Not a system but an eco-system
I very quickly learned that a Design System is more than just structuring UI components in a Sketch-file. A Design System is a product serving a product and requires an integrated ecosystem around it.
Working on the EF Design System has been a profound learning experience that has been just as much about research, testing, administration, project management, marketing and development as it has been about design. In fact designing the system itself has been a bigger and more challenging task than designing the UI elements that the design system contains.
…designing the system itself has been a bigger and more challenging task than designing the UI elements that the design system contains.
I could spend my whole day iterating on buttons, but the reality is that it is probably not button gradients that is going to convince designers in the company to use the system. People are usually more concerned with how the system fits into their workflow and if using the system restricts them more than it saves them time.
…it is crucial to not only consider the UX of the elements a design system contains, but most importantly to consider and improve the UX of the system itself.
The purpose of a Design System is not only to provide design components, it can also solve organisational and political issues, optimise workflows and create a common ground where teams can come together. Therefore, it is crucial to not only consider the UX of the elements a Design System contains, but most importantly to consider and improve the UX of the system itself. This involves f.ex. considering how we onboard and educate our users about how to use the system (our users being designers and developers at EF). How do we notify users about updates? How do users share questions and feedback? How do users contribute and how do we define what goes into the system? These were some of the challenges we focused on trying to solve at a very early stage.
The dilemma of consistency
A Design System allows designers and developers to pull visual, structural and behavioural styles from the same source, thereby creating alignment across digital touch-points. That being said, more alignment will also create an increased difficulty for users to distinguish and differentiate touch-points among each other.
One of the biggest challenges we face is creating a consistent system for all products that belong to the same brand family, while making the system flexible enough to adapt and give room for individual product expression.
Consistency does not necessarily mean making things the same, but some things have to be the same for there to be consistency.
Within EF there are 22 different business units, that sell a range of offerings and services to different markets and customers. These all have to be differentiated and distinguishable from each other, but also have to belong to the same EF brand. This creates a consistency dilemma: how do we create “same-ness” without making everything the same? Consistency does not necessarily mean making things the same, but some things have to be the same for there to be consistency.
To do this we have to determine what elements build a feeling of recognition and familiarity across products and touch-points in the digital space — and thereafter strive to make these elements consistent. At EF we are currently striving to create a minimum set of reusable elements. Outside this core set designers are then encouraged to add product expression. What the core elements of the Design System are is something we are exploring and testing together with the different product teams.
Promote the system’s purpose
In an organisation where digital guidelines have never existed, it seemed inevitable that we would meet resistance. One of the main concerns for designers at EF was that the Design System would restrict their creative freedom. This is problematic because the intent of the system is not to retain creativity but to frame it. In fact, emboldening designers’ creativity by solving the simple problems is one of the main goals of the system.
To clarify this we decided to take the Design System on tour. We invited designers, developers, product owners and anyone else interested across the organisation to participate in hands-on workshops. In these workshops we first walked through the setup, use and application of the system, followed by a creative exercise, where the participants (Sketch savvy or not) were tasked to create a design in 40 minutes using the system.
The results that came from both designers and non-designers in the limited time period was impressive and telling in two ways: 1) We noticed that the exercise sparked a shift in attitudes when participants realised they could spend less time designing common elements like buttons and links and 2) The quality and great variety of the designs exemplified the amount of creative freedom available.
To summarise:
- Functionality over form — Focus less on the UX of the elements a Design System contains and more on UX of the system itself. A user-friendly Design System that has been adapted to the workflows of its users (the designers and developers) and has easy on-boarding will be used more. Once the ecosystem has been set up it will be easier to iterate on the elements it contains.
- Strive to create “same-ness” — Too much visual, structural and behavioural alignment will create an increased difficulty for users to distinguish and differentiate product touch-points from each other. Too little alignment will however create an inconsistent user experience. Identifying the core elements that create this consistency is key.
- Explain and exemplify rather than inform — Be prepared to preach and teach the organisation about the Design System’s purpose. Instead of telling people what they should do with the system show people what the system can do for them.
Thanks for reading! Credits to Matti Hicks for writing guidance.
