Presentation at WIAD 2015, Brussels, by Koen Peters and Maarten Seghers about designing and building the EYD 2015 website for the European Commission

1. design that works for people
Case: the EYD website
WIAD Brussels, 20 February 2015
 05/02/2013

2. The request
 Design and build the yearly theme site for the Commission:
European Year for Development 2015
 DG Devco (Europeaid)
 2015: end of Millenium Development Goals (UN)
 Collaborative platform – list of partners
 Launch in 5 months
2

3. Basic concept
 Main site hook: telling stories!
 Story (of the week), by DG Devco
 Stories by partners
 Secondary driver: events linked to EYD
3

4. 4
@jn_cn

5. Approach
5
End of June Sept.1 Early Oct. Jan.1 March
Framing
Classification
Concept.
Design
Visual
Design
Phase 1 (IA track - Namahn)
Contractual
Negotiations
Build site in 6 agile sprints
Official launch
europa.eu/eyd2015
Follow up/
extra features
Phase 2 (Build track - Amplexor)

6. Phase 1: information architecture track
 Rush start a week for the summer holiday – a few weeks to do:
 Framing workshop & user research (interviews)
 Classification workshops, conceptual design and first wireframes
 Detailed design & prototype
 Wireframes & visual design
 HTML prototype (front-end code)
6
Sketchnote by Peter Decuyper (Amplexor)

7. Framing
 Context map
 Personas
 User journeys
7

8. 8

9. Classification workshops
9
 Sitemap
 Content types and metadata
 And a content model...

10. 10

11. Design workshop
11

12. Story page
12

13. Wireflows 13

14. Mood boards
 “Alpha - closed fields, depth,
black-and-white, friendly”
14

15. Deliver ready-to-use front-end code
15

16. Conclusions phase 1
 Provided a firm basis – a solid concept to start from for the
developers
 In summer, you can easily lose momentum
 Not all decisions are taken yet => scope negotiations
 Involvement Amplexor: observe during workshops, build a Proof of
Concept, check feasibility of ideas, ...
17

17. Phase 2: development track with agile approach
 Amplexor in the lead
 Input Namahn from Phase 1: wireframes, content
model & classification, HTML prototype
 Further refining PBS
 Agile set-up
 Product backlog
 6 sprints
 3 releases
18

18. Backlog and sprints
 Backlog: Everything that needs to be developed or done
 Stories (e.g. Event overview)
 Tasks (non-functional, e.g. setup DEV environment)
 Divided up into sprints (increments) and releases
 Plan board in Jira Agile
19

19. Example product backlog
20
Current Sprint
Next Sprint
Product Backlog
Story
Tasks

20. Sprints (increments)
 Scrum meetings
 Refinement meetings
 Sprint demo, sprint retro
21
Refinement

21. Releases
 Release is a version for production
 Consist of several sprints
22
Release 1 (Content entry)
Release 2 (Go-live)
Release 3 (Extra’s)

22. Namahn’s role?
 One sprint ahead... (better even two?)
 Preparatory tasks for a sprint:
 Finish the functional discussions
 Validate wireframes
 Finalise front-end code by the start of a sprint
23

23. Html prototype
 Role of front-end coder,
Jan Cornelissen (part of
Namahn team)
 Start from Drupal Html for
some pages
(e.g. faceted search)
24

24. Challenges
25

25. Context of the Commission
 Institutional complexity: DG Devco, DG Echo,
EEAS, DIGIT, DG COMM (IPG)...
 24 official languages
26

26. “How to engage people (the partners)?”
27

27. Geography & languages
 Geography = politics!
 “Show results found in other
languages”
28

28. Trade off
29
 Challenges
 Strict deadline
 Scope changes, e.g. Member state (new scope)
 Reality check

29. Scoping discussion
30
 “you can only do an estimation when
you know what it is about...”

30. Technical challenges
 IE9 with intranet security settings
 Server hosting (no direct access - maintained by DIGIT)
 Multilingual setup for 23 languages
 IPG...
31

31. IPG (information providers guide)
 English only URL’s
 Use of third-party tools and services
 No Google Maps
 No Facebook Comments
 EU tools for Twitter, Social sharing
 Web Accessibility
32

32. Lessons learned
33

33. Have a good IA /strong concept...
 ... and have it ready before the first sprint
34

34. 36
Keep it simple

35. Communiation with partners
 Evacuated to the
capacity4dev.eu platform
37

36. What about the wireframes?
Do you need to keep them up to date during
the development phase?
38

37. 39
Systematic specification
and follow up

38. 40

39. 41

40. Importance of a product owner
 Extensive business knowledge
 Able to make decisions
 Backing of stakeholders
42

41. “what is really nice is the fact that this site
was actually launched on time!”
(project sponsor)
43

42. Thank you!
@
 @2pk_koen
 @MaartenSegers