Blog

Cambridge City Council wanted to revamp their existing Drupal website to make it more accessible and easier to use.

JDi Solutions has a long history of working with Cambridge City Council. Working exclusively with local government for over a decade means we understand the specific needs of local government organisations, particularly district councils, and we were delighted to be involved with this project. The council has a strong web team with technical expertise and wanted a partnership approach to this project which, as a small, friendly team ourselves, we are well suited to.

The design and layout of the original site was based on customer feedback and was strongly influenced by internal business requirements, which resulted in a complicated navigation system and cluttered pages.

The old homepage has over 65 links!

We implemented click tracking to see how effective the home page, navigation and layout was, working closely with the city council web team, and the web team carried out usability testing in the summer of 2014.

The data and feedback we got back were fascinating.

Firstly the Google analytic data suggested that nearly 70% of all visits to the Cambridge website arrived directly on a content page from an ‘organic search’, and that approximately 20% of all visits actually landed on or went through the home page (in any one session).

The click tracking data showed that only 10% of the links offered on the home page (out of 65+) were regularly being used, with the search engine the most frequently used. The tabbed navigation offering the ‘top tasks’ wasn’t being used as much as expected, likely because customers were landing on the site directly within the content they had searched for and leaving the site soon after. Customers were also confused between ‘top task’ navigation and ‘main menu’ options, not knowing what the difference was.

During the usability testing, overwhelmingly, customers’ first reaction to landing on the home page was “‘Wow! There’s a lot to choose from” or “I’m not sure where to start”. So whilst only 20% of visitors go to the home page, we could expect that a large majority of those customers were confused about what to click on, and subsequently used the search or left the site.

Additionally the testers said:

• they are not interested in news items, particularly if this information gets in the way of their task
• they are (usually) only interested in one task at a time
• the information is too wordy and full of jargon

Like many other local authorities, Cambridge City Council is facing significant cuts in funding and is looking for ways to deliver services more efficiently and effectively, aiming to channel shift customers to their online services as much as possible. The Digital Efficiency Report 2013 suggests that “transactions online can already be 20 times cheaper than by phone, 30 times cheaper than postal and as much as 50 times cheaper than face-to-face”.

The overall aim of this project was to ensure that the customer journey was as easy and accessible as possible, which meant stripping back the website template, removing unnecessary clutter, reducing the home page options, implementing one navigation system (which included flattening the structure and not categorising services into overly large sections, like ‘environment’) as well as re-writing the content to focus on customer needs.

Working together with the web team at Cambridge City we decided on a single menu driven approach, like that used by the award winning gov.uk site. This has proved to be a very successful approach to navigation and allows people to easily find content through a single focus point on each page of the site where the user feels they are getting closer to their goal with each click. The sidebar content from the original site was moved to the footer where it could appear on every page and provide customers with quick access to news and other information without obscuring the main content.

The most frequently used items are highlighted at the top with icons, everything else is neatly laid out underneath with no other distractions

The project also presented a great opportunity to showcase some of our latest innovations and we built the site using our new “Orchestra” Drupal framework, which has been developed with all our local government experience in mind. The site needed to be accessible and fully responsive to work on any device now and in the future, and our base theme provided all the layouts and rules required for that, out of the box. The council were able to utilise the base theme to implement their own styles in-house, confident that everything would work responsively with little or no modification. We made full use of Drupal's Panels suite of modules including ‘Panelizer’ and ‘Panels Everywhere’ in order to easily create layouts for content and to override them for custom page layouts, and we implemented single column layouts across most of the site to declutter, reduce distraction and make the site easier to use and read for all.

Cambridge were able to create their own custom page layouts easily using the Panels suite of modules

The new site design needed simple, understandable icons and these were provided by neighbouring authority, South Cambridgeshire, working in partnership to share resources and provide common themes across both authorities’ websites. The icons have been used to highlight top tasks by making them stand out to customers and they work superbly on all platforms.

Our Orchestra framework, built on top of the well-established Panopoly framework, provides standard configuration for the WYSIWYG editor, work flow, scheduled publishing, site navigation and a simplified permissions model which ensures that we can reduce implementation timescales for all our future projects. We have also added several modules we’ve developed over the past few years, such as our contact details block module (which displays contact details for any section or page based on its categorisation) and our site wide message (for displaying emergency status messages at the top of the site).

Behind the scenes, one of the most successful things about this project was the introduction of a Kanban board to manage the priorities and remaining tasks. This was the first project where we had the opportunity to put this into practice with a client and it was a great success. We have always used an iterative development model but have more recently started integrating Agile methods into our development process and Cambridge's web team were given complete access to the board. They were able to prioritise the tasks and keep track of our progress as well as engage directly with the developers. It's been a fantastic addition to our toolkit and we've since refined the process and maintained the customer's access.

Overall the project has been a great success. We've seen the successful roll out of our Orchestra framework, seen how it can empower our clients to build the site they want and got plenty of ideas for further improvements in the future, and Cambridge City have got a beautiful, custom designed, easy to use site that we're all really proud of.

The new homepage is much cleaner and more focussed helping people find what they're looking for much more quickly

We launched the Cambridge City website in October 2015. Since then they’ve already seen some good results:

• A reduction in the length of time customers spend on the home page choosing an option, with all options being used rather than just a few;
• A reduction in customers who exit directly after landing on the home page, indicating that customers continue their journey after being presented with fewer options;
• An increase in customers using the search, which was made larger / more obvious, up by an average of 1.5% (at the time of writing, for a 3 month period 2014-2015 and 2015-2016);
• Visitors are spending less time on the ‘landing’ pages choosing options (council tax, bins, housing), indicating that the new task based icon approach is helping customers locate the popular options and the streamlined template allows the content to speak for itself, being better presented with less clutter and clearer titles;
• Generally the feedback has been positive, with both customers and staff finding the site easier to navigate and search.

Of course, as with any project we've learned new things and progressed along the way. For the first time we have been able to make use of Drupal's new migrate modules, and once implemented these are really powerful and easy to use. The Kanban board has been a revelation for managing projects (we now use it for everything!) and the decluttering and single column layout approach to presenting content really helps to make the site easier to use for all.

The final word however must go to Brigitte Wilson who managed the project from the council’s side:

“The City Council website is now completely focused around the needs of the customer, accepting that they come to the site with one task in mind and they want to do this quickly and easily.

By removing all the clutter (left and right hand sidebars), we’ve really focused the customer attention on the content, and this layout scales perfectly for any screen size. We still carry newsworthy information, which is repeated on every page, but we’ve moved this lower down the page into a ‘mega footer’, ensuring it doesn’t interfere with content.

The Orchestra framework provided us with a structure on which we could build the website how we wanted, with only a little additional customisation. We chose to do further customisation in-house as we have a technical web officer; however when we needed assistance, we were able to call on JDi’s expertise in Drupal, as well as sound off our ideas for developments. The team at JDi always offer their advice and experience as to the usability/feasibility of the development ideas we have and they are very keen to ensure developments meet usability and accessibility standards as much as possible, as well as build them to be easily shared across their other websites.

We used a Kanban board to project manage the implementation, which enabled us to set and prioritise tasks, as well as monitor progress and feedback test results etc.

The Drupal CMS is really easy to use for our 100 web editors across the council, with the latest implementation on the Orchestra framework offering a better user interface and easier ways to add media.

We’re also very pleased with the capability of the ‘panels’ features, which allows us to easily customise some of our more commercial sections, thus discouraging service teams to go off and develop separate satellite websites.

We’re very proud of the final result.“