Endangered Species International is an amazing non-profit organization that works primarily in South America. They work hand in hand with local indigenous peoples who use their cultural knowledge of the local habitats to help conserve these areas and the animals that call it home.
Project Type: Responsive Web Redesign
Project Duration: 4 weeks
Project Duration: 4 weeks
Design Team: Brett White, William Tan, Viviana Nguyen, Meghan McNamara
Key Contributions
-Performed a heuristic evaluation of the existing site and it's potential issues
-Interviewed users and the stakeholder (founder Pierre Fidenci)
-Gathered and interpreted data
-Restructured the website's information architecture
-Created an entirely new donation page and form
-Iterated low fidelity prototype
-Brought prototype to hi fidelity
-Performed a heuristic evaluation of the existing site and it's potential issues
-Interviewed users and the stakeholder (founder Pierre Fidenci)
-Gathered and interpreted data
-Restructured the website's information architecture
-Created an entirely new donation page and form
-Iterated low fidelity prototype
-Brought prototype to hi fidelity
Defining the Problem
During our initial assessment of ESI's website, we noted the design looked very outdated and was also non-responsive; the mobile site was a scaled down version of the desktop which created accessibility issues with the surface area of clickable elements.
During our initial assessment of ESI's website, we noted the design looked very outdated and was also non-responsive; the mobile site was a scaled down version of the desktop which created accessibility issues with the surface area of clickable elements.
Research
Our user interviews and usability tests corroborated our initial assessment. Users found difficulty in finding the donate site among all of the information present on the front page. Furthermore, because of the site's older looking design, they expressed doubt in whether the organization was still active. Users felt that the website's main navigation menu was straightforward and the presented information was useful, however they felt that it could be presented in a more concise manner. Users wanted more images and less text, easily digestible info-graphics, and more identifiable interaction points on the page.
We also had the opportunity to interview the founder, Pierre Fidenci. Pierre explained that the website had broke recently due to the flash no longer being supported. He also revealed that only 30% of funds were sourced from donations from the website, and that they have also dropped recently. He expressed importance in a website that was easy to update as a blog and was also responsive and mobile friendly.
Our user interviews and usability tests corroborated our initial assessment. Users found difficulty in finding the donate site among all of the information present on the front page. Furthermore, because of the site's older looking design, they expressed doubt in whether the organization was still active. Users felt that the website's main navigation menu was straightforward and the presented information was useful, however they felt that it could be presented in a more concise manner. Users wanted more images and less text, easily digestible info-graphics, and more identifiable interaction points on the page.
We also had the opportunity to interview the founder, Pierre Fidenci. Pierre explained that the website had broke recently due to the flash no longer being supported. He also revealed that only 30% of funds were sourced from donations from the website, and that they have also dropped recently. He expressed importance in a website that was easy to update as a blog and was also responsive and mobile friendly.
User Persona and Journey map
The target user for ESI's website are looking for reputable non-profits that they would like to help support. The team created a journey map that illustrates the challenges a user has when trying to decide whether to donate to a organization or not.
The target user for ESI's website are looking for reputable non-profits that they would like to help support. The team created a journey map that illustrates the challenges a user has when trying to decide whether to donate to a organization or not.
|
|
User Flow
Our user flow illustrates the journey of a visitor on our new site. Our goal was to facilitate smooth navigation throughout the pages as they researched with the end goal being a potential donation to ESI.
Our user flow illustrates the journey of a visitor on our new site. Our goal was to facilitate smooth navigation throughout the pages as they researched with the end goal being a potential donation to ESI.
First Prototype
With our insights and understanding of the problems faced by users, we implemented three major changes as we overhauled the original ESI website. First we updated the navigation bar with a new information architecture; streamlining and consolidating the menu categories for a less cluttered navigation. On the main page, we used image cards as links as well as to organize large chunks of information and organized them based on the importance to our users. Finally, we included multiple clear and accessible donation buttons throughout.
With our insights and understanding of the problems faced by users, we implemented three major changes as we overhauled the original ESI website. First we updated the navigation bar with a new information architecture; streamlining and consolidating the menu categories for a less cluttered navigation. On the main page, we used image cards as links as well as to organize large chunks of information and organized them based on the importance to our users. Finally, we included multiple clear and accessible donation buttons throughout.
|
|
In addition to the desktop prototype, we also implemented a mobile version of our redesign. The mobile version includes all the features from the desktop redesign but streamlined for a mobile experience.
|
|
|
Prototype Testing
With our first prototype active, we again asked users for their input. Response to the redesign was well received and there were minimal problems navigating the prototype. Among the minor things were a reordering of our categories and adjustments in image sizing and spacing. A concern users noted was that there was an over abundance of donation buttons; it felt like there was too much focus on monetary gain rather than spreading awareness.
With our first prototype active, we again asked users for their input. Response to the redesign was well received and there were minimal problems navigating the prototype. Among the minor things were a reordering of our categories and adjustments in image sizing and spacing. A concern users noted was that there was an over abundance of donation buttons; it felt like there was too much focus on monetary gain rather than spreading awareness.
Post Testing Analysis
In response to our user feedback, we decreased the number of donate buttons on the main page. We changed the menu bar by making it sticky, this enabled the donation button to be accessible and allowed it to function as a gentle reminder rather than a new call of action. We kept one extra donate button on the main and mission pages near relevant infographics.
In response to our user feedback, we decreased the number of donate buttons on the main page. We changed the menu bar by making it sticky, this enabled the donation button to be accessible and allowed it to function as a gentle reminder rather than a new call of action. We kept one extra donate button on the main and mission pages near relevant infographics.
Pushing the Prototype to High-Fidelity
Our style tile for this project consisted of primarily neutral earthy tones to highlight the organization's connection to nature and the environment. We used the existing logo's colors of olive and yellow as our starting point, with adjustments in saturation and vibrancy to create a more cohesive look. We used a bright orange to contrast against the overall color palette and to function as our primary call to action color for the donate button. I also created a custom footer graphic to finish the redesign.
Our style tile for this project consisted of primarily neutral earthy tones to highlight the organization's connection to nature and the environment. We used the existing logo's colors of olive and yellow as our starting point, with adjustments in saturation and vibrancy to create a more cohesive look. We used a bright orange to contrast against the overall color palette and to function as our primary call to action color for the donate button. I also created a custom footer graphic to finish the redesign.
Desktop High Fidelity Prototype
|
|
|
Mobile High Fidelity Prototype
|
|
|
Clickable Prototypes
Desktop
Mobile
Thank you for reading! I hope you have a lovely day. ~William