Wildlife Alliance - Website Redesign
Same immersive story & mission, different visual flair that will get you to donate and join the cause.
Demo Prototype
Team
  • Hayden Duong
  • Tiffany Hui
  • Stephanie Furgiuele
  • Christopher Abraham
Role
UI & interaction Designer, Prototyping, Asset Collector
Tools
Figma, FigJam
Timeline
1 Week | October 25 - 29
Problem Space
Wildlife Alliance’s current landing page and donation process is lengthy, uncompelling, and confusing.
00 - Prologue
The Solution
Easy to Navigate Interface
Tells an effective story that delivers the organization's mission from the moment you land on to the home page while showcasing impactful statistics, partnerships, and portfolio of their work.
Dynamic Donation Experience 
Always know what kind of impact you're going to make when you donate any amount as well as educating you on what you are protecting. You will also have the choice to split your contribution to other initiative from Wildlife Alliance.
Immediate Visual Response and Representation
Donors will always get an immediate impact towards their contribution without having to wait for the transactional process. Thus resulting in an immediate satisfaction. 
01 - How the journey began
Context
Brief

This project is taken place during my tenure of the UX Design bootcamp at BrainStation. It was my second design sprint where I would get assigned to a team of 4 where we have 1 week to design either a mobile or desktop site in order to help non-profit, NGO (Non-governmental Organization), and social enterprises extend their reach, grow support, and drive impact on the world's most pressing challenges.

Challenges & Obstacles
While tackling this design sprint, there were many constraints that directly affect it and keeping it back from being an ideal product.
Design Constraints
1
Time
My team had 1 week to quickly go through the entire design process and come up with a solution that can help theses organization while developing team chemistry on the fly.
2
Financial
There were no additional resources other than exploring free online sources to gain information and majority of research were from volunteers that agreed to help.
3
Legal
Using the organization's likeness to help promote their brand and story.
4
Technical
We did not have access to data security practices and protocols that can prevent data interceptions and leaks in real-time.
5
Design & Usability
As this all of our second design sprint, we took a challenge to design a desktop webpage over a mobile design for the first time. We tried our best to quickly learn the industry standards regarding component dimensions, accessibility standards, and font & spacing.
Business Goals
Our goals for the overall project and what we want to this design to impact
Decrease Bounce Rate
Attract New Donors
Streamline & Simplify Processes
DESIGN SPRINT SCHEDULE
OCTOBER 25 - 29
Day 1 + 2 - Discover & Ideate
Day 1
Discovery
AM
  • Team Building
  • Secondary Research
  • Project Planning 
  • Mapping 
  • Interview Script + Participant Recruitment
PM
  • Conduct Interview
  • Create HMW's
  • Vote for the best HMW's
Day 2
Ideate
AM
  • Independent UI Sourcing
  • Team Feedback session
  • Independent Sketching

PM
  • Share Sketches + decide
  • Storyboarding 
Day 3 + 4 - Build & Test
Day 3 
Build
AM
  • Define roles for Prototyping
  • Build wireframe and prototype
PM
  • Finish building wireframe + Prototype
  • Trial Run
  • Iterate 
  • Prepare for user testing
Day 4
Test
AM 
  • Finalize Prototype 
  • Create Test Script
  • Begin User Testing
  • Prioritize Changes
PM
  • Finalize Prototype (post-changes)
  • Finalize Slide Deck
  • Presentation Rehearsal
Day 5 - Presentation
Day 5
Presentions
AM
  • Rehearse Presentation
PM
  • PRESENT!!
Who is Wildlife Alliance?

Wildlife Alliance is an international conservation non-profit; their mission is to build a future towards climate stability through direct, hands-on conservation work in Cambodia with 3 main focuses:

Protecting Rainforests

Delivers a unique and successful model of hands-on direct protection to 1.3 million hectares of the Cardamom Mountains rainforest, one of the last unfragmented rainforests in Southeast Asia.

Wildlife Care & Rescue

