Created in Cornwall back in 1990, Surfers Against Sewage (SAS) is one of the UK’s foremost marine conservation and campaigning charities. As self-titled ‘Ocean Activists’ their mission is clear and has remained resolute for the past 30 years:
With raw sewage being consistently dumped into the UK’s rivers and coastal areas, the water quality of the UK’s coastlines is of national concern.
For surfers, swimmers and countless others to avoid health risks and hazards, SAS created the Safer Seas & Rivers Service (SSRS): an iOS and Android app-based system for real-time tracking of sewage discharge and pollution risks around the UK’s extensive coastline and inland waterways.
The app has gained hundreds of thousands of active users, and is repeatedly featured on national and regional news. As well as keeping water users safe, its mission is to raise awareness to local government and water companies, acting as a campaign and action tool for its users and supporters.
The consistent growth and success of the app led to bugs and issues that needed resolving, alongside desired new functionality and refinements to existing features.
Ever since SAS got in touch with ASquared,it’s been a match made in heaven (or the ocean). As an impact and purpose-driven company, the goals and mission of Surfers Against Sewage aligned perfectly with those of ASquared.
With the initial goal of stabilising the app against crashes and bugs, there was always an appetite to improve the user experience and hear directly from SAS supporters.
Across a fast-paced project we worked closely with a dedicated SAS team. We started by creating a shared understanding around metrics and KPIs before diving into user interviews. We then moved into production and delivery of an improved app – complete with new features and refinements – while streamlining the design language, experience and workflow.
Backed by a strong digital product mindset, ASquared helped the SAS team better understand its diverse user base by undertaking moderated user interviews. The outcomes of these interviews helped focus prioritisation and work across the project.
Pssst... What’s Moderated and Unmoderated testing?
Both methods are used to better understand existing solutions, whether an app, website or prototype. Unmoderated testing is often cheaper, with a solution put to a panel of participants, following a set of instructions. Moderated testing is more costly but provides better results. A researcher asks questions in real-time and can pick up on subtleties and nuances lost in an unmoderated panel.
It was crucial the insights gathered during the interviews were effectively communicated back to SAS stakeholders to communicate pain points, needs and desires of the current app’s users.
By making sure that stakeholder and user needs were socialised, played back and understood by everyone on the collective team, ASquared were able to better frame the discussion of every user journey with more confidence.
Based on the outcomes of the user research we created two personas: the Bather and the Campaigner. Personas are a great way of building empathy and understanding with archetypal users of a product or service.
With the research insights communicated and a deeper understanding of the user base, we worked with the SAS team to determine which user journeys to optimise first.
For Bathers we provided clarity around the types of pollution alerts, which organisation had issued them and when, all through clearer UX and UI.
For Campaigners we focussed on easier sharing to users without the app, which helped spread awareness and drive support for Surfers Against Sewage and their cause.
We also improved the signposting within the app, making it easier for socially active users to report health issues and evidence to water company CEOs and local MPs.
"Working with ASquared has been fantastic.
The team is incredibly friendly and the communication with the project team has enabled work to run smoothly and productively.
They have an infectious passion for their projects and the standard of work produced never disappoints. We feel lucky to have forged such a great working relationship with ASquared and are excited for the future of our partnership."
Prototyping made it possible for the SAS team to visualise the user journeys and provide their feedback via Loom: an asynchronous video tool we use extensively at ASquared. Each prototype was made using high-fidelity screen designs.
Once agreed with the SAS team, the components, patterns and pages continued to be worked on as a blended design & development team to bring the revamped experience to life. Moreover, the continuing creation of a basic design system allows for faster and more efficient changes in the future.
Design is never complete without its counterpart, development.
Having been involved in the project from the start, ASquared’s React Native developers knew the priorities of the project and how they aligned to the user and stakeholder needs. They were able to identify challenges in the incumbent app and make solutions ready for implementation before the design phase was completed.
This included streamlining the API (Application Programming Interface) to make it more performant, and implementing Firebase: an app development platform that makes it easier to administer push notifications and measure app activity and usage.
Throughout the implementation phase we used our expertise to enhance existing features and solve future problems. We used React Query to load map data, resulting in data being cached for 5 minutes. This saved the app from constantly calling the API for large data sets, making the map experience feel faster with less latency.
Similarly, we worked with SAS on their API’s consistency of location-specific data. This enabled us to display the latest CSO ‘pipe-line’ report, display which environment agency issued an alert, and display which water company is responsible for a sewage discharge. In addition, the location details screen now has dynamic text that the SAS team can edit to show custom alerts, and the page is more shareable.
The original SAS brief required a straightforward, like-for-like migration of an existing app onto a new React Native platform, quashing known bugs and adding stability in the process.
With these outcomes achieved, we went above and beyond for what was a great project.
With SAS we demonstrated how an agency product team can support great, impactful clients by helping them achieve their business outcomes. We championed user centricity by building empathy with SAS users, and improved the app’s user experience through great product design and app development.
Finally, we systematised all components and patterns used in the app to allow for more efficient and streamlined workflows in the future. Design systems act as a set list of ingredients from which future features can be built, and act as a ‘single source of truth’ for key aspects in an experience, from colour, typography and spacing to form fields and full screens.
We look forward to working with Surfers Against Sewage on more projects in the future.
