Things we learned when we built the City of Gothenburg’s design system and component framework

We hope you find our reflections useful and that they might keep you from repeating the same mistakes we did. At the very least, provide you with some comfort that you’re not alone if you did.

Interface inventory

Early in the process we did several interface inventories together in the team.

Following Brad Frost’s instructions in the blog post Interface inventory we gathered around a Google drive presentation and a white board.

The sessions helped us to form a common picture of the current situation and it really got the conversation going about which components to create and how they relate to…


Den här artikeln ger dig praktiska tips och instruktioner för hur du genomför ett användningstest. Efter en kort inledning om när och varför man genomför användningstest så tittar vi på vad du behöver förbereda och tänka på före, under och efter.

Inledning

Ett användningstest (eller användbarhetstest som det ibland också kallas) går ut på att låta riktiga användare genomföra verkliga uppgifter i det system eller med den produkt som ska testas. Samtidigt som personen genomför de olika uppgifterna så observerar man vad användarna säger och gör. …


In 2014, inspired by the work of Lonely planet and their living style guide Rizzo, we took the first steps toward a living design system for the City of Gothenburg.

Now 3 years later, encouraged by positive results, we continue to work on our design system and component framework on a daily basis. Needless to say, we have made both good and bad choices along the way, but always tried to learn from our mistakes, re-iterate and continue to improve it.

Recently Nathan Curtis published Principles of Designing systems, where he lays down 8 principles of designing systems. I thought…


Discussing the problems we have to keep applications in sync with our design system. Changes in CSS and JavaScript is one thing, refactoring that require changes to shared component markup much more difficult.

A little over 2 years ago we decided to switch to a modular UI design methodology and a style guide driven development process.

In the beginning we spent a lot of time discussing how we should build our design system, what components it should include, what CSS architecture to use and how to create a template layer with the vision to achieve the holy grail design system.

Now, we are in a state where our component library, processes and the template framework are relatively stable. …


Although more technical in nature, we hope that it can also provide insights into the concept of our framework. How it is built, used and maintained.

UI-framework and Component templates

Our component framework has, like most UI-frameworks, UI-components that consist of HTML, CSS and possibly Javascript. Possibly also with dependencies to other resources such as icons and/or fonts. (we will not go into detail regarding the architecture of our UI framework in this post but it might be worth mentioning that it is based on the ITCSS-architecture and uses a BEM naming convention).

To be able to change the markup and styling of these…


In 2013, we started to look at the benefits of building a maintainable component library and how we could use it for the City of Gothenburg’s external and internal web applications.

The primary goal was to:

  • Increase the quality and consistency of the user interface across applications and digital web channels.

In this post I’ll share another positive effect – how it has affected and sped up they way we work with HTML prototypes.

Since many years now, we have almost exclusively used HTML prototypes in the development cycle of a project and it has generally worked really well but…


Examples are often the best way to learn so let’s look in detail on one of the components in our library, the slideshow component, and see what parts it consists of.

The Slideshow component

Purpose, appearance and functionality

The purpose is to display a predefined set of images in a sequence only showing one image at the time, which is useful, e.g. when you want to save valuable screen real estate.

Appearance and functionality

The slideshow shows the current image together with an optional title and caption. The title can be used as a link to another resource.

In addition to that, there are arrows which link to the next…


In my previous post, An overview of the component framework architecture, I described, from a technical perspective, how we implemented and built our component framework.

And when we started this project I thought that once we had the technical implementation in place we would soon also have our component library ready, with lots of reusable components.

It turns out, I clearly underestimated the time and complexity of deciding which components to create, what size they should be, how to name them and also the time it takes, even for a small team, to agree on these things.

It’s easy to…


After being inspired (as many others) by the work Lonely Planet did with their framework Rizzo we started thinking about how we could build a similar framework that would work with our web application platform IBM WebSphere Portal.

To not repeat mistakes already done by others we first looked at what Ian Feather wrote in his article What we would change about Rizzo in the beginning of January 2015 and also at the great collection of resources found at styleguides.io. …


In 2013 Brad Frost wrote the blog post Atomic web design which popularized the concept of modular design systems. We started thinking about the benefits of this methodology, namely more uniform user interfaces based on reusable components and how it could benefit the City of Gothenburg.

Building a design system based on components that together could form larger components, which eventually form applications and pages seemed interesting. But we saw that it wouldn’t solve practical problems associated with keeping a style guide in sync with production code and keeping applications up to date with the latest code.

A few months…

Mikael Sandin

Strategist and UX designer at City of Gothenburg. Located in Gothenburg, Sweden.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store