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

Overview

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
sealife_original_desktop
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.

sealifer3_moodboard

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.

sealife_sitemap_draft
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.

sealifer3_mockup2_close
SR3 Homepage Redesign: Low-Fi Mockup

Refining

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.

sealifer_proto

sealife_homepage_mockupf

Leave a Reply

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