ESI Website Redesign

The Goal:
To redesign the ESI website in order to increase awareness, organization, and trust.
My Role:
User Research, Data Analysis,
Wire Framing, Prototyping, User Testing

Tools Used:
Google Suite, Figma, Miro, Photoshop

The Problem

The Endangered Species International (ESI) website was created to bring in updates and information on past, current, and future projects to their audience. However, due to the outdated information and lack of transparency of their site, new visitors to the site are unsure if they can trust the organization.
How might we communicate the impact ESI's projects have all around the world so that more people are aware of how important their work is and feel compelled to donate towards the organization?

The Solution

As a team, we saw an opportunity to update the current website and reorganize the informational architecture in order to provide updated information in a way that attracts users and inspire them to make a donation to the the organization.

User Research: Competitive Analysis

To get a better understanding on how to help ESI, we needed to get a better understanding of where it stood amongst its competitors. We did a competitive analysis with two direct and two indirect competitors to to see how they went about organizing their site content and displaying them for their stakeholders.

One thing we noticed across the different competitors was that their navigation was easy to use with noticeable images and text to get their information across to whoever visited their site. We also noticed that each site had a clear CTA that displayed their value proposition. There was also the discovery of a good balance between images and text, so that one does not overshadow the other.

Definition: User Persona

We analyzed the information from our competitor analysis and a survey we created (taken by 14 people), and then created a user profile that we believed would match a potential stakeholder/user for ESI. Seeing that ESI is an organization that works to preserve animals and their habitats all around the world, our team found it fitting that our user persona would be conscientious of the environment and lives a lifestyle that supports those ideas.

Ideation: Storyboard

We continued to use Taylor to draw out a storyboard in order to help us visualize how someone like him would interact with ESI for the first time. Drawing out each step of the process, as well as imagining how he might feel along the way, allowed us to think about the different opportunities we had to redesign the website to make it a positive experience.

Wireframe & Prototype:
A/B Testing and Final Designs

When it got down to creating a wireframe, our team reconstructed the information architecture through a card sorting exercise and then created two types of wireframes. We wanted to create a space where information was readily available and/or easily found. Then we performed an A/B test to see which users liked the most.

Wireframe A

WIREFRAME b

The main takeaway we got from that test was that users felt wireframe A felt too crowded with images and information. They liked how wireframe B had all of the same information, but spaced out in a way that was more pleasurable to look at. Taking the results of the test into consideration, we built out and designed the rest of the website in both desktop and mobile versions.

Final Product

Looking Back, Moving Forward

Having to split the responsibilities from research to final prototype and completing it all in three weeks was a challenge, but it definitely kept us on our toes. This project was a good reminder of how important it is to have a good foundation built up with research and strengthened by analysis of that data. Unfortunately, we were unable to get a response from the organization to find out what specific pain points they were experiencing. That's why it was that much more important that we were thorough with our research and tests.

If provided with the opportunity to continue this project, our team had some great ideas we would like to pursue.

1. Updated staff page with current members and contact information.
2. Build an educational page with resources for students/kids.
3. Continue building out the "Projects" page.

©Aileen Nam