BunnyfootBunnyfootBunnyfootBunnyfoot
  • Our services
  • About us
  • UX training
  • Our clients
  • Blog
  • Contact us

A user-centred website design refresh

——

Going from 20% task completion to 100% with Sheffield City Council

Sheffield City Council provides a wide range of services to a population of approx. 563,700 people within the city and its environs. This population is very diverse, with extensive needs and requirements, and includes 50,000 students. As part of this provision of services, it maintains a large, mature website which allows its customers to access information and many council services online.

What Sheffield City Council Wanted

The council’s ongoing vision is to provide excellent online services which are simpler, clearer, faster, and focus on customers and employees; where everyone is able to do what they came to do.

They wanted a redesign of their current web services to incorporate best practice in user experience, accessibility and persuasion, and to create a best-in-class provision of online services to their customers.

Their key goals were to:

  • Redevelop their online services to be simpler and cover the things that customers contact the council most about
  • Ensure information is available in a way and at a time that suits customers so they can find what they are looking for
  • Provide more council services online, so that people can access services at a time that suits them
  • Proactively offer or sign-post a range of services to prevent customers needing to contact the council later

The new website was to be built on and would manage its content using a new technology platform – Adobe Enterprise Manager – and the design and implementation would have to allow this.

There were specific requirements to design and implement the new website within an Agile methodology, and to create a Global Experience Language to standardise styling and visual elements (such as typography and iconography) as well as interaction patterns and page elements (such as cards, promos, accordions etc.) at code level to provide a blueprint to underpin future developments of the website by Sheffield City Council and its suppliers.

Content analysis with stakeholders, ideation workshops, online card sorting and conceptualising page layouts were all part of the UCD process for Sheffield City Council

What Bunnyfoot Delivered

  • In-depth review of existing customer insight and analysis to identify themes and areas for exploration and redevelopment
  • Validation and extension of existing Personas to represent the key needs and behaviours of the site’s users
  • 5 telephone Depth Interviews with existing and potential users of the site (reflecting Sheffield City Council’s customer base) to gain insight into their expectations and behaviours
  • 5 face-to-face formative User Testing sessions observing people actually using the current site to complete key tasks and actions (based on the frequency of use from analytics) and observe success rates, browsing and search strategy and routes taken
  • Participatory Design Workshop with Sheffield City Council stakeholders across a range of council service areas to gather business insight and establish key themes, constraints and opportunities for the design of user-centric service relationships and user journeys
  • A set of key Customer Journey Maps with functional components and stages
  • Online Card Sort to gain insight into the way that customers visualise the relationships and structure of the information on the SCC website as well as the labels and naming conventions that were most understandable
  • New, minimised and primarily task-based Information Architecture and structure for the website reflecting the users’ needs and expectations and designed to get them to content and actions quicker and more intuitively
  • The new IA and key journeys were tested and validated using Treejack to compare success rates with the baseline user testing
  • A set of Wireframes of key pages and journeys with 10 distinct reusable templates. Reusable page components were broken down into ‘Atoms’, ‘Molecules’ and ‘Organisms’ according to the default Adobe Pattern Lab pattern
  • Three concepts for the overall Visual Design; these were refined down to a final design (across desktop, tablet and mobile)
  • Design collateral was produced and fed straight into the development environment
  • A fully-coded Prototype for real-time testing with users – to reduce development time the wireframes were used to inform coded (prototype) pages in the development environment. These pages were iterated during user testing and then finalised into the final code
  • 5 sessions of User Testing (observed browsing and qualitative interview) of the prototype pages (including visuals) to validate the user experience and drive final enhancements
  • Front End Development – all coded elements were built into Adobe Pattern Lab for quick and easy access to development testing and future use by site managers and content creators
  • An interactive online Global Experience Language (GEL) document defining styles and behaviours for all site elements as well as a set of ‘best practice’ UX principles for designing new templates and pages within the site

From an interactive prototype to the final visual design of the homepage

The Results

As final deliverables, Bunnyfoot provided a set of HTML/CSS page templates and a comprehensive pattern library with accompanying Global Experience Language (GEL) guidelines and UX design principles.

The collaborative approach to this project allowed us to work closely with the SCC internal team giving both parties a deeper understanding of the context and insights, and how to apply them to a UCD design. One of the key findings from the research was that the structure of the website was too complex and information or actions could be buried several layers deep and were thus invisible or hard to find.

The great majority of people visited the site to ‘do something’ rather than to browse and they were usually there to perform a single action.

