East London Waterworks Project - Website Redesign
Team Volunteering Project
Project Duration: January - Present
Role: UX/UI Designer, Research Support
Responsibilities: Research, Wireframing, Prototyping, UI Design
Project Overview:
The East London Waterworks Park (ELWP) is a bold and community-led project that aims to transform a disused Thames Water depot in East London into the UK’s first community-owned swimming ponds. The initiative promotes sustainability, wellbeing, and community regeneration by returning the land to nature and local people. It stands as a powerful example of ecological activism and grassroots collaboration.
Our volunteer UX team has come together to redesign the ELWP website with three main goals:
Improve the user experience and navigation.
Encourage volunteer sign-ups and strengthen engagement.
Create a digital space that builds a sense of community and inspires continued involvement.
My responsibilities
As a Volunteer UX Designer, I collaborated closely with a small team throughout the project, contributing across research, strategy, and design while leveraging industry tools like FigJam and Figma to streamline our process. My key responsibilities included:
Conducting a UX audit to identify usability issues and improvement opportunities.
Contributing to team workshops to align on ELWP’s mission and user needs.
Creating and iterating user personas based on real volunteer feedback.
Using FigJam for collaborative insight mapping, journey planning, and ideation.
Defining benchmarks to keep the project focused and goal-driven.
Incorporating stakeholder feedback to refine solutions and improve accuracy.
Ensuring adherence to the established style guide by communicating with fellow designers to maintain consistency with ELWP’s brand and community values in high-fidelity mockups.
Designing responsive wireframes, contributing to both desktop and mobile.
Adapting wireframes and leading UI transformation for mobile screens.
Maintaining regular communication with the team to ensure design cohesion.
Empathise
Understanding the Problem and the People
We kicked off the project with open team discussions, where we shared ideas and built a collective understanding of ELWP’s mission and long-term vision.
Together, we defined who our core users were—especially volunteers, local supporters, and first-time visitors—by drawing from real experiences and insights.
Mapped out the site’s intended role in building community and encouraging long-term engagement.
Current Website
Auditing the Exisitng Website
As a team, we conducted a detailed analysis of the existing ELWP website, examining its structure, usability, and accessibility.
This involved reviewing navigation flow, content clarity, visual hierarchy, and how well the site adhered to basic accessibility guidelines such as colour contrast, text readability, and alt-text implementation.
We used FigJam to collaboratively capture feedback from every team member, visually mapping out our observations. This process helped us identify overlapping pain points—such as confusing user journeys, inconsistent design elements, and inaccessible content—which became key priorities in our redesign strategy.
Other volunteers focused on analysing data from web analytics, which complemented our qualitative findings and provided valuable insights into how users were currently interacting with the website. By integrating these analytics with our observations in FigJam, we were able to collaborate effectively, merging our understanding of the website’s user goals, pain points, and overall experience.
This combined approach allowed us to refine our redesign strategy, ensuring it was both data-driven and empathetic to user needs.
Define
Clarifying Goals and Synthesising Insights
Although the overall goal was a redesign, we honed in on specific user flows to focus our efforts where it mattered most. We recognised early on that while the site needed a full visual and functional overhaul, it was essential that our design solutions were grounded in real user needs, motivations, and pain points.
Our Persona’s
By creating and refining 11 user personas, we ensured that these individuals remained at the core of our design decisions. These personas represented a diverse cross-section of ELWP’s users — from local volunteers to new visitors curious about the project. Keeping them in focus helped us align our design approach with the actual expectations and behaviours of our users.
Each persona was carefully chosen to reflect genuine members of the ELWP’s community, including:
Internal volunteers
Donors
Prospective joiners
Underserved communities
Government decision makers
Collaborators (Research)
Collaborators (Learning)
Collaborators (Co-Design)
Curious about our work
Curious about the parks status
Property developer
Each persona was shared in our communal Slack channel, allowing volunteers from across the organisation to provide feedback. Their insights guided further revisions, helping us ensure that each persona accurately reflected the needs, motivations, and behaviours of our target users.
Our Mission Statement Became Clear…
To redesign the ELWP website in a way that improves usability and accessibility, fosters a sense of community, encourages volunteer engagement and retention, and reflects the welcoming, eco-conscious ethos of the organisation. We aimed to create a seamless and engaging experience that supports the platform’s growth while remaining true to its grassroots spirit.
Benchmarks and Design Guidelines
Meetings with stakeholders and project leads helped us establish...
Clear benchmarks for success: accessibility improvements, streamlined navigation, and increased volunteer sign-ups
A style guide to inform future designs which reflected ELWP’s natural, earthy brand identity, using organic shapes, calm colours, and inclusive imagery
Ideate
Brainstorming and Wireframing
Using insights from personas, competitor analysis, and style guidelines, we collaboratively developed desktop-first wireframes.
I worked on transforming these into mobile wireframes to ensure full responsiveness and accessibility
I helped coordinate team workflow, preventing design overlap and maintaining a consistent approach
We refined key user flows, particularly focusing on event sign-ups and volunteer onboarding
Desktop Homepage
Mobile Homepage
Conversion process
We then shared these early wireframes with other ELWP volunteers to gain input on content placement, text choices, and visual hierarchy. This feedback shaped our design iterations moving forward.
Development of Hi-Fidelity Mockups and Design System
As we progressed, we began creating hi-fidelity mockups based on the established style guide and early wireframes.
A design system was collaboratively developed to maintain visual consistency across the site. This included typography, colour palettes, button styles, navigation components, and accessibility considerations
Different iterations of key elements (such as the nav bar, button styles, and image usage) were created to offer options to ELWP volunteers
These hi-fi mockups were shared with the broader organisation to guide decisions on final content, typography choices, and imagery direction
We maintained an open feedback loop to iterate quickly and collaboratively, ensuring that the final designs remained true to ELWP’s goals
1st
The initial mockups were based on ELWP’s existing style guide, using imagery inspired by volunteer illustrations, site projections, and past events to reflect the community's vision. After sharing the wireframes with volunteers, we received feedback on layout, wording, visual hierarchy, and accessibility. A follow-up meeting led to further suggestions, prompting a redesign that, while subtle, resulted in a sleeker and more refined aesthetic with a greater focus on accessibility needs.
Accessibility Test
Homescreen Iterations
2nd
3rd
Across three iterations of the homepage, the design evolved to become less visually cluttered and more user-friendly.
Early versions were visually dense and risked cognitive overload due to competing elements and a bold colour scheme.
In response to feedback, we refined the colourway to create a calmer, more accessible aesthetic and introduced clearer visual hierarchy. Additional UI elements such as section dividers were added—subtly shaped like the River Lea itself—to reflect ELWP’s identity while improving content structure and navigation.
Iterations of Key Elements
Development of Design System
Initial Mockups
Present Day - Timeline
As the project continues, our focus moving forwards includes…
Continuing to progress with Hi-fidelity mobile and desktop screens, refining designs based on ongoing team discussions and feedback
Mainintaining frequent feedback loops with project leads and chair members of ELWP to ensure the sites direction aligns with the organisational goals
Moving onto the development of Hi-fidelity desktop screens, ensuring conistency between each platform
Collaborating across the organisation to confirm and validate the sites content, style and navigational decisions
Cretaing interactive prototypes in Figma to conduct usability tests with real volunteers and community members to validate usability and functionality
Supporting developers as they begin development of initial screens and basic animations in order to start prototyping and testing phases of design process
Iterating designs based on user feedback to ensure functionality and usability
