A design system for the City of Amsterdam

Maurice van Pelt - 17 April 2019

If you are a citizen of Amsterdam, chances are that you probably have seen the website of the City of Amsterdam or one of its smaller subdomains. Although all of them use the same brand guidelines, design consistency left a lot of room for improvement. The municipality and Hike One joined forces to lay down a solid plan for a design system. This system should provide both designers and developers a very efficient, up-to-date and consistent base for future design projects. Accessible for designers internal and external.


Reasons for a design system

We see an increasing demand for design-at-scale. Large companies need a way to control the quality of their design output and the effort it takes to maintain it. Especially in a growing ecosystem of digital touch points. A great way to facilitate this is a properly set up design system. We have built an increasing amount of these design systems lately and knew this was a solid solution for the City of Amsterdam as well.

A design system holds a collection of components together with a set of clear guidelines, principles and patterns. By integrating this system for the client they benefit from:

  • Having a single source of truth for building user interfaces;
  • Saving time and money;
  • Increasing consistency;
  • Decreasing maintenance;
  • Improving user experience through well-defined and learned behaviours.

Getting insights

To get a clear understanding of the scope and direction, we facilitated two workshops. Together with the client we defined a set of guidelines, resources and responsibilities in the first workshop. We scoped what we should look for and each Amsterdam site got evaluated on whether it should reflect the design system.

During the second workshop we did a quality check on all elements to map on what level they follow the brand guidelines. We sat down with the team to cut out components from web pages, investigate on what level of detail it has been set up and to get an idea of the library’s size. In addition we agreed on the definition of a component in the project context. Next up was prioritising the components and grouping them accordingly and setting up design principles, which would help in making decisions for the system.

Cutting out and clustering elements

The workshop gave us the following insights:

  • Most cut-out elements that were pulled from the live website still met the brand guidelines. The main reason for this was that the concerning pages were already reviewed on this;

  • Multiple resource sites were used to create web pages from which none matched the brand guide due to out of date files and inconsistent naming conventions. This led to inconsistency and raised questions among designers;

  • Many websites still had to be updated to Amsterdam’s latest web style.

Apart from workshops we conducted external expert interviews. We selected employees and designers who worked with or are currently working for the City of Amsterdam. The objective was to retrieve what their ideas were for a design system and what obstacles they ran into during their activities for the organisation in the past. We gathered this information to have a clear view on how the design system could help in their process.

  
Way of working

Later on in the project we noticed that design-related departments at the City of Amsterdam work independently from one another. For instance, there was no internal communication about brand-related improvements.

Information from the expert interviews was used to come up with new methods for all internal and external members who work at or for the City of Amsterdam. The following describes the flow in order to request and approve a new website by incorporating the new design system.

  1. A department from the City of Amsterdam requests a new website.

  2. This website has to be approved by the internal Services and Communication department.

  3. An external party designs the website elements according to the design system.

  4. A dedicated Design System Team (DST) will be in charge to approve or reject the designed files, whether the element matches the general branding, is implemented correctly and is usable in the design system.

  5. The Design System Master (DSM) adds the approved element in the design system and releases an update. Also, the DSM will add documentation to it.


Day-to-day routine

We primarily operated from our own office as there was no desk space available on-site. Though, we stayed in close daily or almost real time contact with the client and arranged our processes as efficient as possible. Trello was our tool to prioritise tasks to be done and tracking of the process. Dropbox Paper was also important to us. The client simultaneously set up extensive documentation with all components and elements in place on this platform. In case we had specific questions about it, we could raise them in there. They responded to this almost the same day making it possible to continue our work remotely. At the time they had comments or questions on our newly designed elements, a feedback document was filled in. All this shows we can easily adapt to any situation which works best for both parties.


Selecting the right tools

We quickly made our choice on the right design tool, which turned out to be Sketch with its solid Shared Library functionality. However, to maintain a refined design system we found Zeroheight to hit the right spot where we are able to show design components and documentation together with guidelines. Designers and developers of the City of Amsterdam can use this platform to look up for the elements’ rules and how it should be implemented. We even had close contact with Zeroheight in case we missed features or had any other related questions. Its support team replied in no-time which we really liked. Zeroheight’s benefits in short:

  • Smooth synchronisation of Sketch components through the Sketch plugin;

  • View all used element’s properties and dimensions like you’re used to in Zeplin;

  • Check out live examples of elements in HTML by putting in CSS.

Button documentation on Zeroheight

To make full use of the design system, Paddy and Sketch Runner are your friends to speed up your workflow. The former creates the right amount of margin on buttons when using custom text labels. Sketch Runner gives you the opportunity to quickly insert symbols in Sketch by typing the symbol’s name rather of picking it from the panel.


Wrapping
up

Incorporating a design system for an organisation at this scale has been a true pleasure to us. They gave us freedom and trust to run all processes in their best interest. By facilitating workshops we managed to get all stakeholders on the same page and get a clear status and view on the system and its elements. We conducted interviews to investigate the workflow at that specific moment and made changes to incorporate a design system. To keep this system running, members and departments are commissioned to take ownership. Now designers have a single source of truth to create new web pages which results as a huge time saver. On top of that it automatically creates a consistent way of working in which all parties will benefit from.

Let's rebuild your design process

Contact us

Maurice van Pelt

Visual Designer

More about this

Article

The best tools for documenting design systems

Arjen Wiersma - 17 April 2019
Work

Design for government and public organisations.

Matthijs Collard - 6 January 2016
Article

How to improve your design workflow

Danny Groenen - 31 March 2017