The new structure, therefore, surfaced ‘actions’ very prominently and following the results of the card sorting the potential actions (several hundred in total) were prioritised and categorised into four main areas – ‘Pay for…’, ‘Apply, Register or Book…’, ‘Report a problem…’ and ‘Contact us’. Within each of these areas, the most used activities were immediately visible along with a clear link to other, less critical actions. There was also the opportunity to go directly to a personalised, individual transaction by entering an existing reference number.

All the council services were categorised according to the insight gained from the user research (validated in the several rounds of testing) into service areas that matched the mental model of the users, increasing the findability of the information. Wherever possible each journey on the site was kept to a maximum of three clicks, and the key descriptive label was surfaced on the first tier of the navigation, again to increase findability.

We also provided a very prominent ‘search’ functionality and re-designed the search results to return results that were relevant, categorised and capable of faceted filtering by service area.

Within the wireframes, we created a consistent and minimal hierarchy of content from key information to detailed description as a guide for the re-writing of the site’s content by SCC’s content editors to be clearer, leaner and more user-friendly. The principle of ‘progressive disclosure’ was used to target information to the user’s needs at every point in the journey without overwhelming them with ‘clutter’.

In the baseline user testing of the original site the success rate across all the key tasks was very poor, with all users unable to complete 8 out of 10 tasks and only 1 task out of 10 successfully completed by all users. The testing immediately prior to the site going live, using the same 10 tasks, gave a 100% success rate with all the tasks successfully completed by all users.

The perception of the site was hugely improved, with customers remarking that “everything I wanted to look at I could find” and “whatever you’re looking for there’s a category to find it and it’s a lot simpler” and “it’s so much easier as it’s all on the one page”.

Bunnyfoot has helped us challenge the way we do business online by understanding how and why our customers want to access our services. Their outputs have been to the highest standard and will help us continue with our digital journey for years to come!

Martin Riggall

Head of Digital Services, Sheffield City Council

Rectangle

Read more of our case studies

Case study Chatham house, detailed IA restructure using card sorting, tree testing & more

Chatham House: Research for Digital Transformation

public sector

View more

Chatham House: Research for Digital Transformation

public sector

Chatham House: Research for Digital Transformation

public sector

Chatham House: Research for Digital Transformation
2020-09-08
Case study Over 80 usability tests to inform design strategy with BT

BT TV: Large Scale Usability Testing

media

View more

BT TV: Large Scale Usability Testing

media

BT TV: Large Scale Usability Testing

media

BT TV: Large Scale Usability Testing
2020-09-08
Case study Change incorporated, agile approaches to research on social change

Change Incorporated: Brand Research & Usability Testing

healthcare

View more

Change Incorporated: Brand Research & Usability Testing

healthcare

Change Incorporated: Brand Research & Usability Testing

healthcare

Change Incorporated: Brand Research & Usability Testing
2020-06-06

DesignSpark: UX Research & Design

e-commerce

View more

DesignSpark: UX Research & Design

e-commerce

DesignSpark: UX Research & Design

e-commerce

DesignSpark: UX Research & Design
2020-04-14
Case Study Virgin Holidays, 140% increase in conversions and KPI targets hit for the first time

Virgin Holidays: UX Redesign

travel & tourism

View more

Virgin Holidays: UX Redesign

travel & tourism

Virgin Holidays: UX Redesign

travel & tourism

Virgin Holidays: UX Redesign
2019-09-27
See all case studies

Read enough? Get in touch

Contact Paul Wallis to discuss your needs

Contact us
If you want to discuss a project or partnering with Bunnyfoot for your experience design needs, contact Paul Wallis

LONDON

4th Floor
54 St John’s Square
Farringdon
London
EC1V 4JL

Tel: 0207 608 1670

SHEFFIELD

The Old Chapel
8 Mortimer Street
Sheffield
South Yorkshire
S1 4SF

Tel: 0114 478 2950

OXFORD

Boston House
134 Downsview Rd
Wantage
Oxfordshire
OX12 9FF

Tel: 01235 606 140

Cyber Essentials (PLUS) Logo
  • Copyright Statement
  • Terms & Conditions
  • Training Course Terms & Conditions
  • Privacy Policy
  • Jobs
© Bunnyfoot Ltd 2020 | Bunnyfoot is part of the Sideshow Group
  • Our services
  • About us
  • UX training
  • Our clients
  • Blog
  • Contact us
Bunnyfoot
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Privacy PolicyREJECTACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are as essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.