Wildlife programs are designed to rehabilitate animals victimized by the wildlife trade and provide them with the support and care necessary to ready them for release back into the wild.

Community Outreach

Wildlife Alliance invests in environmental education to protect nature for future generations through the Kouprey Express.

02 - An Issue arises
Design Challenge
“How might we provide new donors a more refined and memorable donation experience so that they feel more assured about their contribution to Wildlife Alliance’s cause?"
Project Objectives
We start by planning on what we want to focus on and what our end-goals were.
  • Understand the User
    We want to uncover the behavior, motivation, and pain points behind our potential user.
  • Tell a Cohesive Narrative
    We want to discover ways to tell Wildlife Alliance's story and mission to the viewer.
  • Create a Memorable Experience
    We are looking into ways that we can transform a boring donation process into a dynamic experience.
03 - The investigation begins
Design Audit
As an investigation, all of us went through the entire website and took note on what the issues were for the website and figure out reasons why it is struggling with user engagement and slow rate of donations.

As we concluded the audit we have discussed the issues amongst ourselves and synthesized all of the issues that are plaguing the website. Below are examples of what we think might be hindering Wildlife Alliance from unlocking its full potential.
04 - Find out what others are thinking?
It All Starts with a Question

With time being of the essence, we quickly consolidated common donor questions to find out their behaviors, motivations, and pain points regarding charitable donations. We also want to uncover the "why" to what they do.

Interview Questions

Methodology:
To make this a valid research, our objective is to have all 4 of us interview at least 3 people so we have a pool of 12 to gather information from and to minimize bias as much as possible.

Participant Criteria:
Anyone who has a history of donating.

Below are some examples of question we would ask our users.

Introductions:
  • How old are you?
  • What's your name?
  • Are there any causes you care about?

Specifics:
  • Do you donate? Why? Why not?
  • How frequently do you donate?
  • When was the last time you made a donation?
Click here for full script
Ah, So What You're Saying Is?

After the conclusion of user interview session, we all shared what we've found and synthesized the answers into one of three categories (Behaviors, Motivations, Pain Points).

  • Behaviors
    • Seasonal holidays - Have a feeling generosity towards others.
    • Social obligations - Follow older relatives by example.
    • Brand Identity - is an important factor when consider which organization to support.
    • Online methods of donation is a common trend amongst the interviewees.
  • Motivations
    • Familiar causes - well-known, larger organizations.
    • Sudden crisis in the news, or within my community that require help.
    • Causes that hit closer to home, and have struck a personal chord.
    • Organizations that tell a compelling story.
    • Transparency into where donated money is going.
  • Pain Point
    • Poor quality of the website.
    • Inaccessible donation button.
    • Political affiliation concerns or anything that might deem offensive.
    • Automatic subscription to emails and newsletter through donation process, want to enter email for receipt only.
    • Too many questions asked throughout the form.
05 - Persona Manifestation
Meet Harrison

Based on our interview findings, we consolidated our participants' main behaviors, motivations and frustrations into one persona, Harrison Scott.


Harrison is a 30 year old software engineer who is very critical when selecting an organization to donate to. He is drawn by compelling stories and the security and privacy of a website. Harrison dislikes when there is a lack of transparency in where the donations go, having to question a website's legitimacy, and having limited donation accessibility.

06 - Conceptual Ideation
When Inspiration become Concept

Using elements from our inspiration board, and insights from our interviews, we created these solution sketches. Our sketches were focused on the structure of information on the landing page, along with a narrative, and creating a more enjoyable donation process.


Specifically during the sketching session our goal is trying to give reasons as to why potential donors should donate and current donors should continue through easy to navigate interface, Education & Impact, and immediate satisfaction.

08 - User testing
Does it work well?

Using elements from our inspiration board, and insights from our interviews, we created these solution sketches. Our sketches were focused on the structure of information on the landing page, along with a narrative, and creating a more enjoyable donation process.

