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.

​

Adopt a Turtle

Renew Membership

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