Telling the story of Birmingham and the vision for the future.

What could a future look like?

That was the question we asked as soon as we had interpreted all of the research. We began with understanding what the key tasks were from web analytics from the existing site; a quick and useful way to understand how people interact with the site currently so we can at the very least, wireframe (skeletal framework) a key landing page or homepage and start testing it.

Once the wireframes were agreed — our design team came up with two very different concepts to put in front of the citizen panel and get their feedback. We took the essential elements from the council’s branding and distilled much of the data we had on browser usage, demographics and the languages spoken in the city (over 149 languages detected and in many cases, English was not the first language) before finally arriving at two very different approaches. One ‘playful’ and one ‘simple’ — all the while, focus remained on users being able to find key tasks on the website quickly.

Since it was the easiest for citizens to conceptually understand, we started with the main homepage. Often, with the majority of traffic coming from search engines deeper into a site, our focus is usually on the style and presentation of content pages — but our process had to begin somewhere!

Concept 1: A modern, grid-based layout that feels more orderly and reduce visual chaos. Colourful tiles, ‘Top Tasks’ give users an easy access to the most popular tasks of the website. The handcrafted icons representing each task, create a beautiful and engaging experience followed by context about what is happening in the city now and in the future. The homepage is easy to use and interactive, with a strong focus on the end-user.
Concept 2: A playful, colourful page that portrays a visual sense of people and place. Again, all content would be driven by the needs of citizens and this would be reflected in the use of people and simple language. Since the brand guidelines do not prescribe the use of primary colour, we created a colourway that was bright and could easily change.

Citizen feedback

The general consensus was that Concept 1 looked like something they would see fitting with the Birmingham City brand and represented the city well. Both colour and images of people seemed popular and the focus on tasks was widely liked.

Overall the feedback distilled to:

  • Use all elements of the purple header from Homepage Concept 2
  • For the top half of the page, use the coloured tile design from Homepage Concept 1, but:
  • Reduce white space a bit to allow more on the page without scrolling or put an image behind like on Homepage Concept 2
  • If there are obvious colours to use, use them (make the garden waste tile green or brown for example; blue badge blue, etc.)
  • Make the ‘other services’ bar less like a block bar — maybe arrange as smaller tiles so it doesn’t look like a site footer
  • Replace the bottom (news/events) section from Homepage Concept 1 with the bottom section from Homepage Concept 2

“Both of the design options are much better than the current website, I really like the use of images and icons on tiles as well as the vibrant colour choices. White space should be minimised to allow more on screen.” Citizen quote

“The prominence of the search bar in both design options really stood out to me. I think the function to see visited pages and ability to ‘pin’ pages is really engaging.” Citizen quote

“Interested to know if the homepage service tiles can change in order based on how much they are used. Also the bar at the foot of the services section, which links to other services, looks like it’s the bottom of the page and people may not scroll down further on the site so this could be altered.” Citizen quote

What’s next?

We’re moving into the next stage of design having gathered the first round of valuable insight from citizens, creating body pages and landing pages and also iterating the initial concepts based on feedback from actual users. We will then hold a series of ‘Eye Tracking’ exercises using more interactive mocks-ups that feature the key user journeys we have identified from the current web analytics. This data will then be used to review the design once more before integrating the new designs into the new web platform.

This is the very beginning of an exciting journey with describing Birmingham City through design. Our approach is to move quickly through the stages in order to deliver the new website by late summer — whilst ensuring we never compromise on the citizens needs, prioritising them ahead of all else. The new will set the tone for how the council does business in the future and communicating the journey is something the teams working on transformation are passionate about.

We will be publishing blog updates on the website design progress as regularly as we can so you can see how it’s coming along!