Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The EYD2015 website: working agile at the European Commission (EuroIA 2015, Madrid)

1,361 views

Published on

In the summer of 2014, we partnered with a web integrator to design and build the website for the European Year for Development 2015 (europa.eu/eyd2015), a collaborative platform to publish stories from the field on development and announce events related to the theme year. In a first phase, we created an IA and design for the site. Then, the integrator took the lead and developed the site in agile sprints, with us in support. The website is now running successfully, with many partners publishing stories and events related to EYD2015. In this talk, I share some techniques we have used and lessons we have learned in working together with developers in an agile set-up.

Published in: Design
  • Be the first to comment

The EYD2015 website: working agile at the European Commission (EuroIA 2015, Madrid)

  1. 1. Case: the EYD2015 website 24 September 2015 EuroIA 2015 Working agile at the European Commission @2pk_koen
  2. 2. Introduction
  3. 3. The request
  4. 4. “European Year for Development 2015” — “Design and build the yearly theme site for the Commission” — 2015: end of Millennium Development Goals (UN) — Collaborative platform – list of partners — Launch in 5 months 4
  5. 5. Basic concept — Main site hook: telling stories!  Story (of the week), by DG Devco  Stories by partners — Events linked to EYD 5
  6. 6. 6 Why present this case?
  7. 7. The project
  8. 8. Approach 8 End of June 2014 Sept.1 Early Oct. Jan.1 2015 March Framing Classification Concept. Design Visual Design Phase 1 (IA track) Contractual Negotiations Build site in 6 agile sprints Official launch europa.eu/eyd2015 Follow up/ extra features Phase 2 (Build track)
  9. 9. Phase 1: IA track — Rush start, early summer  Framing, user interviews  Classification and design workshops — Prototype, rest of the summer  Wireframes, visual design  HTML prototype 9 Sketchnote by Peter Decuyper (Amplexor)
  10. 10. Framing — Context map — Personas — User journeys 10
  11. 11. Classification 11
  12. 12. Design workshop 12
  13. 13. Cores & paths 13
  14. 14. e.g. Story page 14
  15. 15. ‘Wireflows’ 15
  16. 16. Style cards 16 “Alpha – closed fields, depth, black-and-white, friendly”
  17. 17. Deliver ready-to-use front-end code 17
  18. 18. Phase 2: development track — Developers in the lead — Agile set-up:  Product backlog, user stories  6 sprints, 3 releases 18
  19. 19. Agile sprints 19
  20. 20. The challenges
  21. 21. Context of the Commission
  22. 22. IPG rules — Use of third-party tools and services  No Google Maps  No Facebook Comments  EU tools for Twitter, Social sharing — Web Accessibility 23
  23. 23. Geography
  24. 24. Languages — 23 languages Design adapted to this! — “Show results found in other languages” 25
  25. 25. The lessons learned
  26. 26. Have a solid concept and IA — ... have it ready before the first sprint 27
  27. 27. One or two sprints ahead?
  28. 28. Visual refinements during the sprints: In photoshop or in the front-end code?
  29. 29. Role of the front-end coder... — Part of Namahn team, but in close cooperation with developers — Process  His work was integrated in the development environment  Mix of custom templates and Drupal templates 30
  30. 30. What about the wireframes: Do you need to keep them up to date during the development phase?
  31. 31. 32
  32. 32. 33 Systematic specification and follow up
  33. 33. 34
  34. 34. 35
  35. 35. “what is really nice is the fact that this site was actually launched on time!” (Project sponsor)
  36. 36. Thank you @2pk_koen

×