狠狠撸

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

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

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.

Example projects
dev.hel.fi/paatokset palvelukartta.hel.fi Linked Events API

Example projects
huonevaraus.hel.fi
(internal service)
kerrokantasi.hel.fi Helsinki Project Tracking
(internal service)

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 -

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

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

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?

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

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

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

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

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

Case:
Helsinki Bootstrap
Library
Helsinki branded Bootstrap UI theme

Helsinki UI styles
? Based on Bootstrap UI library
https://city-of-helsinki.github.io/hel-bootstrap-3/

Examples using Helsinki
Bootstrap
digi.hel.fi kerrokantasi.hel.fi huonevaraus.hel.fi
(internal service)

Handbook of Designing
Digital Services in
Helsinki

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

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

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

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

10 Principles

Case:
Outdoor Sports Map
Digital Service Principles through examples

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

[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

[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

Case:
Rethinking Service
Flows

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.

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

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

Also looked into enrolling your
children in school or daycare
This is a different flow - but a typical
one for many other services!

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/

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?

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.

狠狠撸

Avoin muotoilu-helsingissa-hdw2017

Recommended

More Related Content

Similar to Avoin muotoilu-helsingissa-hdw2017 (20)

Recently uploaded (20)

Avoin muotoilu-helsingissa-hdw2017