Blog posts about Insights

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 and commercial waste management portal WasteWorks as an example. 

A waste service that works for everyone

WasteWorks is a front-end SaaS product which integrates with in-cab systems and payment providers 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:

• Green garden waste subscriptions – enabling residents to subscribe to and pay for green waste collections
• Bulky waste collection bookings – residents can book and pay for a one-off collection or subscribe to repeat collections if required
• Small item collections – take bookings for the collection of small items, such as batteries and textiles
• Assisted collection requests – let residents request help from your waste crew with their bin collection(s)
• New container payments – take payments for new containers when requested by residents
• Clinical waste collections – secure access to clinical waste services, such as booking a sharps box collection

The implementation of these features differs per council, adapting to their different rules, workflows, integrations 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. 

Commercial waste

With WasteWorks’ core functionality tried and tested for a few years, the natural next step for the service was to branch out to incorporate another key waste service area for local authorities: commercial waste.

Working in consultation with councils and integrated waste suppliers, we’ve been developing WasteWorks’ commercial waste functionality to offer businesses the same simple and intuitive user experience as residents when accessing waste services associated with a business address.

From enabling users to assign one or multiple premises and container requirements to their account to making information for all quotes, invoices and waste transfer notes visible and easy to access for users, WasteWorks’ commercial waste offering is a comprehensive and, as always, versatile solution for councils.

The future

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 or commercial waste services with scalable open source software, get in touch.

–

Image: Abel Matthew via Pexels

We are pleased to be launching our new environmental health reporting service: EnviroWorks. It is a private and secure environmental health reporting and case management system, designed for the unique needs of environmental health teams.

In a series of blogs, we’ll explore how we got to this point and look in detail at the service. Let’s get started.

Understanding the need

As with any good user-centred design process, let’s first take a look back at our core users and the needs that brought us to create EnviroWorks.

Environmental health teams at our local authorities play a critical role in improving public health and protecting the environment. They deal with air quality management, noise pollution, food safety inspections, and housing standard enforcement. These are key issues affecting our health: noise is one of the leading environmental risks for physical and mental health and well-being. Bad odours can cause nausea, headaches and irritability. Poor air quality is linked to cancer, stroke, asthma, and heart disease. 

And environmental risks don’t impact everyone equally: minority ethnic groups, low income households, and those with inadequate housing conditions are more likely to be exposed to environmental health issues, such as poor air quality or excessive noise.

Whilst playing such a vital role, environmental health teams in some local authorities are struggling with capacity. As of 1 October 2023, on average 13% of environmental health posts in local councils were vacant. But reports from citizens are not going anywhere. Over just a three month period, local councils in London and the South East received over 90,000 and 40,000 noise complaints respectively. And that’s just noise! 

It is within this context that we received requests from our local authority clients and their environmental health teams, who wanted support managing their case load and a more user-friendly frontend reporting system.

Starting with noise

In 2020, Hackney Council came to us wanting to make the process of submitting noise reports a smoother one for residents and for council staff.  We worked intensively with Hackney’s Environmental Health team on a Discovery and Alpha project to understand the challenges they were facing, and to launch a brand new minimum viable case management solution for them.

This solution helped the team gather and manage information; helped them make decisions with all the information they needed; exposed useful data patterns; facilitated  sharing of information with reporters and relevant internal teams; and allowed them to retain information for compliance purposes. We called it NoiseWorks.

Building on our existing services

NoiseWorks has now been running successfully for five years. During that time, we have been seeing a growing need among our local authority clients for a service that covers broader environmental health reporting. 

To address this need, we wanted to create something that (like all our services) is accessible and easy to use for citizens, whilst being flexible enough to accommodate the unique needs of each council. With a user-friendly interface, comprehensive case management system, and private and secure back-end, EnviroWorks helps the public sector better serve citizens. 

