“You’re not going to have seen a Council website that looks like this before”

Wireframing, and creating the blueprint for our new site

At the end of the last post, we were in a position for Jadu Creative to go away and pull together ‘wireframes’. Wireframes can be thought of as the blueprint or ‘skeletal framework’ of a website or app. UX (User Experience) designers use them to define the hierarchy of items on a webpage and lay out the ordering of a site.

Early design choices

Jadu created wireframes for landing and content pages, displaying how they’d look on both desktop and mobile devices.

When Jadu presented these to us, we were really happy with the early design direction and felt Jadu Creative had really captured what we were after through the early design brief meetings.

Homepage wireframe. Featuring hero image that starts from the top of the screen, with under-curve and text overlay.

In terms of design, there is a focus on a large ‘hero’ image at the top of the homepage. A hero image is the main photo you see on a page. This feature was inspired by the Las Vegas council site we’d cited as a site we liked the design of. A gallery of hero images will be used that show-off Watford as a whole. Like Cassiobury Park, the High Street and other places our residents associate with the town. This image will change each time you visit the website. This fits in with the guiding principle that the site isn’t about Watford Council, it’s about Watford.

We also particularly liked the curvature under the hero image. That, Jadu took the top of our Council crest and the shape of our town hall as inspiration. And how the “Lovely to meet you. We’re here to help you” text is going to be animated and appear over the hero image on the homepage. This was inspired by the website of the National Trust.

Overall, what struck us was how unlike other public sector websites it looks like and how the various elements when pulled together work and fits with our goal of pushing the boundaries and creating something that is truly different from everything else out there.

Informing the design as we go

We are refining the design as we go through the project and Jadu collect feedback at every part of the design journey which they then built into the next version of the site. Feedback given from this initial session included the reordering of some items to reflect a focus on local services and events in the town rather than news as the project team felt people wouldn’t necessarily come to our site for news from the council, and would instead be more interested in events in the area.

There were also some design features that the project team felt would benefit from testing with residents to inform the final design. Such as, is listing our services under ‘top tasks’ or linking to them via a button at the top of the page better? When we get to test the site, with residents and other users, we’ll take the feedback, to inform the final decision.

Landing page wireframe. Featuring sub-categories and the ability to promote featured content

Finally, we consolidated feedback and created a presentation for our Mayor and Managing Director, explaining the progress and reasoning behind the tweaks and decisions. They were very supportive of the direction being taken, which was highly important to us.

Content page wireframe.

Based on the feedback, Jadu went away and reworked the wireframes, before coming back with a second round of the concepts. These were approved by the project board, Managing Director and Mayor. Which meant the wireframes were signed-off!

Just looking at the wireframes, we were astonished at just how different we could make our website compared to what we have now. Even in the blueprint form (where we’re dealing with boxes with crosses in them), it has made us think “WOW, we’re really going to see a huge improvement here!”

We want to push the boundaries and that’s what Jadu Creative is helping us do. You’re not going to have seen a council website that looks like this before.

The next stage will be visual mock-ups of homepages and extended designs (for the likes of landing pages and documents), and that will be the topic of our next post!

Thanks for reading.

Please leave us a comment

--

--