Elements
Creating a design language system: A handbook
For any business, the most important story to tell is your brand’s. And through that story, you can educate, influence, teach and inspire.
But how do we guarantee that, with every product, experience and service, we bring our brand story to life?
With a design language system.
So that was our goal: To create a visually striking design language system for Etihad. One that translated the brand proposition, Choose well, into a unique user experience. One that would hold up to interpretation both inside our organisation and externally by agencies and vendors.
And so, we created Elements.
How we built Elements
Here’s how we built Elements — Etihad’s first-ever design language system — in six simple steps.
- 🎯 Set goals: What did we want the design system to achieve?
- 🎉 Identify success factors: What did success look like and how would it be measured?
- 🚀 Build a team: Who needed to be involved?
- 🔒 Lock an approach: What would the design system look like?
- 🏃🏽♂️ Getting up and running: How were we going to build the design system?
- 📝 Planning for the future: what could our touch point ecosystem look like in 5-years; and working backwards, what mechanisms do we need to put in place to learn and scale?
Over the course of six weeks, we:
- Defined the design principles
- Defined the success criteria
- Created an experience map
- Ran exploratory sessions to review existing channels
- Created a visual design repository
That enabled us to deliver:
- Experience principles
- An experience map
- A research plan and results
- A design rationale
- A prototype
- The first iteration of Elements; a digital style guide made in front-end code
Why did we need a design language system?
A design language system is an essential toolkit for anyone involved in design or creation.
After all, design is a form of communication.
That means that every colour, every font, every pattern you use will directly impact the way customers perceive your business — before you’ve even written a word (we’ll come on to that).
A robust design language system makes even the best digital experiences better. Using the atomic design methodology, it ensures a consistent visual identity across multiple channels and experiences that are always brilliant; from the smallest pixel to the biggest channel implementation.
But it also makes life a lot easier for designers too.
Inconsistency, slow processes, always feeling like you’re starting from scratch? A design language system eliminates those things.
Here’s why implementing a design language system is a no-brainer …
- Turn inconsistency into consistently better experiences
- Provide one single source of truth
- Guide and leverage collective efforts
- Empower teams to work with less constraints
- Establish coherent experiences
- Create synchronised designs
- Ensure copy is optimised
- Accelerate the pace of creation and innovation, and time to market
So, before we built Elements, we defined three core objectives:
- Create a single source of truth for anyone involved in design or creation: Etihad has teams all over the world. We needed a system that would guarantee that we keep our brand at the heart of everything we do. No matter where you are in the world, you understand exactly who we are and what we do.
- Empower inspiring and consistent digital experiences: We aspire to make digital experiences better.
- Design a system that could continuously grow and evolve: Elements had to be a robust system that makes life easier for everyone.
What would success look like?
By clearly establishing what success would look like, we were able to start making decisions straight away that supported our vision for Elements.
For us, a successful design language system would:
- Improve efficiency
- Increase consistency
- Increase brand effectiveness and brand recognition
We currently measure these indicators through:
- Time spent on design
- Time to market
- Net promoter score (NPS)
- Customer satisfaction
The team
To create the design system we had in mind, we needed a team of specialists.
People who we knew would deliver on our vision.
So, we assembled the A team …
🕺🏾 Programme manager: Responsible for delivery and operations, enterprise stakeholder management, scalability and optimisation and demonstrating business value.
👩🏽🎨 Creative lead: Organises the design process and is responsible for the overall quality of the concept. Their goal is to make sure that the design aligns with the business’ and user’s objectives.
👨🏼🎨 Art director: Has an overview of all implementations of the identity across multiple platforms and delivers the research-based rationale for the design direction. They need to guide stakeholders in the process of the transformation from the old style to the new.
🧑🏿🎨 Visual designer: Translates functional service solutions into a user interface design that matches the identity of the brand. This might include motion and sound as well.
🧑💻 Front-end developer: Implements the design into workable and scalable code. Performs tests and reviews the codes that are written to maintain the quality of the platform.
The approach
We used a three-phased approach to create Elements. We used existing style and communication artefacts and translated them into a consistent, future-proof digital style guide.
The approach ensured maximum flexibility and scalable adoption across the organisation.
Phase one: Alignment
- Adjust design principles
- Update user experience map
- Align with existing documentation, for instance the brand book and tone of voice guidelines, to create a research plan
- Explore where and how the Etihad brand can be applied to discover where innovation opportunities lie
- Create a design repository
Phase two: First implementation
- Translate elements in the design repository to build a front-end library
Phase three: Future preparation and expansion
- Create a road map detailing how Elements will grow, adapt and expand in the future
- Set up governance model to ensure quality
- Create a continuity and validation plan to manage the future growth of Elements
Getting up and running
The diagram below shows how Elements works, feeds into and extracts from all touchpoints.
The future of Elements: Learning, improving, evolving
Creating Elements has been a continuous cycle of learning, improving and evolving.
And it’s paying off.
Here are the top five things we’ve learned from building a design language system:
- 🚀 Implementing a design language system really works. Undoubtedly. Our teams are more efficient, we’re faster to market and our consistency scores are rising — rapidly.
- 💙 Elements is a tool people didn’t even realise they needed, but now they want. Even the doubters will come to love — and be advocates for — your design language system. And that in turn encourages even more people to start using it to create better designs.
- 🍃 Elements is — and will always be — evolving. We’re consistently developing, testing and adapting the system to make sure it really works across every single area of our business.
- ✍️ Guidelines and rules are crucial. I’ll say that louder for the people in the back: they are vital. Design isn’t just about having access to the right components; it’s understanding exactly how to use them.
- 🧰 You must have the right tools to create an effective design language system. The three we couldn’t live without are: Abstract, Sketch and zeroheight.
There’s more to come …
The best thing about Elements? It’s always getting better. As our systems, processes and business matures, Elements will evolve too.
Next on our agenda (drum roll please) 🥁:
- Sensorial design — inclusive, multi-sensory designs that incorporate touch, sound, smell and the human body.
- Dig deeper into the way we communicate in a digital world. Use data and insights to expand our language and writing guidelines to guarantee that what we write is exactly what we want our customer to know.
- Keep evolving the basics — because we understand that the small things have the biggest impact.
Watch. This. Space.
Article written in collaboration with Marvin Burton and Charlotte Ibbetson.
Thank you for reading!
I hope you enjoyed it. If you have any feedback, I’d love to hear from you.
Say 👋 hello at vdesaubin@gmail.com or connect with me on Linkedin.
