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
European Design Awards 2024 Silver
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.
The challenge
With thousands of creators, high quality digital touchpoints that feel inherently like Aalto are needed to fulfill a myriad of needs.
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.
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
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
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.
How can we help?
We are here for you – get in touch! Want to send us your CV instead? Head on over to our Careers page to see open positions.
What do you want to discuss?
Henri Ranki
Business Development Manager
henri.ranki@taiste.com+358 44 500 1364Do you have a project that you'd like to discuss? Our Business Development Manager Henri is who you'll want to have a chat with.
Vilma Merikanto
Office Coordinator
vilma.merikanto@taiste.com+358445568459Have a question related to events, co-operation etc.? Our Office coordinator Vilma is happy to help.
Considering applying to work at Taiste? Our HR Manager Laura can aid you with any questions you might have.
