At SocietyWorks we believe in transparency. One of the ways we live this value is by working in the open, and giving our team members space on our blog to write about what they’re working on, something they’re interested in or even perhaps a mistake or challenge they’ve learned from.
In this blog post our Head of Development, Matthew Somerville, writes about a new waste container generator for our WasteWorks solution which uses CSS to make it easier to generate waste images tailored to individual councils’ branding and bin types.
—
WasteWorks is in use by a number of different councils, all of which have their own types of bin, in various colours and sizes (you can see a large array of photos of bins in use by local councils at the lovely govbins.uk site). An image of each type of bin associated with a property is displayed to residents from the WasteWorks homepage.
Our designer Lucas came up with some nice simple iconography for us to use on bin day pages, including domestic wheelie bins, communal bins, sacks and boxes. When we’ve had a new client, whose bins are differently coloured to any previous council, Lucas has been providing us with new PNG images to match the bins the council uses, exported from the source vector images. As well as the right colours, each PNG had to be provided at two different sizes, to work with high-resolution displays, and so we’ve built up a small collection of such bin images over the years.
These pictures only vary by colour (and the presence of a recycling logo), so I wondered if there was a better way we could generate these images. SVGs are vector graphics – they scale to any resolution, and importantly for this can be styled with CSS, the same mechanism used to style a web page. CSS also has “variables”, where you can define e.g. a variable to be a particular colour, and then use that variable in a different part of the document (or SVG image).
Lucas and I worked together to come up with SVGs for the various containers, which instead of specifying any fill colours directly, used one or more CSS variables to specify the colours. For the recycling logo, we set a variable for the opacity of the logo – defaulting to 0, so invisible, but we can set it to 1 to have it appear.
We’ve added a page to our user manual where you can play around with the colour of our new bin images in real time:
https://www.societyworks.org/manuals/wasteworks/container-picture-generator/ :-)
The header of our domestic wheelie bin SVG looks something like this:
<svg class="waste-service-image">
<style>
.wheel { fill: #333333; }
.main { fill: var(--primary-color, var(--default-color)); }
.lid { fill: var(--lid-color, var(--primary-color, var(--default-color))); }
.recycling-logo { fill: #ffffff; opacity: var(--recycling-logo, 0); }
</style>
...
See that the CSS uses the var()
fallback parameter so that the lid colour will e.g. default to the primary colour if not specified.
We used CSS mix-blend-modes in order to have shadows and highlights that would work regardless of the colour they were placed on top of; here’s an example shadow:
<g style="mix-blend-mode:multiply" opacity="0.12">
<path fill="black" d="M95.1227 90.7581L120.495 681.301H79.3654L50.9626 90.7581H95.1227Z">
</g>
Then when we embed an SVG in someone’s bin day page, the web page itself, outside the image, can specify what colour to use by setting the corresponding CSS variable, and the picture will then appear in the right colours. When we have a new bin colour, we don’t need to create a new image, only set the right colour.
Here’s the outline of an SVG on a bin day page, for a grey bin with a blue lid, showing the recycling logo:
<span style="--primary-color: #767472; --lid-color: #00A6D2; --recycling-logo: 1;">
<svg class="waste-service-image">
<style>
[... style as above ...]
</style>
[...]
</svg>
</span>
As an organisation we talk a lot about how our civic tech products are able to flex around individual authorities’ needs. This is not something we say because it sounds good; it is a commitment from us.
Take our residential waste management portal WasteWorks as an example.
WasteWorks is a front-end SaaS product which integrates with in-cab systems to simplify online access to all waste services associated with a property’s address, such as checking your bin days, ordering a new container or reporting a problem with a collection.
We built the core WasteWorks service in 2021 in collaboration with the London Borough of Bromley, who wanted to reduce the amount of unnecessary contact they were receiving about residential waste services caused by their existing processes.
With that goal in mind, we equipped WasteWorks with the ability to not only let residents self-serve up-to-date information about their waste collections (including being able to download a live schedule to their device’s calendar), but also to ensure that reports of, for example, missed collections can only be made after the crew has completed their rounds.
Since launching for Bromley, WasteWorks has consistently achieved a 40% drop in unnecessary contact, and made the final of the LGC Awards 2022 in the Public/Private Partnership category.
As more authorities have adopted the service, we have continued to add new functionality in alignment with the needs of our community of users, including:
The implementation of these features differs per council, adapting to their different rules, workflows and seasonal circumstances.
For example, where an authority needs to understand what and how many containers a property already has we are able to add in extra questions to gather this information.
In other instances, where an authority experiences shortages of sacks, we are able to give council staff the ability to temporarily switch off orders and communicate transparently.
Each council using WasteWorks has made it their own, with slightly different configurations to make it exactly what they need.
We can facilitate this because our software is built with local authority differences in mind. We have learned from delivering our long-running street and environment reporting service FixMyStreet Pro across over 30 authorities that even when the goal is the same, the approach can differ. We embed that flexibility into all of our products.
In terms of new developments, we will continue to be led by our users (both residents and staff) following our citizen-centred design principles. User groups enable us to bring everyone together to discuss ideas, while customers have the opportunity to log suggestions through our helpdesk service at any time.
Waste is a service area that will be subject to much change over the coming years in response to new regulations and legislation aimed at helping us respond to climate change.
However requirements change, we will be there to support our local authority clients along the journey.
–
If you’d like a conversation about transforming online access to residential waste services with scalable open source software, get in touch.
–
Image: Abel Matthew via Pexels
At SocietyWorks we describe our digital solutions as ‘citizen-centred’ – unusual wording in a world full of ‘user-centred’, ‘human-centred’ and other similarly phrased products that all essentially boil down to meaning “made with people in mind”.
So why do we choose to call our solutions ‘citizen-centred’, and what does that mean in practice? We asked Bekki Leaver, our Head of Product, to explain.
–
When talking about our citizen-centred digital solutions, it’s impossible to do so without acknowledging our history and connection to our parent charity mySociety, whose goal is to help people everywhere be active citizens by engaging in civic society.
To us, a citizen is anyone who is, or wants to be engaged in that civic space. This mission to engage can be seen throughout mySociety’s tools and services: FixMyStreet makes it easier to report local street-based problems to the correct authority, while WhatDoTheyKnow helps citizens make Freedom of Information requests and consolidates responses.
They, among the many, many others built by mySociety over the last 20 years, were designed to make the interaction between authority and citizen easier for the citizen. This drive to make things less of a burden on the individual is what underpins our citizen-centric design and we use all the tools in our arsenal to do it.
As the wholly owned subsidiary of mySociety, SocietyWorks extends the impact of the charity, applying that citizen-centred approach to the development of products specifically for local government and the public sector.
We apply everything we’ve learnt through running our charitable civic tech services to help us advocate for citizens in the design of authorities’ own services, to help them provide the best possible experience for their users.
Of course, we follow standard user-centred design practices, like uncovering needs and running usability studies, when we make improvements or design new things. This is part of our alignment with the GOV.UK Service Standard and is, in our opinion, the right way to do things.
We also build and test our solutions with accessibility in mind. Again, these are standard practices in the design and development world these days.
Where we differ is our approach to deploying these solutions. We design our products with the flexibility authorities need in order to integrate into any combination of existing systems and processes.
Unlike cookie cutter, off the shelf products, we recognise that different clients need different things, but balance this customisable approach with a commitment to ensuring the needs of the authority never clash with those of the citizen, creating what we hope is a positive outcome for both!
In essence, we’ll ask slightly more of you (the authority) as a client, but you want us to, because you’ll have better services and happy residents as a result.
As a society, our reliance on digital solutions will only continue to increase. New products and services are being created to reduce administrative burdens on authorities, which are driving more citizens to take a self-service approach.
With this increase in responsibility on citizens, we, as creators, need to continue putting them at the centre of that creation and persist in collaborating with authorities to find what works best for everyone.
–
Find out more about SocietyWorks, or subscribe to our monthly newsletter to have updates come to you.
–
Image: Centre For Ageing Better
As you are probably aware, W3C recently published an updated version of its Web Content Accessibility Guidelines (WCAG). Government Digital Service (GDS) will start to monitor for compliance with the new guidelines in October 2024.
However, we’re pleased to say that SocietyWorks solutions already meet them, thanks to the way our design and development team build accessibility into our products as standard.
WCAG 2.2 outlines the latest essential standards for making web content on desktops, laptops, tablets and mobile devices more accessible to a wider range of users.
The guidelines incorporate a number of different accommodations and alternative interactions which enable people with disabilities of all kinds to simply and successfully access digital content and services.
Due to the scope of web content covered by the guidelines, there may be some which don’t apply to every solution.
Upon testing our products against the relevant aspects of the new success criteria, we’re delighted to say that our digital solutions are already 2.2 compliant.
As a supplier of citizen-facing digital solutions to the public sector, we know our solutions need to cater to a broad audience with a wide variety of accessibility needs. SocietyWorks is heavily influenced by the GOV.UK Service Manual and strives to meet if not exceed the WCAG AA standards.
Accessibility is built into our products as standard throughout the development and design process, which means we already meet the 2.2 level accommodations that apply to us.
For example, all of the buttons and other pointer targets have a clickable area of at least 24x24px. We also ensure that text follows the contrast levels required by 2.2, and that content is arranged under clear heading hierarchies to make pages easier for users of screen readers and text-to-voice software.
For more information about how we make out solutions accessible, you can find out more here.
–
Image: abdoudz
We were recently invited to discuss the benefits and challenges of using data and digital twins at a roundtable event hosted by the Chartered Institute of Highways & Transportation (CIHT) and Ringway. The roundtable focused on the data rich delivery of highway maintenance specifically, but the experiences and advice we shared during the event are applicable on a broader scale, so we have detailed them in this blog post.
–
If our many years of experience providing citizen-centred digital solutions to the public sector have taught us anything it’s that being able to collect and share up-to-date data ultimately helps you to deliver a better service – and by association, nurture a more engaged population.
As Alessandro Fornaroli and Daniel Gatica-Perez write in the introduction to their research article published in the July 2023 edition of the Digital Government: Research and Practice report: “Data availability is paramount to the functioning of a city, and therefore platforms allowing to collect data generated by people represent a key element in the transition towards more citizen-centric cities.”
Whether it’s being able to display accurate asset information on a map or communicating that a certain road is due to be resurfaced on a certain date, we have always strived to help local authorities enrich their digital services with data through integration.
Among its many benefits, when used effectively, we’ve seen how data can help to reduce failure demand, increase accuracy and eliminate duplication or avoidable contact.
For example, where Buckinghamshire Council has been using integrated asset layers within its FixMyStreet Pro service, duplicate reports have dropped by 99.5%. The Council also uses asset layers to triage reports to parish and town councils based on the latest information available relating to speed limits, which has created anticipated savings of over £50,000 just for grass and hedge cutting reports alone.
Or take the way FixMyStreet Pro is used in London as another example, where the borough council users of the solution benefit from automatic diversion of reports not only between each other, but also between other public bodies operating in the capital, such as Transport for London (TfL) and the Peabody Housing Association.
In Bexley and Greenwich, for example, reports are triaged between the two borough councils, TfL and Peabody in the Thamesmead area, which straddles the border between the two boroughs. To help users visualise where certain issues are the responsibility of TfL or Peabody, we display polygons and what we call ‘red routes’ on the in-report maps.
Any issue within a certain category reported on a ‘red route’ is automatically sent directly to TfL, while the polygons represent areas in which issues are the responsibility of Peabody. Equally, if a resident tries to report a problem to Peabody or TfL which is actually the responsibility of Bexley or Greenwich, the report will be diverted.
The same can be done for triaging problems to National Highways elsewhere in the UK.
Other examples include the use of QR codes to make it quicker to report problems with assets like street lights or bins, special map pins to represent issues you’re already aware of or live updates pulled from in-cab systems to inform of why a bin collection is delayed.
As digital transformation accelerates at a faster and more competitive pace, and the sector and its suppliers begin to explore increasingly innovative uses of data, including the use of AI, there are challenges and unintended consequences that need to be considered.
Take this as an example: if residents can see at the click of a button a digital twin of each of your assets which tells them exactly how many streetlights are broken or gullies are blocked, you need to communicate what you’re doing about that – and if you’re not doing anything, why?
Resident-facing, front-end solutions which enable closed feedback loops are vital here, otherwise you risk creating more pressure on customer services or on other service areas not equipped to cope with an unintended increase in contact.
Similarly, if your use of data is intended to enable you to create more cohesion across council service areas, provisions need to be put in place to ensure everyone can provide the same level of service to avoid inconsistency and failure demand.
For example, when we implemented an asset layer for Buckinghamshire Council’s FixMyStreet Pro to enable the automatic triaging of reports to parish and town councils, we also delivered some functionality for those parishes to be able to update the status of reports even though they do not have case management systems of their own.
Crucially, consideration needs to be given to how the use of data could affect the accessibility of a service. This includes permanent or temporary physical and situational impairments which may cause people to be unable to, for example, use QR codes, operate digital maps or start reports from photos. Alternative steps need to be built into user journeys to ensure no one is locked out or left behind.
–
The landscape of public sector digital services is ever-changing, and we’re proud to be a part of it, working in partnership with a growing number of forward-thinking local authorities and other public bodies like Ringway, who sparked the idea for this blog post through their roundtable.
If you’d like to talk more about data rich citizen solutions to help you provide better services, please get in touch.
–
Image: Eric Weber on Unsplash
While we pride ourselves on building digital solutions that make it easier for citizens to interact with local authorities, we also want our products to be just as easy to use for the staff members at those authorities. In this blog post, Bekki Leaver, our Head of Product, talks about how we’re currently working on enhancing the admin user experience of SocietyWorks’ digital solutions.
–
An often neglected facet of designing digital services and the tools that enable them is the experience of the staff user. In SocietyWorks’ case, staff users of our products would be the council staff and sometimes external contractors who use both the administration interface and the front end of our solutions.
Giving equal priority to the admin user experience alongside that of the end user is something I’ve got a keen interest in, because during the course of my professional career I have seen the remarkable benefits to organisations that well thought out staff interfaces and tools can have.
When you’re on the phone to a contact centre and they’re apologising for their slow or unresponsive system, that’s poor customer and staff user experience. When an employee is having to copy and paste fields from a spreadsheet into another tool, that’s poor staff user experience. When you have to know the foibles of a piece of software on top of your area of expertise, that’s poor staff user experience.
For many years the expectations staff have of the tools and software they are required to use in their roles have been low. Using archaic HR platforms to request leave was just something you put up with, but as the workforce changes, and staff become more digitally literate, doing complex, previously unachievable things online every day, their expectations are higher and their tolerance for bad experiences is lower.
The value of good staff user experience parallels that of good customer experience; lower barriers to entry, higher satisfaction, improved relationship. There are also the benefits of better efficiency where intuitive, easy to use interfaces speed up interactions while also involving less training.
Improving the user experience for a product is never a finished task, with expectations changing all the time. Here at SocietyWorks, there’s a lot we would like to do to enhance the staff user experience of our products, which have advanced at a fast rate over the last few years.
Take FixMyStreet Pro for example, which now provides staff users with greater access to more controls and options through its administration interface.
As we continue to grow and expand the administration features and functionality of our products, we are keen to make sure that any improvements we make for the benefit of staff users are guided by those users themselves.
We’ve reached out to a group of authorities that use our solutions to participate in some research involving the staff users of the tool(s), exploring their roles, how our technology fits into their responsibilities and how they use the solution(s) on a day-to-day basis. I’ll be talking to them about their daily tasks, what other tools they might use and where things could be made better for them.
The results of that research will then inform our decisions on improving our products, not just in the case of what it can do, but where information and controls are and how staff users can interact with them. We’ll then set about designing new features, experiences and interactions, with regular testing and feedback opportunities before a phased implementation.
I’m expecting some pretty significant design changes, so watch this space!
–
Image: Will H McMahan on Unsplash
Our mission here at SocietyWorks is to help local authorities and other public sector organisations better serve citizens through effective and intuitive digital solutions. That’s a big remit, and a vast user base with a wide range of accessibility requirements. So how do we accommodate everyone? Bekki Leaver, our Head of Product, wrote this blog post to explain.
–
Being suppliers of public services we have a responsibility to ensure our tools and solutions are accessible to the broadest audiences possible. This is both a legal and moral obligation, and something we take seriously.
As Head of Product, it’s my job to ensure our tools are built to meet, if not exceed the Web Content Accessibility Guidelines (WCAG) AA standards. Here’s what this means in practice, and some advice for local authorities and any other public sector bodies who provide public-facing digital services.
WCAG is the international standard for web accessibility created by the World Wide Web Consortium (W3C). Within WCAG there are four principles for web accessibility. Each of these has conditions that need to be met to achieve a particular standard. These very sensible principles are:
The UK Government expects all public services to meet the WCAG 2.1 AA accessibility standard, both for citizens and staff users.
SocietyWorks is heavily influenced by the GOV.UK Service Manual when it comes to designing or improving our tools and products. If you’re familiar with this, you’ll know that this means everything starts with needs: both user needs and the service needs.
We also consider the context of use: where, when and how will the service be accessed? In addition to considering any permanent physical impairments that may impact the way a service needs to be used, we think about situational and temporary impairments too.
For example, making button targets larger for people using a service one handed due to holding a baby, having a broken arm or having bad arthritis, or improving the contrast for use of a service in poor lighting environments or by users suffering with an eye injury or partial blindness.
Our developers use semantic HTML – that’s using HTML elements for their intended purposes to build the front end of our tools. This lets browsers know what the element is and how it should behave, which makes it easier for keyboard navigation and for other assistive technologies to correctly render a website for their users.
When we’ve got something designed and built, we test it. We use a combination of automated and manual testing to make sure the technology meets the WCAG standards, which includes, for example, checking we can tab through elements and that screen readers behave as expected.
Knowing that no two councils or public authorities are the same, we build our digital solutions to be flexible enough to adapt to each of our clients’ individual needs. This is a great strength, but it can occasionally pose a challenge when those needs have an impact on the accessibility of the solution.
For example, we are sometimes asked to apply brand colours which have a poor contrast ratio or adjust forms to match a third party integration’s workflow in a way that makes them more difficult to use for users with certain needs.
When these instances occur, we do our best to help mitigate any negative effects on the accessibility of the services we provide. Here are some of the top tips I offer to clients when it comes to accessibility.
Firstly, I would always highly recommend commissioning an accessibility audit with a reputable auditor, such as RNIB, but you can find other providers through the Digital Marketplace. This will give you complete peace of mind that everything is working as it should for everyone who needs to use the service.
Secondly, consider your brand colours. Colour is a regular issue with accessibility, usually caused by text and background colours not having a high enough contrast.
Lastly, ensure the language you’re using is appropriate. Whether you’re writing form field labels or creating explanatory text, use language your users will understand. For example, avoid using system-related terminology that residents may not understand, but do consider using the local names for things. You can check the readability of your content using online tools like readable.com.
Creating and maintaining an accessible and inclusive service is an ongoing task. Criteria and expectations change. Keeping these goals in mind from the beginning certainly helps, as does remembering that designing services to be inclusive makes them better for everyone.
If you’re interested in learning more, check out these resources:
Or, if you have any questions about making digital services accessible to everyone, get in touch with us here.
–
Images
Featured image – Daniel Ali on Unsplash
Illustration – Sherm for Disabled And Here
For anyone who’s been following what we get up to at SocietyWorks for a while now, you’ll know that at the end of each year we feature in our parent charity mySociety’s annual review, looking back at what we’ve achieved, thanking those who joined us for the journey and giving a flavour of what’s to come in the next twelve months.
This year, while we are still featured in the mySociety review, we had so much to cover for 2021 that we’ve created our own spinoff version especially for SocietyWorks.
From further expanding the scope of our digital services for the public sector and finding yet more ways to make it easier for citizens to digitally engage with their council to welcoming several new organisations into our community and several more new faces into our team, 2021 has certainly been a busy one.
If you’d like to join us in taking a look back at the last year and taking a peek at what’s to come, you can read the SocietyWorks annual review here.
And if you’re also interested in what mySociety has been up to, here’s the charity’s review.
That’s a question our design team has been asking recently as part of our work on phase two of Bromley Council’s new citizen-centred waste product, which involves incorporating green garden waste subscriptions into the service.
“Subscriptions like green garden waste collections can involve multiple council systems and departments, so our task is to make sure that process feels natural and intuitive to residents,” explains SocietyWorks designer Zarino.
“In this project, we used prototypes to help us identify and confirm user needs—for both residents and council staff—pinning down exactly what the green garden waste service needs to do, and how the interface should work, to allow residents to create and manage their subscriptions in a way that suits them.”
The prototypes for the green garden waste front-end have now been completed and accepted by the Council, so we thought we’d lift the lid and let you take a look at how the front-end is shaping up.
It needs to display green garden waste collections. The citizen needs to be able to identify their property and view all collection information related to it: whether a subscription is active, what are the previous and upcoming collections, the number of containers being collected and when the subscription renews.
It needs to provide self-service subscriptions to green garden waste collections. If no collections are set up for the property, the citizen needs to be able to complete a form providing relevant information for the council to create a subscription – collection address (from UPRN), contact information, whether new containers are required and payment details for the collection. The citizen should be encouraged to check their details are correct before submitting, and needs to agree to the terms and conditions. Once the payment has been processed and the citizen has been sent a confirmation email, a confirmation page reiterating that their subscription has now been set up should be displayed.
It needs to take requests for more or fewer green garden waste containers. On occasions when the citizen requires more or fewer containers, a multi-page form will help them to complete their request. This should ask how many containers are required, and should redirect the citizen to a cancellation form if they want to reduce containers to zero. Here again, the citizen needs to be able to self-serve all of the relevant information, and a confirmation needs to be available once the request has been submitted.
It needs to handle return or replacement requests of green garden waste containers. In this instance, the citizen needs to be able to define within a multi-page form why they need to return or replace a container and what actions they require next, if any. A summary of the information should be provided, and a confirmation that the request was submitted should be shown afterwards.
And it needs to enable subscription renewals or cancellations. The citizen needs to be able renew or cancel their subscription to green garden waste collections. For renewals, the citizen should be able to refine their subscription if needed (for example, request more or fewer containers), while for cancellations, the citizen needs to be shown what cancelling the subscription means and needs to be able to provide information on how many containers are to be returned to the council.
Of course, there are lots of other, more client-specific things the front-end for Bromley Council’s green garden waste service will do in addition to the above, but these are the essentials.
The green garden waste service we’re designing for Bromley Council is part of a broader waste service SocietyWorks will very soon be launching for all UK councils, built with years and years of experience putting citizens at the front and centre of local authority services. Book a demo to see how it works.
_
Image: Alexas_Fotos on Pixabay
After several months of exploration, iteration and all-important consequence scanning, we are very pleased to have soft-launched Hackney Council’s new noise reporting workflow.
Built in collaboration with Hackney, this has been a really interesting project to work on; delving into what form noise reports should take, how to help citizens make a noise report that’s useful to councils even if the reporter is not exactly sure where the source of the noise is and how such reports can be made as securely and sensitively as possible.
The finished product is a secure, user-friendly and highly efficient private reporting form that Hackney’s teams and its residents will be able to make use of.
Recognising the timely need for a better frontend noise reporting system, Hackney saw the early value in making the process of submitting such a report a smoother one for residents and for council staff. That’s where we came in.
By identifying whether the noise is commercial or residential before sending it directly to the team that can deal with it, our new noise service will help to make handling noise reports much easier. Meanwhile, providing a form which enables citizens to submit a better standard of location information using UPRNs first and foremost or broader map locations if the exact source of the noise cannot be confirmed will help to deliver reports that are more accurate, actionable and faster to address.
Aside from being able to use a form that’s designed to help them provide the correct information to councils, another bonus for Hackney residents is that they will now be able to see all of their own reports, whether noise or otherwise, all in one place when they’re logged into Hackney’s version of FixMyStreet.
With the potential for noise reports to be of a more sensitive nature, it was important to us and to Hackney that we get this noise service right. That’s why as part of the service development we ran a series of consequence scanning workshops to identify and mitigate potential negative outcomes.
As a result, each noise report that’s made to Hackney will be private and will always be dealt with by a council staff member – no automated decision making involved. This helps to ensure that, whatever the report is about, it can be dealt with appropriately without anyone other than the reporter and the council needing to know about it.
Being a new service, we’re looking forward to seeing how Hackney gets on with using it now that it’s soft-launched and listening to residents’ noise reports.
If noise reporting is something you are also interested in, the service can either be plugged into an existing FixMyStreet Pro package, like we’ve done for Hackney, or it can be fully integrated into whichever backend management systems you are using.
Sound like something you need? Find out more and drop us a message, we’d love to hear from you.
Image: Brett Jordan on Unsplash
Schedule your one-to-one demo
Request a demo