Siirry sisältöön

Helsinki Design System – a step towards a uniform digital service experience

Helsinki Design System (HDS) is a tool for design and development that supports the ease of use, accessibility and uniform visual identity of City of Helsinki digital services and platforms.

The City of Helsinki provides thousands of digital and non-digital services for various purposes ranging from day care applications to business incubators to cultural activities to dental care. The shared goal of these services is to fulfil user needs.

All these services should be recognised as services provided by the City of Helsinki, and they should be easy to use, uniform and accessible.

The digital uniformity of services and their ease of use are ensured by Helsinki Design System (HDS). Helsinki Design System is a tool that supports design and development. It allows service providers to focus on user needs, instead of reconsidering every basic function with every new service.

Helsinki Design System is like a LEGO set. It contains a set of building blocks, or components, which can be used as such to build the model of the original set, or they can be combined with other building blocks. The building blocks are always accompanied with building instructions, that is, documentation, in order that the blocks can be assembled to achieve the set’s intended outcome.

Helsinki Design System is a designed digital service

Helsinki Design System is itself a designed digital service. Its main users are planners, software developers and product owners who produce City of Helsinki services. It is vital for the users that Helsinki Design System helps them as a tool to ensure accessibility in digital services and that all components comply with the City’s brand identity.

Helsinki Design System helps to ensure accessibility in digital services.

Moreover, the tool makes processes more efficient, when it is not necessary to recreate basic elements for every new service, such as buttons and colour schemes.

The Helsinki Design System team collects feedback from users and develops the tool further according to user needs. The team collects feedback both directly through a dialogue with the community and with various surveys and analytics.

Helsinki Design System is developed by a team of experts strengthened by multiple skills in order to ensure the best possible customer experience: the team includes product owners, user experience designers, software developers and accessibility specialists.

User orientation and accessibility are always integral parts of the process

All components produced for the Helsinki Design System library are designed and implemented to be user-friendly and accessible. The below process diagram illustrates in a simplified manner how a single component or feature is developed. As necessary, the process always returns to earlier stages.

Helsinki Design System process

The definition of a need for a new service begins with research. The research stage comprises an evaluation of the service need and the projected use of the service as well as a survey of existing solutions available from the City and other providers to address the need. One aspect to consider at the research stage is accessibility; what requirements would supporting technologies present, and how to render the package as comprehensible and straightforward as possible.

The design stage focuses on the interaction between the user and the component. For example, what happens when the user clicks a button or enters information in a field. Designers ensure that the service can be used with various devices, such as a smartphone or a laptop, and that the colours are distinguishable and comply with the City of Helsinki brand identity.

Software developers join the process at the implementation stage, if not earlier. They transform the designers’ plans into functional components, clickable buttons and forms to be submitted. Software developers test functions together with designers and accessibility specialists and improve the quality of functions.

Final testing ensures once more that a component or feature fulfils its requirements for user needs and accessibility.

A toolkit for everybody

Helsinki Design System contributes to the transparency of the City of Helsinki service development and helps to share best practices. Consequently, Helsinki Design System is made available as open source code under the Creative Commons 4.0 license. Anybody can use the system, even outside the City of Helsinki organisation.

Helsinki’s own design system will be a strategic tool for digital design to an increasing extent in the future, as it is developed to better serve larger stakeholder groups and product owner networks. In addition to a user interface library, the toolkit will expand to include increasingly functional service packages, instructions for agile development ranging from customer research to content design, and tools for customer-oriented and efficient digital urban design.

Photo: Jussi Hellsten