Sea Smart School

Resolving a Navigational Flaw for Prospective Donors



About Sea Smart

Sea Smart is a charity in Vancouver, Canada that primarily educates children on ocean related topics and also offers a range of programs for adults and companies.

My Role UX Research & Concept

Length August 2021 ~ 3 weeks

Sector #Non-Profit #Nature Conservation #Education

Team UX Research & Design: Valleria & Helmar, Project Management: Paloma

Tools Miro, Figma & Zoom#



Project Context

Subsequently to the rapid redesign of Sea Smart's website me and another volunteer planned and conducted an usability test with testers representative to Sea Smart's user segments.

Evidence from usability testing showed the current information architecture is confusing. However, for a re-iteration additional convincing was needed.



The implemented Design

Interested prospective partners get to an internal landing page through relevant entry points across the website and aquisition emails from Sea Smart.





After the fold we provide links to programs and donors as well as a report for the charity's impact & financials, which proofed to be of interest to potential donors.





Getting in touch with the charity should have as low friction as possible so we proposed to provide phone & email according to prospective partners preference.





The Challenge

After moderated testing the first obstacle was to create buy-in for the project and convince the charity's founder of the severity of the navigational issue we uncovered.

To communicate the business impact of the navigational flaw I created storyboards featuring quotes from our usability testing sessions.

Upon presenting it to the management I achieved buy-in for the following iteration.



Storyboards of Happy Path vs Exploration

In the following 3 weeks we needed to

  • Find a solution for multiple "Corporate Partnerships" pages
  • Fix entry points and implement a memorable navigation



Creating Alignment

Before anything else we needed to align within our 2 headed design team and our manager.

A holistic map created in collaboration with the manager helped to bring clarity into how the Sea Smart School communicates with Community Managers of prospective donors.



For additional alignment we assessed the Information Architecture and held a session of Problem Framing.



Phrasing Problem & Opportunity

Problem- & Opportunity statement lead to our Hypothesis to fix the naviational issue by designing an “internal landing page” and rehaul entry points.

How might we.. improve findability & navigation, so that our prospective partners have a seamless experience while exploring and navigating back & forth on the website?



Desk Research & Competitive Analysis

To understand our user segment of prospective donors we did desk research about corporate sponsors and created an agnostic Proto Persona combined with findings from Usability Testing.





Competitive Research lead us to understand recognizable signifiers to recommend entry points and cater to Jakob's Law.





Synthesizing Insights for Informed Resolution

Here I present the traceability of our insights leading to features in the delivered mockup.





Ideating on the Landing Page & Problem Resolution

Based on the current Design System and hierachy of the the charity's website layout we created wireframes of the internal sub-landing page. We presented multiple versions for review and gather feedback from the manager.

Here is a collection of points to rationalize the design concept we moved on with.



Starting on Miro and from there moving to Figma we reviewed & discussed different iterations with the project manager and implementation team in collaborative meetings.



After the Implementation on Square Space

The UX Researcher as well as the Project Manager who worked with me discontinued their work with Sea Smart School as other opportunities arose for them.

As much as I loved to test the implementation, I decided to also stop my volunteering commitment as working across so many time-zones was already taking a toll on me and I needed to focus on finding a paid employment above all.

Soon after I started volunteering for a local Meetup Berlin Product Designers, that I am still commited to as of today, and also found my first role as a Junior UX Consultant.

Key Learnings & Takeaways

Above all this was the first project that I took a lead on and it truly was a challenge, I wasn’t prepared for but when are we really? Every Product Design challenge is different in some regard and we need to make use of our experience with the tools we learned with confidence. I couldn't have lead the process of this project without the mentorship in my past training - neverthless I wished for more guidance.



Always back up your Design Decisions

In the beginning of the project an early usability testing would have uncovered flaws of the website and help us to make evidence-based design decisions. However, this gave me the opportunity to learn and back up design decision with research in the subsequent project.



Effective Communication & Collaboration

Both are vital for the success of any project and there need to be extra efforts made when working with remote teams and multiple stakeholders. There are plenty of Workshop formats that can be utilized catering to this need. Involving stakeholders actively only comes with benefits.



The value I add as a Junior

  • During the redesign my peers commented they liked that I kept an eye on keeping things consistent (there was a conflict in the Design System & Style Guide).
  • In the Research phase a prospective donor with an UX background complemented me on the way I facilitated the usability test. During the Storyboards turn out to be a very effective method for communicating how UX flaws affect business outcomes.
  • The subsequent iteration I lead the process on teached me a lot about how we can utilize methods and adapt to the project phase we are in.