Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Avoin muotoilu-helsingissa-hdw2017

432 Aufrufe

Veröffentlicht am

Design in Open Software Development in City of Helsinki
Ihmisen muotoinen kaupunki - Helsinki Design Week
HEL <3 DEV

Tero Tikkanen & Antti Pakarinen

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Avoin muotoilu-helsingissa-hdw2017

  1. 1. Helsinki Open Software Development and Design Ihmisen muotoinen kaupunki/HDW 14.9.2017 Tero Tikkanen @terotik Antti Pakarinen @arpanaama
  2. 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. 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. 4. Example projects 14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys dev.hel.fi/paatokset palvelukartta.hel.fi Linked Events API
  5. 5. Example projects 14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys huonevaraus.hel.fi (internal service) kerrokantasi.hel.fi Helsinki Project Tracking (internal service)
  6. 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. 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. 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. 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. 10. How Agile & Open relate to Design Discipline? Software development terms. What do they mean for design?
  11. 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. 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. 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. 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. 15. Case: Helsinki Bootstrap Library Helsinki branded Bootstrap UI theme 14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
  16. 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. 17. Examples using Helsinki Bootstrap 14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys digi.hel.fi kerrokantasi.hel.fi huonevaraus.hel.fi (internal service)
  18. 18. Handbook of Designing Digital Services in Helsinki
  19. 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. 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. 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. 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. 23. 10 Principles 14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
  24. 24. Case: Outdoor Sports Map Digital Service Principles through examples 14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
  25. 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. 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. 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. 28. Case: Rethinking Service Flows 14.9.2017 Kaupunginkanslia / Avoin ohjelmistokehitys
  29. 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. 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. 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. 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. 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. 34. Thank you!
  35. 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. 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

×