A Website Redesign for the Sea Turtle Conservancy

Modernizing a charitable brand to help build appeal

THE BRIEF 

Work with a team of students to redesign a charitable organization's website in the hopes that our endeavors would help promote the brand to a digital audience. 

THE CLIENT 

The Sea Turtle Conservancy is the world's oldest and most accomplished organization for sea turtle conservation. It has ongoing programs in Florida, Costa Rica, and Panama. 

over

$2.8

million in donations

worlds

#1

sea turtle conservancy

over

4,860

members in 2015

MY ROLE

Serve as the team lead and front end developer to accomplish the following:

  • Market analysis of STC's most prominent competitors 

  • Analysis of the site's SEO, design, social media, information architecture, functionality, and accessibility

  • Updated style guide 

  • Low, medium, and high fidelity prototypes

WIREFRAMES

Wireframes were mocked up to begin envisioning the Sea Turtle Conservancy's new vision

  • Intended to jumpstart the process of redesigning the site

  • Low fidelity and high fidelity wireframes created to ease the process of transforming wireframes into front and back end code

  • Created using the application Sketch

seaturtlewirframe.png

Low fidelity wireframe of home page

UI DESIGN

Once usability issues were corrected and the advice of the team's developers were considered, UI was created

  • Brand redesign served to modernize the site's current style guidelines

  • Architecture was condensed and the UI of each page was simplified to increase readability.

  • UI was created for both web and mobile applications.

  • Organization's mission is better reflected with a clear call to action

seaturtlehompage.png

Designing a home page to lure visitors in

In order to account for responsive design, mobile prototypes were also created.

seatutlemobilescreens.png

Mobile high fidelity prototypes

OUTCOME

The project resulted in a fully redesigned site as well as a better understanding of how to work with a multi-disciplinary team of my peers

  • A fully redesigned site with functional elements, revised content, and an updated visual style

  • Site was programmed using HTML, CSS, and functional elements were built using JavaScript

seaturtleinfopage.png

View the project presentation for a condensed version of the condensed brief.

 

TAKEAWAYS

This project pushed my understanding of front-end programming best practices as I had the opportunity to code a fully functional site in addition to designing high fidelity prototypes. Working with code taught me more about technical considerations and what to keep in mind during the design process.

In addition, as project leader, I learned how to adapt quickly to changing circumstances and how to make up for team deficiencies by reassigning tasks and delegating responsibilities.