Mid-Fidelity Prototype
Regarding the prototype, my role was to research and develop asset for the web page with my partner Tiffany.

Once the construction of the asset of the library is complete, I mainly focus on the continuity and interaction design of the prototype where I create interactive components and animations that would simulate how a user would go through our new webpage.

During the testing session in the perspective of the persona: Harrison; testers will first go through the scenario of exploring the homepage and discover the organization's mission while the second objective is to initiate and finish the donation process.
Demo Mid-Fidelity Prototype
User Test Results

Upon the conclusion of a single round of user testing, we all compared results and narrowed down in three areas that needed improvement. Below is an image is a detailed breakdown of our priority matrix and what we focused on improving to keep out workflow efficient.

  • Home Page
    Unclear how to explore the “causes” link on the landing page
    01
  • Donation Distribution
    Some difficulty using the fund breakdown slide component
    02
  • Payment
    Donation amount under payment details is not noticeable
    03
09 - Losing is improving
Key improvements
Before: Left | After: Right
01 - Home Page
So with our first point, we see that on the left is a version of a Mid-fidelity screen. It showed a statistic, but it was imagery that Harrison felt would be more impactful. So we listened. With imagery brought in, we also adjusted how viewing the causes works, by clicking ‘Explore Causes’ instead of interacting with a carousel.
02 - Donation Distribution
The next comparison shows that within the donation process, there’s a slider. While Harrison understood what to do, there was an opportunity to reduce the time involved. So we added a line of text to give insight into the slider’s function.
03 - Payment
Last but not least, we see that Harrison overlooked the edit amount on the previous prototype. So we increased its presence. Hopefully that gives Harrison reassurance to their amount.
10 - High fidelity
Hard Work Pays off
After all of the changes here is finalized prototype
Let's go!
11 - The Aftermath
Did we address all of Harrison's Pain Points
With the comparisons done, we ask ourselves. Did we solve Harrison’s pain points? Listen to his behaviour and motivations?
Transparency & Control

We have added transparency to information that Harrison needed to know before donating while offering him more control to where he would like to contribute specifically.

Legitimacy and Safe

We gave the Wildlife Alliance website a more legitimate presences with testimonies, partnerships, and credible statistics.

Clean & Intuitive

We have redesigned the payment and split each process into digestible sections and made the interface clean and straightforward to complete.

For Harrison, we made sure that the impact would be memorable. Such as the amount you give, having an immediate visual representation.
12 - Epilogue
What did the team and I learned?
User Testing between Mobile and Desktop
There were a lot of consideration that were involved when we had to do when prepping for user testing. Knowing what scenarios to use and open-ended questions to ask was also a challenge. But adaptability prevails since our deadline to our presentation was coming close.
Designing for Web
This sprint was all of our first time designing for web. There were various specifications that we needed to consider while keeping the space even. We also had to keep in mind that the white space matters a lot as well.
Adaptability
This design sprint tested out adaptability as we have little time to get to know each other (strengths and weaknesses) and we had to work in a fast paced environment with tight deadline. We had to iterate quickly without keeping our workflow efficient.
Next Steps
For future consideration if I were to return to this project then I would do the following steps.
  • 1
    Information Architecture 
    Further flesh out information architecture and organization of Wildlife Alliance’s causes.
  • 2
    Key Performance Indicator Analysis
    Analyze if changes increase online donations
  • 3
    Changes in Total Users
    Analyze if changes increase the number of recurrent donors
  • 4
    User Testing
    Further user testing & usability studies on the general donation process
Style Guide
Here is the behind the scenes on what kind of assets we've used to help create this project
Thank you for reading!
Related Projects
BrainStation X General Motors
Industry Design Sprint - A Goal Zero Initiative
A Usability Redesign of Montreal Tax Expert
UX Design Case Study: A financier's website redesign for better user experience
Fortuna App - UX Case Study
UX Design Case Study: A Budgeting app designed for users of all levels
© All Rights Reserved. Duong Design
duong.hayden@gmail.com
Made on
Tilda