matias vaara - 6aika digital design language - mindtrek 2016

26
A Digital Design Language for Finland What, why and how.

Upload: mindtrek

Post on 15-Apr-2017

56 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

A Digital Design Language for FinlandWhat, why and how.

Page 2: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

BOOKING A TIME IN HELSINKI BOOKING A TIME IN VANTAA

Page 3: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

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

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

1. Current challenges

Page 6: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

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

2. What does a Design Language mean?

Page 8: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

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

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

US web design standards

https://playbook.cio.gov/https://pages.18f.gov/designstandards/

Page 11: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016
Page 12: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

http://www.ibm.com/design

IBM Design Language

Page 13: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016
Page 14: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

https://design.google.com/

Google Material Design

Page 15: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

3. Why Create a Design Language?

Page 16: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

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

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

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

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

4. How to create a Design Language?

Page 21: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

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

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

5. Design Language in PractiseNOTE: Only illustrative examples, not ready solutions!

Page 24: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

BOOKING A TIME IN HELSINKI BOOKING A TIME IN VANTAA

Page 25: Matias Vaara - 6aika Digital Design Language - Mindtrek 2016

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

Several services can be included into one consistent user exprience.

CONSISTENT EXPERIENCES