top of page

Green Thumbs

Redesigning a Donation Experience

Green Thumbs is a non-profit organization that cultivate environmental stewardship through hands-on garden and food education for urban children and their communities.

As a team of 3 UX designers, we conducted a 5 - day sprint to research, ideate, build and test a potential solution to redesign Green Thumbs donation experience. 

Body (5).jpg
Body (6).jpg

Role

UX Researcher, UX Designer, UI Designer

Project Length 
                          

 

5 Days

Tools Used    

Figma, FigJam, InVision, Adobe Illustrator

Desktop Website 

Platform                      
 

Problem & Context

For over 20 years, Green Thumbs has been advocating the need for food and nature literacy programs to kids ages 6-12 and has been growing ever since. On their website, they include more of a story telling element to their home page, which grabs the donors attention. However, the navigation content is repeated word by word on the landing page, making it very unclear and non-user-friendly, and the landing page lacks necessary information to motivate users to donate, making it inaccessible to people with visual impairments.

Challenge 

Frame 1 (1).png

Goal & Metric 

I worked with a team of 2 UX designers for this project. By redesigning Green Thumbs' website, we hope to create a website donation experience that motivates people to financially support Green Thumbs’ environmental education programming.

RESEARCH

Donation Behavior

As a team, we conducted secondary research to learn as much about the problem space as quickly as possible. Through our research, we learned that certain factors influence donation behaviour.

Mask group-2.png

Impact

Tangible details about charity interventions

Integrity

Does the organization do what they say they will do?

Mask group-1.png

Rewards

Motivate individuals  to donate

Competitive Analysis

The next step in our research was to understand successful patterns in current non-profit organization and gain insights into their donation experience. We explored 5 non-profit organizations and narrowed down to 2 top competitors. We analyzed the good and bad of each competitor, and performed our points of analysis on: program information, financial transparency, testimonials .

Frame 15.png

User Interviews

We interviewed 3 participants who has donated in the past. Through 3 interviews, our team was able to synthesize the data into 3 different themes and gather key insights using an affinity mapping process. 

Frame 18.png

“I love when organizations includes

pictures and videos of live events 

they did, I feel like I can trust them more” .

- Lina

Frame 20.png

“I want to help people, 

not give my money to 

make other people rich”.

 

-Kelly

Frame 19.png

“I really like seeing transparency

from organizations and exactly where my money is going towards”.

-Mike

SYNTHESIZE

Interview Findings

We interviewed 3 participants who has donated in the past. Through 3 interviews, our team was able to synthesize the data into 3 different themes and gather key insights using an affinity mapping process. The following are the themes and insights we have found from the interviews.

Transparency

Pink-5.png
Pink-6.png
Pink.png
Pink-7.png

Impact

Pink.png
Pink-1.png
Pink-2.png
Green-2.png
Green-3.png
Green.png
Green-1.png
Blue.png

Value

Blue-1.png
Blue.png
Green-3.png
Green-1.png
Green.png
Green-2.png

Pain Points

Ellipse 2287.png

Behaviors

Ellipse 2289.png

Motivations

Ellipse 2288.png

Based on those interview insights our team found three main key themes:

Frame 10.png

Persona

Through interviews and data synthesis, the persona, Sasha Powers was created. Sasha represents the target user, a young person who does not have a lot of extra money, but is still interested in making a charitable impact. 

IDEATE

Mapping the Experience

With our persona Sasha in mind, we created a Journey Map. Her goal is to find a non-profit organization that she can donate to with confidence. We highlighted the most critical moment for her user's experience  and kept that in mind as we proceeded into the ideation phase.

Frame 12 (2).png

Sketching

The sketching process began with pulling UI inspiration and exploring potential concepts and ideas for each state in the experience map. Elements and features from existing social media apps were used as inspiration that would make it easier for the donor to navigate. Overall, the website needed to reflect the charity goal; to highlight the impact, and be a place that is safe and trustworthy. It was important to include aspects of program impact, safety and trust through the website's features as well as the overall user interface.

Screen Shot 2022-11-23 at 9.49.45 PM.png
Screen Shot 2022-11-23 at 9.50.02 PM.png
Screen Shot 2022-11-23 at 9.50.12 PM.png
Screen Shot 2022-11-23 at 9.50.22 PM.png
Screen Shot 2022-11-23 at 9.50.45 PM.png
Screen Shot 2022-11-23 at 9.50.36 PM.png

Solution Sketches 

Solution sketches were developed by pulling key components, inputs and controls from out exploratory sketches. The solutions sketches below were developed for each location in the experience map and helped develop the initial prototype.

Unit 3 Sprint 0 2 1.jpg
Unit 3 Sprint 0 2 4.jpg

PROTOTYPE

Wireframing

To help visualise the work and test the initial concept, the solution sketches were developed into mid-fi wireframes in Figma. The goal of the mid-fi wireframes are to test the functionality of the task flow before any visual aesthetics are added.

2 - Programs Page.jpg
5-Payment Information.png

Brand Development

Due to the time constraints we did not do user testing at this stage and immediately moved into Hi-Fi phase. To make this prototype into high fidelity. We start thinking about the type of keywords we want to associate with this product and some of the words we came up with are Welcoming, Trustworthy, Environmental, and Safe. Through those keywords, we created a colour palette and used a bright green as the brand colour.

Screen Shot 2022-11-28 at 5.43.16 PM.png
Screen Shot 2022-11-28 at 5.43.35 PM.png
Screen Shot 2022-11-28 at 5.44.58 PM.png

BEFORE (Original Homepage)

Frame 10 (4).png

AFTER (Redesigned Homepage)

1 - Home Page.png

USER TESTING

Following the completion of the initial prototype, a user test plan was developed. We conducted usability tests with 5 users in order to improve the design of this website. 

Homepage

We changed the title of the testimonial writers to make it easier for donors to read.

1 - Home Page 1.png

Before

1 - Home Page (2) 1.png

After

Details Page

We changed the title Funding to Your Funding is Going to and added a drop down menu icon to let donors see how their contributions would be used as well as to allow them to choose between different programmes to donate to.

3 - Donation Details.jpg

Before

3 - Donation Details (1).jpg

After

Confirmation Page

On the confirmation page, we added the donor’s name as well as the option allowing donors to receive the gift.

6-Thank You Page.jpg

Before

6-Thank You Page (1).jpg

After

Green Thumbs Finalized Prototype

After identifying our key problems from the previous round of user testing we implemented the changes into the final prototype. It was now the end of the design sprint and we were ready to present our design solution.

MacBook Pro 16 (3).png

Next Steps

  • Further testing would need to be conducted on the high fidelity prototype with real website visitors.

  • We want to contact Green Thumbs and get feedback from the board of directors.

  • We also want to develop additional pages including the “community” and “get involved” pages. 

Key Project Learnings

Throughout the process, I learned a lot, but can be summed up in the following:​

  • Design is a collaborative process. 

  • Communication is everything.

Designers must be able to communicate their ideas, thought processes, and work clearly and successfully. At every stage, communicate with your team, ask for feedback, and most importantly, communicate with the end-users.

  • Always go back to your persona and keep in mind that you’re designing for your users.

The personas allow us to refer back to the users at each step of the design process and make sure all their needs are being met. 

bottom of page