EnviroWorks is a step on from NoiseWorks, with additional reporting categories, the ability to provide supporting documentation (such as recordings), and some other additional features. 

In an upcoming blog, we’ll show the tool in more detail… watch this space!

In the meantime, if you are interested in EnviroWorks, drop us a message and we’ll get back to you.

_

Image: Joshua Brown on Pexels

At this time of year, councils and other public authorities with responsibility for maintaining local green spaces tend to see an increase in reports from members of the public about overgrown grass. 

In many, if not most cases, these reports draw attention to an area already included in a maintenance schedule. In other cases, it might be that reports about issues within a particular park or on a roadside verge are handled differently to others, whether that’s because of, for example, a “no mow” campaign or because the area is maintained by a third party. 

Therefore, one of the best things authorities can do to reduce unnecessary contact is to communicate upfront about scheduled works to reassure would-be report-makers that you’re already aware and remove the need to submit a report.

FixMyStreet Pro, our street, highway and environment fault reporting service, lets authorities do this in a few different ways. 

Displaying dates for scheduled works

Lincolnshire County Council makes use of an asset layer shared from its integrated system, Confirm, to highlight grass areas maintained by the Council and access the next scheduled maintenance date. 

When a map pin is placed within a highlighted area by a report-maker, and the ‘grass cutting’ category is selected, a message is displayed to the user to communicate the next scheduled date for grass cutting, and the form asks the user if this answers their query.

Displaying a message to users

Another option is to take a more general approach, like Northumberland County Council, which displays a message to users to explain that its grass cutting season has started later than usual, so users may not need to make their report.

The message appears when a user has selected the ‘grass cutting’ category and dropped a map pin within a highlighted area (facilitated through integration with the Causeway One asset management system). 

Similarly, Gloucester City Council shares a message with users to explain its approach to grass cutting, including some messaging that only appears in certain wards to indicate how grass cutting is handled differently within certain areas.

Meanwhile, Bromley Council uses FixMyStreet Pro’s messaging functionality to identify locations where grasses will not be cut as part of a campaign, and signposts to more information for users. 

During periods of high demand, you may also want to share category-specific messaging on the homepage of your FixMyStreet Pro site, to share information with all visitors to the site. 

Messages like this can be added and edited by council staff with the correct permissions from within the administration dashboard. 

___

While this blog post focuses on communicating about grass cutting schedules through FixMyStreet Pro, the same functionality can be used to communicate about schedules for other maintenance, such as for drains or bins. 

If you’re an authority already using FixMyStreet Pro and would like some help communicating about maintenance schedules through your service, please open a ticket. 

If you’re not yet using FixMyStreet Pro and you’d like to find out how it could work for you, get in touch. 

___

Image: Tom Van Dyck on Pexels

Local Government Reorganisation (LGR) represents a moment of real change for councils and, critically, the people they serve. In times of such transition, the way people interact with core services like residential and commercial waste, street and highway fault reporting, or environmental complaints can feel unfamiliar.

At SocietyWorks, we’ve been alongside councils through various structural transitions over the last 20+ years, and one thing remains clear: consistency and keeping access to essential services simple for users is key to supporting a positive transition.

Why front-end consistency matters

Understandably, most people don’t care about the internal mechanics of their local authority. They want to check when their bin is being collected or tell the council about a pothole — quickly, easily and without confusion.

But when councils reorganise, boundaries blur and suddenly there are new obstacles to achieving basic tasks. From not knowing which authority to contact to making sense of new processes, uncertainty like this risks a rise in calls to contact centres, the potential for issues to go unreported and frustrated members of the public. 

That’s why our experience shows keeping the front-end experience consistent is vital for service continuity.

What councils need to consider while navigating LGR

Keep user journeys consistent

Familiar interfaces build confidence and reduce service costs associated with confusion and repeated enquiries.

