Case Aalto University

A design system for one of the largest universities in Finland. Built for running operations, kickstarting student experiments and conducting research.

Client

Aalto University

Industry

Education

Platform

Mobile / Web

Services

Service design, Digital design, Software 
development, Continuous improvement

awards & nominations

Interaction Awards 2024 Shortlist

UX Design Awards 2024 Nominee

The university

Established in 2010 from a merger of three major universities Aalto is a Finnish institution. Working in the fields of science, arts, technology, and business with a common goal to shape a sustainable future.

Schools
6
Faculty
4K
Students
12K
Nationalities
100+
Startups founded yearly
~100
Websites
~450

The challenge

With thousands of creators, high quality digital touchpoints that feel inherently like Aalto are needed to fulfill a myriad of needs.

“We have a lot of great stories to tell and achievements that we want to show off. Our community wants to build exciting digital touchpoints, but we’ve been lacking the tools to be able to do so. The design system makes sure that the quality of these touchpoints is high and that they look and feel inherently like Aalto.”

Robert Salvén

Head of Digital Experience

People at Aalto need digital touchpoints to:

Arrange studies and courses

Reserve spaces and accommodation

Organize art exhibitions and lectures

Research and distribute findings

Kickstart product ideas and startup companies

Run student organisations

The research

The project began with a pre-study to define the requirements for implementing Aalto Digital Experience (Aalto DX).


In the beginning, it was necessary to understand the required resources, actions, governance model, and cultural changes, and also define brand, design, and technical requirements. The goal was to use this information to predefine what Aalto DX will be and how it should be formalised.

Pre-study was based on qualitative research conducted using interviews. The goal of the interviews was to gather detailed information from individuals' perspectives.

  • Qualitative research
  • User groups and recognising roles
  • User interviews about current services
  • Governance model mapping

The pre-study indicated that Aalto University should streamline the user experience and brand consistency across different systems. It emphasized the significance of developing tools that cater to the diverse needs of the university's users. By offering a cohesive digital experience and relevant tools for researchers, students, startups, and university personnel, the aim is to facilitate productive and engaging work for everyone involved.

The approach

To tackle these issues, we decided to create a unified design system for Aalto University collaborating with Aalto Brand and Creative, hasan & partners (the brand agency), and Siili Solutions (the website services provider).

Taiste's role was to handle the entire implementation of the design system, covering both design, technical aspects and development.

The design system was rolled out in phases, with simultaneous work on UX, UI, and development to ensure flexibility for ongoing brand work.

Digital customer experience and brand strategy

Digital customer experience and brand strategy were crafted in collaboration with the brand agency.

  • Digital experience drivers
  • Brand drivers and key differentiators
  • Mapping digital ecosystem and services
  • Priorisation of services
  • Defining users and target segments
  • Documenting current processes

User experience (UX) and validation

We reviewed the university's chosen services, identified common design elements, and created unified wireframes to serve as templates for common use cases. These templates were then validated through user interviews.

  • Reverse engineering
  • Identifying and mapping common components, sections and templates
  • Gathering requirements and unifying patterns
  • Wireframing UI elements
  • User testing and validation

User interface (UI) design and building of the design system foundation

UI design and building of the design system foundation were carried out collaboratively with development and brand teams to enable seamless token integration from brand level to code.

  • Design System hierarchy and structure
  • Defining token styles and variables
  • Designing components, modules, and sections
  • Development integration pipeline from Figma
  • Design processes
  • Design documentation
  • Accessibility and sustainability

Aalto design system software development

included several steps, including specification work, platform and integration development, and ensuring accessibility and environmental friendliness across all digital touchpoints.

  • Defining technology stack and architecture
  • Defining and creating a deployment pipeline
  • Developing React and HTML components, tokens, and sections
  • Prismic CMS integrations
  • Implementing the presentation site
  • Accessibility
  • Green coding

The solution

A design system was built to meet the need to create accessible, technology agnostic and consistent digital touchpoints.

Toolbox for anyone at Aalto University creating or maintaining digital services. Framework that helps maintain a consistent user experience throughout all digital services and touchpoints while enabling teams to work more efficiently.

Aalto Design System site

The system is based on Aalto’s values: natural, inclusive, confident and progressive. These values guide the system to emphasize accessibility, green coding and flexibility.

A technology agnostic approach was selected to give all parties the possibility to utilize the system.

Design tokens were built to enable Aalto’s radical creativity, while ensuring a cohesive user experience and facilitating accessible design choices.

The system is structured in tokens, components, modules, sections, and, in the next release, templates, to help different user groups including designers, developers, and editors.

Figma library, Storybook, and website guidelines are included in the system for different users: those building the system and those using it.

A governance model for guarding, guiding and updating the system was planned and implemented.

Sustainability

Aalto design system meets all WCAG 2.1. AA accessibility standards. Every component in the system adheres to various guidelines related to color contrast, typography, and navigation. This assures that everyone can engage with Aalto University's digital touchpoints, regardless of their abilities or assistive technologies.

Environmental sustainability goals are supported through green coding practices.

Results from Google PageSpeed

Performance
96%
Accessibility
100%
Best Practices
95%
SEO
100%

Multi-disciplinary collaboration

The Aalto design system encourages collaboration by inviting active participation and contribution to its growth. 
A dedicated Slack channel fosters collaboration, providing support for university-wide projects.

Collaboration between Aalto communications, Aalto Brand and Creative, hasan & partners and Siili:

  • Aalto communications as main client
  • Aalto Aalto Brand and Creative as secondary client
  • Hasan & partners as brand developer
  • Siili as contract supplier
  • Taiste as system designer & developer

Design systems – a practical guide

Are you interested in learning more about design systems – or perhaps wondering whether you should create or improve one with us? Whatever the case, this guide has got you covered.

Read our Design systems guide

Other work

See all

What can we help you solve?

No matter where you are on your digitalisation journey, we encourage you to get in touch.

Contact us

Vilma Merikanto

General inquiries

vilma.merikanto@taiste.com
+358 44 556 8459