Building Perfect Council Websites 2010: Research-led design at Southwark Council

with Christina Fowler from Jadu and Alice Ainsworth from Southwark Council

Thank you to everyone who attended the round table discussion. I hope that the session was of interest to you and it helped you out with some of your own projects. ­

The discussion was based upon a presentation I recently did at the Scottish Web Teams Forum. You can see this presentation at - it includes some visual examples of feedback we received from users and what we did to solve any problems.

Southwark Council's website redesign process was broken up into steps in order to meet the council's goals for user engagement.

­1. Evaluate existing design

Southwark had a lot of data on their site usage already including website analytics and search statistics. Internal meetings were also held to establish the main problems with the site from the council's perspective.

Through one to one "accompanied surfs" which took place in a residents home Southwark were also able to see the extent of these problems and generate a list of the key areas of the site design, navigation and user experience that needed to b­e a top priority in the redesign project.

2. Test out new ideas

Once the main issues with the site had been addressed we were able generate new ideas for the site and present these to residents via focus groups. This enabled us to find out whether these ideas really offered a solution to users needs, if they would be used on the site and what benefit they offered to the Council.

Residents who attended the focus groups were also encouraged to come up with creative ideas of what they would like to see on the site and these ideas were considered by the web team as potential new features for the site.

3. Wireframe

Wireframes are used to demonstrate the layout and content of the website only. This stage should be used to understand how a user will find their way around the website through navigation, menus, features and calls to action.

I started by sketching using pencil and paper first, then I collaborated with Alice and her team using a whiteboard and pen to plan out what features would be on the homepage, what would compromise the navigation tabs, the left hand menu and the calls to action. This enabled us to filter the required features and prioritise them over the requested features.

4. Moodboards

Moodboards are used to help decide the overall look and feel of the new website. Layout and positioning are not in question but the direction of style which we should pursue.

I created a number of moodboards that were all based on Southwark Council's branding. Southwark Council's marketing and communications departments were involved in deciding which moodboard best represented the Southwark brand and could be taken forward for the site design.

5. Iterations

I then created a mockup of the design and collaborated with Alice and her team to improve it over and over again. Each round of changes is called an iteration and once Southwark were happy the final iteration was handed over to a developer to build and integrate into Jadu CMS.

At this point Southwark did further user testing with eye tracking and mouse tracking to ensure that the new design and site structure was an improvement to the user experience.

Top 10 tips

  • Always start with pencil and paper and sketch out any feature on your site;
  • Ensure that everyone that is involved in the web project has the same clear goals including goals for content, features and branding;
  • For design by committee situations present each individual with the design process and ask them what stages they want to be involved in;
  • Keep content and functionality separate from look and feel to give both the attention they deserve until you can sign them off and then move on to a visual mock-up of your site;
  • For services that feel under represented on the home page of your site show them that you have paid attention to the user journey in order to reach them;
  • Don't rely on the LGNL to give you good customer journeys. Customise the LGNL to suit your residents and your site;
  • Don't rely on one method of navigation - search, A-Zs, menus and calls to action should all be considered equally and none should be neglected.
  • Create a template for your landing pages to help ease the work load and give users a uniform structure;
  • Don't overload your home page with news items and communications features. Make use of the landing pages that are relevant to the subject. A feature on planning consultations is likely to have more uptake on your planning landing page (where users who are interested in that topic will be) rather than on your main home page; and
  • Never present just the final design to your committee, show them all of the stages that you went through to achieve the final design from sketches, wireframes, moodboards through to all the iterations.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Make a comment

There is one response to “Building Perfect Council Websites 2010: Research-led design at Southwark Council”

  1. Steven Says:

    Wow - a council doing things properly. I can but dream :-)

Share this post


The official Jadu Blog (a peek inside). The musings and magic of the Jadu team and log of new web apps, customer super hero stories and mobile web marvels.

Recent posts