When Northamptonshire County Council reorganised into North Northamptonshire Council and West Northamptonshire Council, our FixMyStreet Pro solution helped ensure that residents could continue reporting street and environment issues without disruption — even as services and systems were rationalised around the new authorities.

Choose flexible and interoperable software

Use specialist platforms that can plug into different back-office or case management systems so that you can make whatever changes are required while you restructure without disrupting the citizen-facing side of the process.

This is something we helped the Royal Borough of Kingston Upon Thames and the London Borough of Sutton with while they navigated a full in-cab system switchover. Using their respective instances of our front-end WasteWorks portal, users could still check bin days, report issues and manage their waste needs just like before. This meant that while internal integrations and workflows evolved, the public interface stayed predictable.

Avoid creating silos and dependencies

Where reorganisation involves redistributing responsibilities to parish and town councils, it’s essential to keep data flows smooth to reinforce trust and prevent failure demand. 

Take the work we completed with Buckinghamshire Council following its transition to Unitary status which made it possible to automatically triage reports to the local-level councils and gave them the ability to respond to users to keep the feedback loop closed. This enabled residents to see continuity in service delivery even when governance changed.

The bottom line

LGR doesn’t (and shouldn’t!) have to mean disruption for members of the public, or for staff members using your front-end services on behalf of those who cannot use digital channels. 

With a considered approach and the right technological scaffolding, council services can maintain their familiarity to users while forging increased trust and engagement.

Our work with councils has shown that it’s often the smaller, simpler digital transitions that create the greatest transformation in public service delivery.

_

Want some help navigating LGR through citizen-centred technology? Get in touch. 

_

Image: Laura Materna on Unsplash

Among FixMyStreet Pro’s key benefits is its ability to allow councils and other public authorities to incorporate into each installation fault reporting for multiple service areas, flexing around individual needs and creating a consistent reporting experience for users. 

An example of this is the way in which some councils using FixMyStreet Pro have chosen to enable reporting of housing-related issues via their instances of the service to help reduce misreporting and failure demand.

Meanwhile, housing associations themselves can also use the technology as their own, running a reporting service that works in synchronisation with neighbouring councils, triaging reports between them.

As is often the case with FixMyStreet Pro, this functionality can work in different ways, depending on an authority’s individual processes and relationships with housing associations and contractors.

Internal triaging 

Where housing estates are managed by a particular team within the council that is different from the team which set up its FixMyStreet Pro service, reports can be triaged to that team using an asset layer, if the data is available.

Take Brent Council’s FixMyStreet Pro as an example, which enables users to select ‘Council Estate Grounds’ as a category, and then displays on the map an asset layer to make clear where such issues can be reported. 

Should a user make a report within this category, with the map pin placed over the layer, the report will go to Brent’s dedicated estates team directly. As well as helping the council triage reports, this also helps to educate report-makers on who’s responsible for what.

It is also possible to do this without displaying the asset layer, if you would prefer. In these cases, upon selecting a particular report category and dropping the map pin in a certain place, the report will be triaged accordingly, but without the user knowing this is what is happening.  

Signposting

Where it is not possible to directly triage a report to another system or team, FixMyStreet Pro makes it easy to signpost users to the correct place to make their report. 

In such instances, councils can display a message to the user explaining why their report can’t be made via FixMyStreet Pro and where to make it instead. 

Messages can be displayed at various points within the reporting workflow, based on either an asset layer (if available), the location of the map pin or the category or subcategory selected. 

Housing associations using FixMyStreet Pro

As well as enabling councils to incorporate housing-related reports into their services, FixMyStreet Pro can also be used by said housing associations directly, acting as their own reporting service.

The Peabody Housing Association uses FixMyStreet Pro to manage fault reports within Thamesmead, making it easy for local people to report environmental issues such as fly-tipping, pest control, public lighting and problems in or around the canals and lakes — all managed by Peabody.

FixMyStreet Pro’s ability to triage reports nationally means housing associations benefit from being able to manage reports for issues that are their responsibility, while all other reports are automatically triaged to the correct authority. 

