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.
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.