SealifeR3 Website Redesign, Seattle WA
Creation of proposed redesign for SealifeR3’s website on SquareSpace.
Role: UX Design / Content Audit
- 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
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.
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.
A wireframe was constructed to show a more modern and professional structure on the homepage.
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.
A quality photo was selected for the main header image, one that would strongly connect the user to the organization’s mission.
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.