A Redesign of the Sea Turtle Conservancy Site
UX Designer | Aug - Dec 2019
How can modernization help a charitable brand build appeal?

Skills: UX Research, UX Design, Illustration, Web Development

Overview
Project Brief
Work with a team of UX designers, web developers, content developers, and social media managers in order to help redesign the charitable website the Sea Turtle Conservancy.
The Problem
Variable West sought a redesign in order to create a signature brand aesthetic to set them apart from other companies in the event space. In addition, Variable West needed to understand what their users looked for and the features that would best serve them.
The Goal
Use a site redesign as an opportunity to reaffirm those already loyal to the Sea Turtle Conservancy (STC). In addition, boost the site's SEO in order to attract new visitors and donors.
Responsibilities
Create personas, conduct user and competitor research, implement user testing, and create high fidelity prototypes and a fully functional redesigned site.
Tools:
Sketch, Adobe XD, Adobe Illustrator, HTML, CSS, JavaScript
Role:
Serve as the team's UX Designer, Illustrator, and Front End Developer
-
Market analysis of STC's most prominent competitors
-
Analysis of site's SEO, design, social media, information architecture, functionality, and accessibility
-
Creation of site assets, icons, and redesigned logo
-
Development of low, mid, and high fidelity wireframes
-
Implementation of site's front end HTML and CSS
The Process
Over the course of this project, user and competitor research was conducted to define personas, information architecture was defined, and low, mid, and high fidelity prototypes were created.
Discover
Identify user needs and motivations to define effective solutions.
Ideate
Propose solutions and test with users to refine designs
Design
Create a style guide to create visual aesthetic and impact
Test
Test to ensure the discovery and design process is effective
Discovery Phase
Client Research
History
STC is the world's oldest and most accomplished organization for sea turtle conservation with ongoing programs in Florida, Costa Rica, and Panama.
Funding
Programs include research, advocacy, habitat preservation, education & outreach. As of 2015, STC had 4680 members and in 2017 they received $2.8 million in donations.
User Research
User research was conducted before any designs were implemented in order to gain a better understanding of the types of individuals we would be designing for. Users were assessed for their intentions in visiting the site and what they looked for once there.
Personas
A primary and secondary user were identified in order to help guide our design process. The first of these personas represents a turtle enthusiast and the second represents a casual philanthropist.

Brian Gomez
“Guiding turtle walks is one of my favorite things to do. I love watching people light up when they spot a nest or when we get lucky enough to see turtles hatch.”
My Story:
I’ve been involved with STC for the past 8 years. In that time During that time I've been leading turtle walks down in Costa Rica and encourage friends and family to donate when they can.
My Goals:
Learn about turtle walks
Stay up to date on STC news
Follow the turtle tracker
Access the monthly newsletter

Shannon James
“I love doing what I can to help my community. I've recently committed to only giving loved ones gifts that support a charitable cause.”
My Story:
I’ve always been an animal lover and have made it one of my goals to start living more sustainably and supporting causes I care about. I grew up near the water in Florida and remember spending summers watching sea turtles hatch. Because of this, I want the Sea Turtle Conservancy to be one of the causes I support.
My Goals:
Explore the STC shop
Become a monthly donor
Information Architecture
The information architecture was assessed in order to reduce information overload and keep the visiting experience simple and user friendly.
The menu was reduced from 6 primary tabs and 11 sub-tabs to what you see below. In order to accomplish this, content was reduced and a single page layout was adopted to reduce the number of separate pages on the site.
Primary Navigation
Home
Join the Mission
How We've Helped
What We're Doing
Sea Turtles
Species
Turtle of the Day
Turtle Tracking
Get Involved
Turtle Experiences
Adopt a Turlte
About
History
Archie Carr Tribute
Adopt a Turtle
Renew Membership
Shop
Donate
Donor Information
Categories
Our Story
Competitor Research
Three major competitors were identified:
-
Oceanic Society: hosts several projects relating to marine life, including sea turtles
-
World Wildlife Fund (WWF): programs to prevent illegal trade and over harvesting along with habitat preservation
-
SeaWorld: rehabiiltates and releases turtles back into the wild
Design Phase
Paper Prototypes
Once all research was conducted, paper prototypes were made to get an idea of what the final redesign could look like. Paper prototypes were shared with developers in order to verify that there would be no technical constraints.
Mid-Fidelity Prototypes
After paper prototypes were verified to be technically feasible, mid-fidelity prototypes were created to start laying out a more detailed view of the features and content that would be included. These mid-fidelity prototypes were then coupled with page tables so the high-fidelity prototypes could be developed.

Developing a Style Guide
The style guide that was produced took inspiration for the original site's brand identity and the general colors individuals associated with sea turtles and marine life. Our main intention with this style guide was to update the brand identity and create consistency that the STC team could take forward with them.
Colors
#193635
Primary
#6B6F79
#7C8078
#3F4141
#91968A
#898E9B
#59595B
Secondary
Typography
Ag
Bree
Ag
Roboto Bold
Roboto
Ag
High Fidelity Prototypes for Web
Below are high fidelity prototypes for the web experiences. Screens shown represent the Variable West Home Page, an individual event page, and one of Variable West's famous Love Letters.


High Fidelity Prototypes for Mobile
Below are high fidelity prototypes for the web experiences. Screens shown represent the Variable West Home Page, an individual event page, and one of Variable West's famous Love Letters.

Overview of Changes
Improvements to Visual Components
-
Increased brand identity through consistent style guide
-
Redesigned user interface to create visual hierarchy
-
Created a new logo for the site to update aesthetics
-
Redesigned textual elements to create more visual diversity
Condensed and Modernized Site's Information Architecture
-
Condensed information and text
-
Condensed pages together
-
Improved navigation bar
-
Modernized the display of information
Improvements in Accessibility
-
Decluttered pages
-
Easier engagement for the user
-
Developed a real mobile site
Additional SEO
-
Create a sitemap
-
Built links
-
Optimized content and speed
Takeaways
This site offered an opportunity to push ourselves out of traditional design conventions in order to create a site that reflected the creativity of the events and artists it promoted. The unique design challenge of serving three different states also pushed our team to come up with intuitive solutions and a site map that promoted event selection at the forefront.
From the last client meeting, further insights were gained that will be used to create a high fidelity version of the site to present to the Variable West team.