Surfrider Vancouver – UX/UI Case Study

The Surfrider Foundation is a community of everyday people who passionately protect our playground – the ocean, waves, and beaches – that provide us so much enjoyment. Their model is to engage environmental experts to create solutions, unite local and national resources to protect the coast, and leverage our local chapter networks knowledge with a national perspective. There are multiple chapters around the world, and a few in BC. Upon research, I noticed that each chapter has a variation on their website.

Upon researching their different chapters, I noticed the Vancouver Site Chapter had some room for improvement. While I was navigating the site, I noticed that they were missing a call to action and clear information about what they do for our oceans. 

Going through all the pages I could gain an understanding of what the Vancouver chapter specifically does and get a sense of how a user would feel navigating the page.

Room for Improvement

• Global navigation to include a search and button to donate. 
• Social media links at the bottom, user may assume this is the bottom of the page, but in this case there is much more information.
• Use hero images, save room and allows user to visualize the action
• Add hamburger icon to mobile 
• Contact page, no contrast – hard to see
• Images: not optimized for web. Slow loading time
• When your mouse hovers over Donate, the text turns to white, hard to see.
• Donate page, unclear where the money goes, needs to update the content. Instead of icons, have people in photos.

Pain Points

Pain Point #1 Home Page

The content and layout of the homepage is confusing. In the middle section of the page, there are social links to follow which normally come at the end of a page. The user may think this is the end of the content because they see the “Follow” icons. It breaks up the flow which may lead to a high bounce rate. 

Pain Point #2 Navigation 

The Navigation is missing a clear call to action button as this site is a non-profit one. They are missing an about section, which is critical for the user to learn more about what they do. When you hover over the “donate” page in the navigation, the text goes white, which could be confusing to the user. 

Pain Point #2 Donate Page

Content is unclear to the user about what the donations do. There are generic icons, for things that that have been done. Would be nice to have images of the beach clean ups to make it visible that the donations have an impact. 

User Archetypes

• environmentalists
• students
• activists
• educators
• teachers
• ocean conservationists

03. Ideate