Aalto University design system

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

Name of the entry

Aalto University Design system

Design

Taiste, Hasan & Partners

implementation

Taiste

Client

Aalto University

Grand One category

Paras palvelu, Paras design, Ekologisin verkkopalvelu

links

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

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%

Results

The implementation of Aalto's design system took place in late 2023. Since its introduction, the design system has gathered attention and positive feedback within the university community. It has been successfully applied in the initial projects, marking the beginning of its practical utilization.

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, Hasan & Siili:

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