With Peabody and its two closest borough councils, Bexley and Greenwich, as well as Transport for London, all using FixMyStreet Pro, the four bodies can work in synchronisation, making it easy for residents to successfully report problems and care for their local community.

For example, in the areas of Thamesmead which sit within the boundary of Greenwich, housing-related issues which are the responsibility of Peabody Housing Association are automatically triaged from the Royal Borough of Greenwich’s FixMyStreet Pro service. The report will not enter Greenwich’s workflow, instead going directly to the correct team at Peabody for response, with no interruption to the workflow for the report-maker.

Categories for caretakers

Additionally, in using the technology for themselves, housing associations can allow their caretakers to use the service to report issues via the same, simple user interface, just like Peabody have done. 

“Caretakers can now make and monitor their reports at the touch of a button, taking ownership of when reports can be closed, or when others need to be chased”

Tom Broad, Head of Environmental Services at Peabody, explains more:

“Just as we had done for residents, we wanted to make it easier for our team of 80+ caretakers that look after the 5,000+ homes in Thamesmead to be able to report the defects they find without having to go via the call centre.

“Working with the team at SocietyWorks, we explored how we could use FixMyStreet Pro to give caretakers a quick and simple way to make reports online, and to stay updated on their progress. The result was to incorporate into the existing service some new, private categories and block asset layers, only visible to caretaker staff when logged in to our FixMyStreet Pro service. Like residents, caretakers can upload photos of the issue and provide as much detail as possible within their reports.

“It’s been a real success; caretakers can now make and monitor their reports at the touch of a button, taking ownership of when reports can be closed, or when others need to be chased. With all reports visible on the map, this new functionality has helped us to plug knowledge gaps whenever a member of staff is off sick or on annual leave, making sure reports are not duplicated and updates accessible to everyone.”

___

For more information about FixMyStreet Pro, please send a message to our team.

This blog post was written for techUK’s Social Value Week campaign in April 2025. 

___

The Public Services (Social Value) Act 2012 initiated valuable shifts towards integrative procurement processes within Local Government. It encouraged purchasing decisions to be taken from a strategic perspective to deliver as much real value as possible to communities.

When approached purposefully and with the genuine alignment of values, partnerships between the public and private sectors can deliver value well beyond the specific product or service being contracted. Over time, such partnerships can increasingly generate impact across economic, social and environmental priorities.

However, generally speaking, there is still work to do to improve the implementation of social value procurement practices within Local Government to facilitate fairness, extend impact and ensure rigid, quantitative procurement processes do not lock local authorities out of the most socially responsible and valuable opportunities.

Social value as standard, not as an afterthought

As an SME belonging to the long-running civic technology charity mySociety, whose mission is to deliver technology for the public good, we hold a unique position in our understanding and delivery of social value.

From the charity’s perspective, we deliver technology (TheyWorkForYou; WhatDoTheyKnow; Council Climate Action Scorecards; Local Intelligence Hub, FixMyStreet etc.) to empower more people so that collaboratively we can build a fairer, safer future.

Meanwhile, from the commercial perspective, SocietyWorks builds on over 20 years of experience to deliver fairly-priced SaaS products (FixMyStreet Pro, WasteWorks, ApplyWorks, etc.) designed to help build trust between local authorities and residents, a crucial component of civic engagement and flourishing communities. Any profits made are reinvested into the charity to support the ongoing delivery of our charitable services.

In essence, social value is embedded in all that we do, and local authorities and other public sector organisations that choose to work with us unlock unique opportunities to play their part in supporting wider civic improvements across the UK, and even internationally.

On paper, we are exactly the kind of supplier any forward-thinking, technology-driven and socially conscious authority would want to partner with.

The impact of social value and the value of social impact

