1.
Helsinki Open Software
Development
and Design
Ihmisen muotoinen kaupunki/HDW
14.9.2017
Tero Tikkanen
@terotik
Antti Pakarinen
@arpanaama

2.
Helsinki Open
Software
Development
• Assists city departments with software
project procurement, opening data and
developing open APIs
• Team of developers
• 2013 – 1
• 2014 – 2
• 2015 – 5
• 2016 – 8
• 2017 – 9
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

3.
Helsinki Open
Software
Development
• We develop software using agile methods
• Open data, open APIs and open source
code
• Framework contract to extend developer
resources from pre-selected group of
companies who follow same principles.
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

4.
Example projects
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
dev.hel.fi/paatokset palvelukartta.hel.fi Linked Events API

5.
Example projects
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
huonevaraus.hel.fi
(internal service)
kerrokantasi.hel.fi Helsinki Project Tracking
(internal service)

6.
Tero Tikkanen
Web design/development since 1998
UK 1998 - 2002
• Manchester.com, music33.com, bigbluespot.com
TAIK (Aalto) 2002 - 2007
• Degree in Graphic Design and International Design Management
Vaisala 2006 - 2008
• Visual guidelines for software products
Own studio 2008 - 2016
City of Helsinki 2016 -
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

7.
What I Do in Practice?
• Front-end code, I do pull requests!
•Hands on prototyping new service concepts
• Work as a bridge between software development and design
related city functions. (Digitaalinen Helsinki)
•Bubbling under: develop ways to achieve consistency
between products
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

8.
Designer/Developer
14.9.2017
PERSON PIXEL
Leisa Reichelt
What is a UX Developer and are they really a thing?
= UX Developer
Kaupunginkanslia / Avoin ohjelmistokehitys

9.
What Have I Learned Working in
Open Software Development?
• Continuous delivery: Show unfinished work - polish later
• Choosing obvious over clever, everytime.
• Before agile by accident - now by process
• New understanding of collaborative code workflow
•I love GitHub. Why not for designers?
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

10.
How Agile & Open relate to
Design Discipline?
Software development terms.
What do they mean for design?

11.
Keywords: Agile
What is Agile Design?
• Design has to be integral part of the process, preferably integral part
of the development team
• Can not manage design as waterfall process and development as
agile

12.
Agile Development
1. Individuals and Interactions
Over Processes and Tools
2. Working Software Over
Comprehensive Documentation
3. Customer Collaboration Over
Contract Negotiation
4. Responding to Change Over
Following a Plan
14.9.2017
Agile Design
1.Collaborating as a Team Over
Being a Design Superstar
2.Protototyping in code or hand
drawn mockups Over Pixel
Perfect Layouting
3.Sharing and Borrowing Over
Owning Your Creations
4.Living Styleguides Over Rigid
Design Plan
http://agilemanifesto.org
Kaupunginkanslia / Avoin ohjelmistokehitys

13.
Keywords: Open Development
What is Open Design?
“Open design is the development of physical products, machines and systems through use of
publicly shared design information. Open design involves the making of both free and open-source
software (FOSS) as well as open-source hardware. The process is generally facilitated by the
Internet and often performed without monetary compensation. The goals and philosophy are
identical to that of the open-source movement, but are implemented for the development of
physical products rather than software.” - Wikipedia
• HOW ABOUT SOFTWARE?
Organisation:
http://opensourcedesign.net
http://opendesign.foundation

14.
Open
• Share the process and the progress
• Use open license assets
• Images, icons, fonts, libraries
• License your work with open licence. Contribute to community.
Request an open licence when you buy design work.
Examples of high quality open design projects and resources:
•Google Fonts
•Bootstrap
•The Noun Project
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

15.
Case:
Helsinki Bootstrap
Library
Helsinki branded Bootstrap UI theme
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

16.
Helsinki UI styles
• Based on Bootstrap UI library
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
https://city-of-helsinki.github.io/hel-bootstrap-3/

17.
Examples using Helsinki
Bootstrap
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
digi.hel.fi kerrokantasi.hel.fi huonevaraus.hel.fi
(internal service)

18.
Handbook of Designing
Digital Services in
Helsinki

