Contact
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.
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:
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.
The workshop gave us the following insights:
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.
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.
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.
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:
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.
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.
Feel free to contact me!
