Case Aalto design system

One of Finland's most prestigious universities, Aalto is the home of some of the brightest, most creative minds in the Nordics.

We helped them build a comprehensive design system that streamlines their digital experience across the various departments and organisations that the institution consists of.

The project has been a challening and rewarding undertaking, made possible by the lively co-operation between us, Aalto and other agencies (Siili, Hasan & Partners) – all working toghether to create a world-class experience for the students and University staff alike.

Client

Aalto University

Industry

Education

Platform

Web

Services

Design system

From research to implementation

Our journey with Aalto began with a resarch project. The university's communications team reached out to us with the idea of seeking to update their digital experience. In order to do this, a research project was needed to pinpoint and validate the issues that should be focused on. From the get-go, we collaborated with the end users to make sure we understood all the nuances of how the Aalto services are used in real life. This philosophy was a key element in our work not just at the start but all the way through.

The results of the research phase pointed out that neither the user experience nor the brand image was consistent across the multiple channels (a plethora of websites and services). A design system that would unify all this seemed like the best long term solution.

Getting practical: the UX phase

The next phase of the project was working our way through the entire digital ecosystem the way it was before the work on the design system began.

Listing and reverse engineering all the components and various ways of doing things was time-consuming but crucial: this list essentially helped us understand all the individual elements the design system would need to contain. With this data, we were able to start piecing together the inner workigns of the actual design system and how it would be presented to the people utlising it.

Figma and Storybook: two sides of the coin

The part of the design system that lives in Figma is a playgroud for designers and content creators. Simply put, it defines all the building blocks and elements of the design system: styles, tokens, colours, icons, fonts, components, modules – you name it. From Figma, this data can be sent forward to developers as JSON.

Storybook, on the other hand, serves as a home for all reusable code components, created with React. Keeping things technology agnostic was of great importance: the technology stacks of all the departments that would use the design system were fragmented at best, and the design system would have to be something they could all use with minimal fuss.

Accessibility first

Accessibility of the university's digital services is an important goal for Aalto, and the design system provided ways to make this a reality, too.

Building the components with a heavy emphasis on accessibility allowed us to not think about accessibility as an "added feature" but as an important building block for the principles of the entire design system.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

Aalto Aaltonen

Lorem ipsum

Other work

See all Works