19.
Antti Pakarinen
14.9.2017
Service concepts & service design
Started with open data and open source, now working with open
services
City of Helsinki
Open data, open APIs and open source since 2010
• Helsinki Metropolian Area Libraries: open data 2010
• Koha open source library system: first test environment 2011
• 2017: in production in more than 80 municipalities in Finland
Kaupunginkanslia / Avoin ohjelmistokehitys

20.
6Aika Open Services Team
• We are a project team of four in Helsinki. Creating concepts and
methods for re-thinking city services
• Our perspective: from code and data to user experience. What is
the UX of the cities? How to transform it?
• Co-creation, user-inspired design: tools and methods for better
public services
• Open services = open source + open data + open design
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

21.
Digital Services
Handbook
14.9.2017
• digi.hel.fi/digipalveluopas/
• Tool for developers, designers and product
owners
• Tools, methods and principles behind our
service development in the open.
Openness makes us work harder
• No need to reinvent the wheel for every
project
Kaupunginkanslia / Avoin ohjelmistokehitys

22.
Digital Services
Handbook
14.9.2017
• 10 design principles, based on GDS
(gov.uk) principles
• Other benchmarks and references: NYC
Digital Playbook, US Digital Services
Playbook
Kaupunginkanslia / Avoin ohjelmistokehitys

23.
10 Principles
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

24.
Case:
Outdoor Sports Map
Digital Service Principles through examples
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

25.
Principles in Action:
Case Outdoor Sports Map
[1] Start with need
[7] Create services
[3] Use data
[4] Find the essential
14.9.2017
Old service
● Closed source
● Outdated
● Expensive to maintain and
update
Kaupunginkanslia / Avoin ohjelmistokehitys

26.
Principles in Action:
Case Outdoor Sports Map
[6] Build for everybody
[2] Do less
[9] Open development
14.9.2017
Design Process
● User survey
● Live user testing focus groups
○ Developers and product
owners involved!
● Sports facility maintenance
personnel highly involved
Kaupunginkanslia / Avoin ohjelmistokehitys

27.
Principles in Action:
Case Outdoor Sports Map
[5] Edit and repeat
[8] Instruct where needed
[10] Share what you learn
ulkoliikunta.fi
14.9.2017
Final Product
● Iterative development. User
feedback heard
● Mobile app for maintaining the
live coditions
● Product owner blog about the
process
Kaupunginkanslia / Avoin ohjelmistokehitys

28.
Case:
Rethinking Service
Flows
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

29.
Case: Rethinking Service Flows
14.9.2017
• City organisation has a lot of different services - and N number of
different service flows
•Find examples of services from different departments to find common ways to
visualize service user flows
•What kind of interactions are common to all services?
• First steps towards common interactions. Creating content for
design guidelines through examples.
Kaupunginkanslia / Avoin ohjelmistokehitys

30.
Example:
Organising an outdoor event
in Helsinki
Feedback from product owner
Feedback from event organiser
New concept for the permit flow
Also include advice that is not
city bureocracy related
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

31.
Example:
Starting a restaurant in Helsinki
Feedback from product owner
Feedback from entreprenour
New concept for the permit flow
Also include advice that is not city
bureocracy related
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

32.
Also looked into enrolling your
children in school or daycare
This is a different flow - but a typical
one for many other services!
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

33.
Dream: We will have a common UI library that
combines design and technology.
14.9.2017
IBM Carbon Design System
carbondesignsystem.com
GOV.UK elements
http://govuk-elements.herokuapp.com/
US Web Design Standards
https://standards.usa.gov/
Kaupunginkanslia / Avoin ohjelmistokehitys

34.
Thank you!

35.
Workshop: Group 1
“Open design is the development of physical products, machines and systems through use of
publicly shared design information. Open design involves the making of both free and open-
source software (FOSS) as well as open-source hardware. The process is generally facilitated
by the Internet and often performed without monetary compensation. The goals and
philosophy are identical to that of the open-source movement, but are implemented for
the development of physical products rather than software.” — Wikipedia
What is Open Design for digital service development?
Ideas how to make design more open?
What challenges there are with open design?
Reasons when design should not be open?
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys

36.
Workshop: Group 2
When user interface design goes wrong?
Design is how it works - or how it doesn’t. What are your favourite
examples of bad user experience design?
Write them on post-it notes. What can we learn from them?
You can draw sad faces, if necessary.
14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys