The new Barnsley Council website

Presentation I gave internally to council staff about the new Barnsley Council website, for sign off before it was promoted publicly.

Transcript

1. Building our new website Matt Watson
2. A good customer experience is more important than making a developer's life simple “
3. A good customer experience is more important than making a developer's life simple - Matt Watson “
4. About me ▪ Senior developer at Barnsley Council ▪ Web developer for 15+ years ▪ Have worked in the public sector (NHS and Government) ▪ Passionate about the web (and making it accessible to everyone) ▪ Attend and talk at web events across the UK ▪ Hosted ‘The Digital Barn’ for the past three years (Barnsley’s first and only web development conference) More info at http://mwatson.co.uk or catch me on Twitter @mwtsn
5. Some web history ▪ In the old days of website building, there was just a developer and a computer ▪ We didn't have much in the way of web tools, just a plain text editor ▪ Our tools got better, with the advent of server side languages we could speed things up by creating web templates ▪ We started powering our websites with databases, and then started building our own tools or ‘Content Management Systems’ (CMSs)
6. More web history ▪ CMSs got more and more powerful, until a few stood above the rest ▪ In all honesty, with the development of CMS’s we (web developers) got lazy ▪ Now anyone could contribute to the website, so we let them (we forget that web editing is a technical skill) ▪ Our content quality went downhill, things broke regularly ▪ Our website started to look like a badly edited wikipedia article!
7. A few months ago ▪ We asked you what you thought of our site. ▪ The answers didn’t really surprise us, because we feel the same ▪ A number of decisions have been made over the years that were not necessarily the right thing to do for our customers ▪ In short, our current website had become...
8. ...lipstick on a pig ▪ Since its incarnation, the website has not had a thorough review ▪ We just keep migrating it from system to system ▪ We just keep putting ‘lipstick’ on it, to make it appear better than it actually is ▪ We also have another problem. One which has worried me for a long time, and even has the Chief Exec concerned... Photo credit: Mick Coulas http://www.revel-ink.com/mickcoulas/
9. So many websites ▪ We have a problem in the council, people love buying websites ▪ Because people do not follow the correct procedures for this we have ended up with over 50 websites ▪ Inconsistent council brand ▪ Duplicated information (often out of date) ▪ Impossible to maintain and some of are poorly created and inaccessible ▪ Direction from the top to make a consistent single council brand
10. Can we fix it? ▪ To deal with this mess, we asked all the service leads and council members what they wanted from our website ▪ This was accumulated, condensed and from it the vision was created ▪ It isnt rocket science, but oddly enough it isn't what we have been doing thus far ▪ We should keep this in mind for everything we put on the website Our website will give people quick and easy access to our services and clear information about life and work in Barnsley “
11. Yes we can! ▪ A project under the Customer Services Programme (CSP) ▪ Several work packages, essentially three legs of concurrent development ▪ Clean up the current website as much as we can ▪ Define ways to improve the entire process (new.barnsley.gov.uk) ▪ Build interactive and self serve applications
12. Yes we can! ▪ A project under the Customer Services Programme (CSP) ▪ Several work packages, essentially three legs of concurrent development ▪ Clean up the current website as much as we can ▪ Define ways to improve the entire process (new.barnsley.gov.uk) ▪ Build interactive and self serve applications You are here
13. Improving the process ▪ We worked with an agency to help the council define a process ▪ Other local authorities are doing the similar activites ▪ Shropshire is a key player with project WIP ▪ GDS (Government Digital Services) released a lot of guidance from their learnings with GOV.UK ▪ We met with people in these organisations (and others) to discuss what went wrong, and what we can do to improve things
14. The new process ▪ Production of a build guide ▪ Worked with copywriting agency ▪ Details a process for redeveloping web sections ▪ Pilot with a family of web content ▪ Fundamental re-build into a new website ▪ A / B testing with real stakeholders, and gradual transition to new site
15. The plan
16. The key is engagement ▪ Work with service to identify stakeholders ▪ Service identify stakeholder test groups (for real customer feedback) ▪ Identify ‘tasks’ that stakeholders may want to perform ▪ Service provide information to help stakeholders perform ‘tasks’ ▪ Service identify imagery, videography etc... and procure from communications team ▪ Engage with all stakeholders, review, gather feedback and improve the build
17. How does that work out?
18. Enough background, lets take a look!
19. How do we get to fostering information?
20. How do we get to fostering information? 1
21. How do we get to fostering information? 1
22. How do we get to fostering information? 1
23. How do we get to fostering information? 2
24. How do we get to fostering information? 2
25. How do we get to fostering information? 2
26. How do we get to fostering information? 3
27. I’m on a general page
28. Where is the information?
29. Where is the information? 4 5 6
30. Let’s try that again!
31. Let’s try that again! Disclaimer We aren't saying we have it perfect, that’s why we are testing it
32. How do we get to fostering information?
33. How do we get to fostering information? Finished home page will not look like this
34. How do we get to fostering information? But it will still contain high level categories
35. How do we get to fostering information? 1
36. How do we get to fostering information? 1
37. How do we get to fostering information? 2
38. ...or...
39. How do we get to fostering information? 1
40. How do we get to fostering information? 1
41. How do we get to fostering information? 2
42. I’m on a general page 2
43. A little more helpful? 2
44. Where is the information?
45. Where is the information? 3
46. ...or...
47. Where is the information?
48. Where is the information? Links promoted in content (in context)
49. Where is the information?
50. Where is the information? 3
51. But were getting ahead of ourselves
52. 40% of our customers view the site on a mobile phone
53. What page am I on?
54. Designed to be mobile first
55. Works on tablets too
56. While we're at it, have you ever tried to print a council web page?
57. Why do I need all that navigation?
58. New print view
59. Let’s talk about navigation
60. Why do I need all that navigation?
61. Why do I need all that navigation?
62. Just the important things
63. Just the important things Pages directly related to this one
64. Just the important things Actions you are likely to perform next
65. Everything else Just the important things
66. Related links
67. Related links In the top level of fostering
68. Related links Related across the entire site
69. Navigation ▪ About what action is likely to be next ▪ Shows you what was last (so you can go back) ▪ You do not need to be able to browse a completely different topic while completing the action
70. Let’s talk about page layout
71. The F pattern
72. The F pattern
73. The F pattern
74. Do you ever wonder why newspapers have columns?
75. Ideal reading width
76. Ideal reading width ▪ A measure that is too short causes the eye to jump awkwardly from the end of line x to the start of line x + 1 ▪ A measure that’s too long can cause the reader’s eye to double back
77. Ideal reading width ▪ A measure of 45 to 75 characters is the optimum for readability in columns of text
78. Ideal vertical height for scanning
79. Ideal vertical height for scanning
80. Ideal vertical height for scanning ▪ Short paragraphs and plenty of ‘white space’ make it easier for a viewer to quickly scan for the words they are looking for
81. Ideal vertical height for scanning
82. So what are those big picture pages for?
83. Landing pages
84. Landing pages ▪ Quickly help customers find a task they wish to perform based on most popular tasks
85. Landing pages ▪ Images put the ‘Barnsley brand’ into the pages ▪ We need professional looking local images!
86. On mobile they get out of the way
87. How do you know this is the best approach?
88. Until we have asked all stakeholders we don’t!
89. But we sure have tested it
91. ▪ Consulted with various design and web experts ▪ Consulted with communications team, web team, web editors, External partners ▪ Consulted with industry peers ▪ Received feedback, some good, some bad ▪ We made alterations ▪ We asked again (and again) until all the niggles were gone
92. ▪ It’s an ongoing process ▪ Agency are reviewing for final time now ▪ Working with communications designers for child friendly brand for entire council ▪ We are asking you now
93. Let’s talk about search
94. Lets search for adoption
95. It doesn't find too much
96. It doesn't find too much ▪ We searched within the fostering section ▪ This limited the scope of the results to fostering
97. It doesn't find too much ▪ We can widen the search if we like ▪ Perhaps we were looking for something just in this section though? ▪ Lets widen the search
98. Oh, there are my results
99. Oh, there are my results ▪ We searched within the wider category of ‘Fostering, adoption and children in care’ ▪ Adoption pages are within this section, so it found them
100. Oh, there are my results ▪ We searched within the wider category of ‘Fostering, adoption and children in care’ ▪ Adoption pages are within this section, so it found them
101. Other ways to search
102. The A to Z index (current)
103. The A to Z index (current) ▪ On a touch screen these are too small to touch
104. The A to Z index (current) ▪ Entire site indexed, harder to find specific content ▪ Keywords are not preset, meaning that anything could be anywhere (no control)
105. Is there a better way?
106. The A to Z index
107. The A to Z index ▪ The bottom of each page contains the A to Z index for that section ▪ The buttons are wider so they work well on a touch screen ▪ Only the letters highlighted contain keywords for that section
108. The A to Z index ▪ Each section has its own A to Z index ▪ Much like the search facility, you can widen the search so you can find more results
109. The A to Z index
110. The A to Z index ▪ Looking for Fostering within the Adoption A to Z section ▪ Unsurprisingly doesn't have too many results
111. The A to Z index ▪ Lets widen the search
112. The A to Z index
113. The A to Z index
114. The A to Z index ▪ Looking for Fostering within the wider ‘Fostering, adoption and children in care’ returns much more results
115. The A to Z index ▪ As does looking for Fostering with the Fostering section
116. Let’s talk about content views
117. Content views
118. Content views ▪ The bottom of each page has an ‘overview’ section ▪ Contains links that you can use to quickly find all pages that are similar
119. Content views
120. Content views
121. Content views
122. Content views
123. Content views
124. Content views
125. Content views
126. Content views
127. http://new.barnsley.gov.uk
128. Tell us what you think ▪ http://new.barnsley.gov.uk ▪ Use the ‘Feedback’ buttons and links on the site
129. Any questions?