SealifeR3 Website Redesign, Seattle WA

Creation of proposed redesign for SealifeR3’s website on SquareSpace.

Role: UX Design / Content Audit

The Team: 

  • Casey McLean / Co-Executive Director + Veterinary Nurse
  • Jess Chua / UX Designer


SealifeR3 is an organization in the Pacific Northwest dedicated to improving marine wildlife health and welfare. I connected with them through Taproot+ to work alongside their co-executive director to plan a site redesign.

Their objectives with a site redesign was to:

  • create better traffic flow, increase engagement, and increase online donations to save more marine animals
  • give more prominence to their project with building the first dedicated marine animal hospital in the Pacific Northwest
  • create a dedicated area to recognize generous contributions from community supporters
  • give the site a more professional touch and updated look
SealifeR3: Original Website

Exploring Design Solutions

The process began by studying competitors’ sites to make a list of features that would make sense in the redesign.

Next, we focused on the UX strategy.

Here are a few essential points that we discussed:

  • The marine animal hospital project should be given front page prominence.
  • The donation page should be improved with stats and “impact report” information, to establish trust with supporters and potential donors.
  • Image header on front page should be updated (ocean water animated gif was taking some time to load, and Casey wanted a image that would strongly connect the user to the organization’s mission).

I also created a photo-editing tips document to encourage Casey to use better methods when it came to editing and optimizing photos for the web.

Mood Board

A mood board was first created to give a visual frame of reference to the proposed redesign. The images showed human faces and SR3 “in action” at various events or field work to add a human touch.


Sitemap + Wireframe Sketches

The “Report An Injured Animal” text was taking up a lot of valuable space in the original navigation.

In the redesign sitemap, the page was shifted under “Get Involved” alongside other pages for community members to show their support.

Sitemap for Redesign

A wireframe was constructed to show a more modern and professional structure on the homepage.

Homepage Wireframe

The donation page was restructured to give more information on how financial contributions would help the non-profit.

Additional items like a breakdown of expenses and impact report were added to build trust in potential donors.

Donation Page
Donation Wireframe

A quality photo was selected for the main header image, one that would strongly connect the user to the organization’s mission.

SR3 Homepage Redesign: Low-Fi Mockup


Below are a few examples of the high-fidelity mockups I designed.

The wording under the “SealifeR3: What We Do” block was summarized for visitors to quickly understand the three different focus areas of SR3 (Response | Rehab | Research).

I incorporated Casey’s input to focus on users and context in terms of UX writing and keywords, such as “making a difference,” “unique” rehab center, etc.

The mockups will be referred to for changes to the live SquareSpace site.



Leave a Reply

Your email address will not be published. Required fields are marked *