Despite delivering social value for longer than the Act itself has been in effect, and despite offering support for local economies through initiatives that harness the vast array of skills and specialised knowledge within our organisation, we often find that our internal definition of social value does not match up with that of local authority procurement teams.

Procurement frameworks often prioritise tangible, place-specific outcomes measured strictly in monetary terms, rather than considering broader societal impacts.

While local authorities appreciate working with us due to our values-based approach and our mission-driven ethos, rigid definitions within procurement processes occasionally categorise our charitable initiatives as ‘social impact’, limiting their recognition in formal evaluation criteria.

Another challenge we face as a fully-remote SME belonging to a not-for-profit group, is that we encounter procurement assessments primarily designed for significantly larger, locally-embedded suppliers, where the total absolute value quantified in sterling is the only lens through which social value is scored.

Set up in this way, procurement frameworks only measure social value in monetary terms, excluding the rich qualitative data that would illuminate true social value.

Getting better value for local authorities

By integrating qualitative assessments into procurement evaluations, local authorities could better recognise and reward innovative solutions that deliver significant societal benefits extending beyond immediate geographical boundaries.

Recognising the qualitative impact delivered by social enterprises like ours would ensure greater sustainability and effectiveness of community outcomes.

Ultimately, enhancing procurement frameworks to acknowledge the interconnected nature of social value can lead to stronger partnerships between local authorities and mission-led suppliers, maximising long-term societal benefits.

___

Connect with Angela on LinkedIn or drop us a message to talk more about the social value we deliver.

We live in an era in which many of us reach for our smartphones first to find the answer to a question like “when is my bin being collected?” or “how do I report a pothole?”. 

Local governments and other public sector organisations face the challenge of ensuring they keep up with expectations to provide easy and intuitive digital access to their services, and to do so in an accessible and cost-effective way. 

Dedicated, standalone apps (ie. those that run from their own codebase) are often chosen as the perfect solution, because everyone likes an app, right?

Well, actually no. According to research we carried out with YouGov in 2022, only 22% of citizens want to use an app they have to download to contact their local authority.

In our two decades of experience providing high-traffic digital services for members of the public, we believe that Progressive Web Apps (PWAs) present a more efficient and inclusive alternative.

What are PWAs?

PWAs are websites that have been designed with ‘app like’ qualities. 

They look and act like an app and they can be downloaded to a mobile’s home screen like an app, but they run from the same codebase as your website, removing barriers to access and enabling you to provide exactly the same experience to users across your online environment at no extra cost.

Why are PWAs a good choice for the public sector?

Accessibility for all

PWAs work on any device with a web browser, eliminating the need for users to download and install an app in order to access a service. This is particularly important in the public sector, where digital services must be accessible to everyone, regardless of their device type or storage limitations.

Cost-effective development and maintenance

Building and maintaining separate iOS and Android apps is expensive and resource-intensive. PWAs streamline development by using a single codebase that works across platforms, reducing costs and simplifying updates.

No app store barriers

Because PWAs run from the same codebase as your web service and can be saved to home screens directly instead of downloaded via an app store, you can ensure faster deployment and updates whenever you need to make a change. 

Increased visibility

Another benefit of using PWAs is that your service will appear in search engine results, making it easier for members of the public to find what they need when starting from an online search. 

Offline functionality and performance

PWAs permit offline capability to your website, by downloading a bit of JavaScript (called a service worker) to your device. This means people can, for example, start reports on-the-go without internet connection, and finish them later when back online. This is particularly beneficial for remote communities or frontline contractors who need to access services even in low-connectivity environments.

Security and compliance

Where a digital public service handles potentially sensitive data, PWAs leverage HTTPS protocols for secure communications, reducing risks associated with app store vulnerabilities while maintaining compliance with security standards.

The future of public sector digital services

By adopting PWAs, local governments and other public sector organisations can provide fast, reliable and cost-effective digital services to a broader audience. 

As governments strive for digital inclusivity and efficiency, PWAs offer a forward-thinking solution that prioritises accessibility, security and seamless user experiences.

