Anne Elaouiti
10,000 Trees
Redesigned for responsiveness and overall user engagement by simplifying navigation and increasing the 'donate' call to action. This in hopes with increased social media presence would bring more awareness to the cause.
Role
Product Designer—user research, design, prototyping, and user testing
The Challenge
The 10,000 Trees non-profit organization works to restore the environmental damage of blank through planting trees. We were challenged to redesign the responsiveness of the site. We began by having a look at the existing site and taking note of what could be redesigned.
Meet the Team
Anita Esufali
Assistant Researcher & UI Designer
Dave Marseille
Head Researcher
Anne Elaouiti
Team Leader & Head UI Designer
Research
We started by doing research and user interviews to uncover the issues with the navigation and overall site.
We learned that users wanted an easy way to donate which help to influence our redesign.
Affinity Diagram
Key points of how users felt during our user interviews
"It is nice to know about other people's experience volunteering for an organization so I can know what to expect and if the cause is really worth it"
"I want to know where my money (donation) is really going"
"The 10,000 Trees website is not very engaging"
"I get most of my information online now since the pandemic - so hearing about any volunteer opportunities would be online as well"
"Other NPOs who work for similar causes have a better online presence (ex. better website) so I would feel more inclined to participate with them instead."
"Since the pandemic, opportunities for volunteering are limited"
Design Process
We started by card sorting the navigation of the existing site while also creating a site map and user flow to map out the direction of the redesign.
Using this direction I created a mobile wireframe with a focus on making the navigation responsive and a focus on the donate button to motivate users to donate. We also created a style guide and tile to help direct the design decisions that would occur during the prototyping phase.
User Testing
Armed with our wireframes we took them and conducted user testing to uncover the thoughts users had about the redesign. We learned that users found the site simple to navigate but pointed out that there was a lack of a way to communicate with the non-profit. Prior to this we had considered adding a chatbot but were undetermined at this time. However, as a result of the testing we found it was best to include the chatbot.
Statistics
60%
of participants have heard of 10,000 Trees
57%
Would be willing to donate to 10,000 Trees
71.4%
of survey participants said the existing 10,000 Trees site is outdated
Prototyping
After analyzing the results of the user testing, I took the feedback to create our high-fidelity prototype. My team decided to make the colour theme of the foundation more prominent and to also add a brown tone to indirectly incorporate the concept of trees.
We utilized A/B Testing to aid us in the final design decisions. This really helped us make the most important decision of the placement of the navigation bar.
Prototype
Final Product
The End
There are portions of the existing website that can be improved to motivate users to donate in a time where volunteering is just not possible due to covid-19. Our goal was to show the potential of what could be done in hopes of increasing motivation and overall donations.
For the future, if 10,000 Trees focused on building a stronger social media presence this could help increase interest in the cause, as well as engagement in donations, and hopefully in the near future, volunteering rates.
