![Page 1: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/1.jpg)
A Digital Design Language for FinlandWhat, why and how.
![Page 2: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/2.jpg)
BOOKING A TIME IN HELSINKI BOOKING A TIME IN VANTAA
![Page 3: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/3.jpg)
Let’s solve common user exprience problems once and share the benefits across cities.
THE IDEA
![Page 4: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/4.jpg)
Let’s create a design language with ready to use elements for digital services, but with local branding.
THE IDEA
![Page 5: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/5.jpg)
1. Current challenges
![Page 6: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/6.jpg)
1. CURRENT CHALLENGES
1. Cities digital services are difficult to use
2. Cities create digital services in isolation
3. Implementing services is slow and expensive
![Page 7: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/7.jpg)
2. What does a Design Language mean?
![Page 8: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/8.jpg)
2. WHAT DOES A DESIGN LANGUAGE MEAN?
A Design Language is a set of best practices and user interface elements for digital services.
![Page 9: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/9.jpg)
2. WHAT DOES A DESIGN LANGUAGE MEAN?
1. Best practises for easy to use and useful digital services
2. Ready to use templates for most used UI elements
3. A set of steps and guidelines for involving users in design
![Page 10: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/10.jpg)
US web design standards
https://playbook.cio.gov/https://pages.18f.gov/designstandards/
![Page 11: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/11.jpg)
![Page 12: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/12.jpg)
http://www.ibm.com/design
IBM Design Language
![Page 13: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/13.jpg)
![Page 14: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/14.jpg)
https://design.google.com/
Google Material Design
![Page 15: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/15.jpg)
3. Why Create a Design Language?
![Page 16: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/16.jpg)
1. Cost savings
For Cities
4. Improved city brand
2. More agile service development
3. Less vendor lock-in
3. BENEFITS OF AN DESIGN LANGUAGE
![Page 17: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/17.jpg)
5. Easier to use digital services
6. Familiar UX across cities
3. BENEFITS OF AN DESIGN LANGUAGE
For Residents
![Page 18: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/18.jpg)
7. Quicker to develop
8. Less need for design expertise
3. BENEFITS OF AN DESIGN LANGUAGE
For Developers
![Page 19: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/19.jpg)
3. BENEFITS OF AN DESIGN LANGUAGE
1. Cost savings
For Cities For Residents For Developers
4. Improved city brand
2. More agile service development
5. Easier to use digital services
6. Familiar UX across cities
7. Quicker to develop
8. Less need for design expertise
3. Less vendor lock-in
![Page 20: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/20.jpg)
4. How to create a Design Language?
![Page 21: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/21.jpg)
4. MITEN MUOTOILUKIELI KANNATTAA LUODA?
1. Finding the best practices for digital services and generalizing them
2. Creating a library of the most used user interface elements
3. Involving citizens and city employees
4. Continuous and open development
![Page 22: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/22.jpg)
MUOTOILUKIELI.FI
Muotoilukieli.fi is an open platform for hosting and updating the principles and elements of the design language.
![Page 23: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/23.jpg)
5. Design Language in PractiseNOTE: Only illustrative examples, not ready solutions!
![Page 24: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/24.jpg)
BOOKING A TIME IN HELSINKI BOOKING A TIME IN VANTAA
![Page 25: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/25.jpg)
Matti is developing an Events-service in Turku. He takes the ready React-code snippets from muotoilukieli.fi for the UI.
READY MADE CODE
![Page 26: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016](https://reader031.vdocuments.pub/reader031/viewer/2022030309/58f205bd1a28ab422a8b4573/html5/thumbnails/26.jpg)
Several services can be included into one consistent user exprience.
CONSISTENT EXPERIENCES