For local governments and the wider public sector, embracing PWAs is a strategic move towards a more accessible and efficient public service landscape.

—

All of SocietyWorks’ solutions are designed as PWAs . Get in touch to find out more. 

Our front-end designer Lucas Cumsille Montesinos highlights some of the work he’s been doing recently to make FixMyStreet and all integrated co-branded versions of the service running on FixMyStreet Pro more accessible.

___

Over the past year we have been collaborating with users of FixMyStreet and FixMyStreet Pro to enhance the solution’s accessibility, making improvements to the user experience for people using assistive devices. 

One of our clients, Transport for London (TfL), shared an accessibility audit of their installation of FixMyStreet Pro with us. The document listed issues detailing information regarding the Web Content Accessibility Guidelines (WCAG) and some improvements that could be applied.

Here are some of the points they shared with us:

• Description of the issue.
• Level success criteria using the WCAG standard: Level A (lowest), AA, and AAA (highest).
• A link to the page and location of the component where the issue can be found, along with instructions for replicating the problem if necessary.
• Status of the issue: Pass, Pass with comments, N/A, Fail.
• They also provided recommendations made by the auditor.

What improvements did we make?

The report from TfL allowed us to work on different areas of improvement, for example:

• Meaningful Sequence: We focused on making the order in which assistive devices present the information match the order in which the page is visually presented.
• Non-text Content: We hid purely decorative elements from screen readers, reducing unnecessary clutter for users when navigating the site.
• Info and Relationships: We improved and updated the role and attributes of some HTML elements so assistive devices can better understand the context and how to use those elements.
• Focus Order: When someone is tabbing through a website (using their keyboard instead of a mouse), everything should flow naturally and make sense. It’s making sure that when you hop from one thing to the next, the order matches how you’d understand the content – no jumping around to random spots that leave you scratching your head.

What did we learn?

• Include the WCAG conformance level (from A to AAA), where level A is the minimum. Ideally, you would like the website you are working on to comply with all Level AA success criteria. Using the conformance level makes it easier for you to prioritise which issues should be tackled first and which ones can be done later.
• Some issues won’t require a lot of time to fix. This can be your second factor when it comes to prioritising which improvements to make first. For example, easy fixes like adding aria-labels or increasing the contrast between the text and the background colour can be done in little time and greatly improves the user experience of your website.
• If you find an accessibility issue, always try to provide as much detail as possible, especially if someone else will be doing the work to fix it. The TfL document made solving the issues much faster and minimised any back-and-forth. Even sharing which browser you were using when experiencing the error can make a difference.
• One of the most interesting experiences was solving issues that didn’t seem like an issue (at the time), but once you deprive yourself of literally looking at the screen and using an assistive device, then the problem starts making sense. For example, the action of a button can make sense when you are looking at the screen and the elements that are surrounding it, but if you can’t see the context, the elements around the button, then the button might not make much sense. Adding further instructions like an aria-label that provide the context that the eyes are missing can help users understand where they are and what they can do much better.
• Finally, it is a great exercise to be more conscious when designing a website. Yes, a certain text, link, or button colour can look great, but can it be read easily? What about colourblind users? You can install plugins in your browser to help you see the page the way they would see it.

Our accessibility improvements were rolled out to the national FixMyStreet site and all co-branded FixMyStreet Pro sites. However it is worth noting that FixMyStreet Pro is designed to accommodate the branding and styling of each authority that uses it, which can mean that some of our accessible default settings are overridden. This is why we always recommend that authorities carry out an accessibility audit on their own services.

___

Thanks for sharing, Lucas!

Read more about how we design accessible digital services, or browse more posts from the SocietyWorks team.

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/ :-)

More technical details

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>

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.

–

What makes us and our products citizen-centred?

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.

Citizen-centred service design in practice

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.

What does the future hold?

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