Look inside Poncho: transparent and transferable Design System of ANWB
Eighteen months ago, ANWB had no single source of truth when it came to design. Working with 30 developers, 1 UX lead, 16 UX Designers and 1 visual designer on 6 mobile apps and multiple web platforms was a big challenge. While building and maintaining the products consistency is key. Therefore a Design System became a must for the ANWB. They needed to find their single source of truth and piece everything together. This is exactly what Sanne, Chloé, and Maaike did for the past 12 months. Building Poncho, the ANWB Design System. Luckily, we had the chance to talk with them.
1 (non-dedicated) Design System Team of 7 people with a product owner, scrum master, lead front-end, front-end developer, back-end developer, UX Designer (Sanne) and an analyst.
3 Design System Team mates (Chloé, Maaike, Sanne)
9 teams for web and app
30 Front-end Developers
1 UX Lead
16 UX Designers
2 UX Researchers
1 Visual Designer
42 applications are built with Poncho
88 Elements and Components in Poncho
How it began
Nobody within ANWB could tell what the single source of truth for design was 18 months ago. Undoubtedly, it was impossible for Chloé as a freshly hired Visual Designer to help others without this knowledge. This was the main reason for Chloé to set up a Design System.
The front-end developers were already busy setting up a component library, but there wasn’t anything there for the whole organisation. So there was some movement, but not something like a design system yet.
First, she looked at possible tools that could help her capture everything into one Design System. She analysed different options like Sketch Libraries, Invision DSM, Brand.a.i (RIP) and others. This raised the following question; what tools are currently used by designers? She realised that her first step should be about getting to know the current workflow of designers.
When I first started at ANWB, I came across a lot of inconsistency. There was no clear vision on when to use a certain color for example. How could I help other UX designers if there is no single source of truth?– Chloé
Analysing the current tools and workflow
By conducting a survey the ANWB wanted to find similarities between tools and workflows; a clever approach! Chloé asked the people in this survey: What does your workflow look like? What tools do you use? With whom do you check your final Designs? And finally, how do you collaborate with developers?
Process and inventory
Alongside the survey, Chloé, Maaike and Sanne did a Design Audit to create an overview of all the current elements and components that were being used within the products of ANWB.
They created an outline for the Design System based on the results of the audit. They didn’t only look at the naming and structure of components, but also at how certain components could be added to the Design System. To visualize their process the they made a poster.
Both creating the inventory and process poster as well as the final results were shown in the middle of the office. For everybody to see. This method created a lot of awareness among other colleagues and also the IT-board became interested. People started to become engaged in what they were doing.
A Design System exists for 80 percent out of co-creation, it is all about the process in the first place.– Sanne
Awareness is key
To raise awareness and educate their colleagues, Sanne and Chloé gave a presentation to get Poncho going. They also offered a physical Poncho to the people, with their Design System Logo (a dog with a poncho) on it and shared a link to their first DSM environment. Colleagues would easily remember Poncho now!
The design system team shows the value of Poncho through Poncho updates, talking with managers and having updates with product owners. Equally important is adoption and belief in the Design System from a product owner & business point of view. We have to tell a great story to them in order for them to invest in this system as well. Collaborating is key and telling the ‘why’ is important in achieving this.
💡Tip The ‘Buy-In for your Design System’ can help you to convince the management of all the advantages of a Design System in your organisation. Find out how to get budget and support by using the tool!
Poncho: a reliable Labrador
They did a marvelous job getting recognition and acceptance through their Design System marketing within the ANWB. They use a dog icon for Poncho, because a labrador is reliable and accessible. A poncho is transparent and transferable. These values match the organizational- and Design System values. The perfect fit for the ANWB!
We could have called our Design System just the ANWB Design System but lots of people were resisting. It was too much of a business term. We wanted to give Poncho more branding and recognisability.– Chloé
Part of something bigger
The Design System team wants people to see the added value of a Design System. Therefore they organize monthly Poncho Days for other ANWB UX Designers.
The Poncho Days offer a space where designers can build and centralize their discussion on new components. Another goal of the Poncho Days is to boost morale and give a feeling of unity; a Design System is all about working together. At the end of every Poncho Day participants write down new tasks for the backlog.
People want to be part of something bigger.
The Poncho Bug Day 🐞
The Poncho Bug day is an extension of the already existing Poncho days. People are divided into teams of 2 or 3 people. The task for all the participants is to find and report as many bugs as possible in their products. By doing this the teams could experience the level of inconsistency in the current products. At the end of the day, all bugs were put into a Trello board. At the first Poncho Bug Day, more than 100 bugs were found!
Working with the Poncho Design System
The process of expanding the Design System can be divided into several steps. The designers who want to provide input by doing a proposal, will all go through the same workflow.
A Design System is not only an Style guide brought to life; it is also a process.– Sanne
Adding a proposal
It is an UX Designer’s responsibility to come up with the first proposal for a new component. Since the process is very transparent, the proposal will also be shared with the other UX Designers. Before a proposal is added to the Design System it needs to be validated. By formulating a hypothesis UX Designers can make a decision on whether qualitative or quantitative testing is appropriate. Extensive testing of big changes or flows will be done in the UX lab or the field. For example guerilla testing in the ANWB shops or any other creative way of user testing. The learning card helps with the documentation, which is also the responsibility of the Designer.
1 team, for 1 day a week
Currently, the Design System team have the final say on new components. The Design System team works on Poncho one day a week. They help UX Designers and Front-end Developers to go through the Poncho Process and support them by solving bottlenecks. They are also responsible for the overall planning and the organisation of the Poncho Days.
Look inside Poncho!
The Design System of the ANWB has 3 major sections: ANWB Visual Language, ANWB Web-Elements and ANWB Web-Components. In the future ANWB wants to add Patterns and Templates to the Design System.
ANWB Visual Language
The ANWB Visual Language consists of all the visual elements that ensure consistency throughout the communication of the ANWB. In this section, you can find everything you need to know about colors, typography, icons & Design Principles.
ANWB Elements & Components
Components within Poncho are very well structured and documented. Components have a clear status, either ✅ = ready to use or ✏️ = work in progress.
In Poncho, you can see updates on when a component was last edited, with a link to the code example in Storybook. All components have a clear purpose: what is this component supposed to do? Not to mention the do’s and don’ts, which can all be found in the component guidelines. Other good-to-know information are aspects like placement, size, animation, the principles and variations.
Most proud of
It all began with one small idea and the enthusiasm of three individuals and now it has transformed into a well-respected Design System and they are already reaping the benefits. With the help of Poncho 42 (!) applications were built.
It is growing rapidly and there are still many more who want to devote their time to the Design System. Furthermore, the IT management became very enthusiastic about the Design System, because it contributes to the higher goal of ANWB as an organisation. This resulted in Poncho becoming part of the IT strategy! 🎉
Right now, the biggest challenge for the team is apps. How to make the Design System just as appealing for the App teams as it already is for the Web teams? ANWB is just starting to find a way to integrate Apps within Poncho. The workflow is different and therefore it requires another strategy.
In the App center we are working with 3 UX Designers and 4 development teams. Together we work on 6 apps in total. It’s also necessary for apps to draw one line in following the design system guidelines to align with 1 ANWB.
At the moment we are working closely together to create basics elements and components for apps. We are setting guidelines and creating a backlog on Trello. For example: buttons, forms and notifications. These components are discussed with developers who are also busy creating more generic code. Other elements and components on the backlog are: push messages, accessibility, and design for different devices.
The main challenge for the Web team is consistency throughout the process. Always following the agreed upon guidelines over and over again. A Design System is a very social thing, so it can be challenging to keep people motivated. In order to do this, the Design System team must constantly interact with other development teams.
Another challenge is to bridge the gap between marketing and Poncho. The Important aspects of the brand identity are determined by brand marketers and should be added on a regular basis. Right now, this is not the case yet. This means the tone of voice, the corporate identity and all of the other parts.
Lastly, a big ambition of ANWB is to make the Design System open source and create a full-time dedicated Design System team.
3 tips from ANWB
- Do the research! By doing the survey, the Poncho team got a lot of clarity about the workflow of designers and how the Design System would fit within this workflow. A Design System is nothing without the right process.
- Get the right people on board. You cannot do it alone. The enthusiasm of UX designers is very important to make a start. Even though, a Design System can’t be built without management buy-in. Both the Designers and the management have a significant role in the process.
- Keep focus within the team. To keep your team focused, social aspects such as awareness are very important. The Design System is not about the reduction of consistency, it is more about an efficient workflow. The Design System offers the opportunity to bring people from various ‘islands’ together.
Our dream is a dedicated team for Poncho, who can work on the Design System full time.– Sanne
Design System Tools
Buy-In for your Design System
You need a design system. You already know it, but others in your organization are not so sure. This slide deck helps you convince people to join you!
Design System Checklist
This excercise helps you decide what is relevant to add to your Design System