SurfRider Redesign

OUTLINE

The focus of this project was to evaluate the usability of an existing NGO’s online presence, and propose a design solution that would inspire people to take action in order to drive positive change.

The Surfrider Foundation is a non-profit coastal protection organisation that protects oceans, waves and beaches through an activist network.

mockup of the redesign website as viewed on a laptop

THE PROBLEM

Some initial research gave context to one of the issues being tackled by the Surfrider Foundation. Marine waste is a sizeable environmental concern, and in B.C. about 97% of this waste comes from land-based refuse.

Surfrider had a sizeable volunteer community across North America, but since the pandemic impact of 2020, they have struggled to regain traction.

SECONDARY RESEARCH

In order to further understand the problem, we reached out to Surfrider for some insight on any issues they were facing. We also conducted interviews with people who had experience volunteering in order to establish some common motivations, behaviours and pain points.

Aside from the generalised impact of the pandemic in 2020, Surfrider felt that their volunteer numbers also suffered from accessibility issues to the beach clean-up events. Many of the Vancouver Island clean-up locations are a substantial driving distance for most participants, which makes participation more difficult.

Interviewees generally stated that they enjoyed the community building and social aspect of volunteering, and felt more engaged when they had a sense of their actions having perceivable impact.
Deterrents to volunteer participation included disorganised events, and a lack of information on details of particular volunteer programs or what their responsibilities/tasks would be.

PERSONA & HMW

With as much research completed as timeframe and resources allowed, we moved on to creating a simple persona and How Might We question to create a focus and context for our redesign.

We decided to focus on clear communication of the details, impact and expectations of a beach clean-up, with additional consideration for any opportunities to promote and increase the social aspect of such events.

CURRENT SITE ANALYSIS

A key component of the redesign process was evaluating the current Surfrider website within the context of our HMW and project focus. In summary, we found that information regarding volunteer opportunities was poorly structured throughout the site. Information regarding the Beach Clean Up events was not easy to find, and important details were either poorly placed or absent completely. From the perspective of our persona attempting to find ways to get involved with a cause they felt passionately about, it seemed likely that they would leave the site with incomplete information, a less than satisfactory experience, and no meaningful commitment being made.

Screenshot of the original surfrider website

View the existing site

REDESIGN - PLANNING & ITERATION

In our redesign of the presentation of Beach Clean Up information on the Surfrider website, we decided to prioritise a few factors;

Adding clear CTAs
Creating a stronger sense of informational and visual hierarchy
Adding images & icons - more photo representation of actual organisation activities & impact
Focus on letting volunteers know what to expect
Focus on building a sense of community

We also wanted to make sure that any design changes would fit within the existing visual and brand identity of the organisation. This was not a complete re-brand, but instead an attempt to increase the impact and effectiveness of the website for our persona and target demographic.

After sketching out some ideas, an initial prototype was created in Figma. We proceeded to test this solution with 3 rounds of user testing, which enabled us to map out potential usability improvements within a design prioritisation matrix. We worked quickly and efficiently to implement as many of these changes as possible given the short timeframe of the design sprint.

REVISED PROTOTYPE

The revised prototype presents a significantly improved experience for users attempting to get involved with the Surfrider beach clean up programs, in a design style that can easily be expanded across the rest of the website.

On the home page, we created a clear call to action button to 'Get Involved', which is prominently featured within a header section that uses a photo instantly recognisable as a Vancouver Island coastline. This image helps to create a strong link between the mission statement of the Surfrider brand and its real world impact.

The volunteer page displays clear definition between the different volunteer programs and opportunities that are available. Strong imagery is used again here to provide real world representation of each program and set up some initial expectations of what is involved.

The following page in our user's task flow provides some further general information about beach clean up events. There is a clear primary CTA presented to view upcoming events, and the page displays much more information compared to the original site. General advice on the beach clean up format and what to bring is provided, as well as some statistics on the tangible impact that the program has on the environment. A photo gallery has also been included on this page which promotes to the community-building nature of the activity.

The list of upcoming beach clean ups includes an interactive map to create easily readable location data, and each event card includes the basic event details. Chip tags highlight accessibility information for each location such as distance to be walked and vehicle access.

On the event sign up page, additional details for an individual beach cleanup are displayed, further communicating what to expect. A map shows location information with an approximated walking route. Options have also been included here to share the event via social media, subscribe to an email newsletter, and either offer or request a carpooling seat. Alongside the act of signing up to the event, which in itself creates a sense of commitment and allows for reminders to be set, these extra features create opportunities to build upon a sense of community and social connection - aspects of volunteering that we discovered to be important to individuals through our research. It also addresses the issues that Surfrider felt were a contributing factor to their reduced participation numbers.

mockup of the redesigned website on a laptop

As a whole, the redesign has increased the simplicity of the task flow to find out about and sign up for volunteer events, as well as providing more information to users about what they're getting involved with. Additional prompts and opportunities to share the events with a wider community add to the overall reach of the campaign. If implemented, we felt confident that these changes would help to inspire an increased number of volunteers while building on the community aspect of the experience.

View Prototype