GiveCard

- Use “giving” to multiply the power of every dollar

"GiveCard" is a charitable user experience product from Goodworld Inc., which integrates the "gift and voting" approach into the traditional donation process so that the donated funds can be used more comprehensively where needed. My role, as a UI/UX designer was to transformed the innovative "GiveCard" concept into an easy-to-follow user experience product.

DURATIONFeb 2021 - May 2021
TEAMRichie Kendall (Supervisor)
Haowen Liu (Designer)
ROLEIdea Analysis, User Research,
Structural Frame, User Interface.
TOOLSMiro, Adobe XD,
Illustrator, Figma.

Can we multiply giving?

When users receive GiveCards as gifts, they can choose the value contained in the GiveCard to go to a charity that the users think is more needed. At the same time, users can choose to increase the number of donations or buy more GiveCards to give to others, which will eventually expand these social influences exponentially.

Select A Cause

When users choose to redeem GiveCard, they can search for relevant charity and further understand the charity's goals and influence.

Increase Impact

After redeeming the GiveCard, users can choose to increase the donation amount for the same charity or buy more GiveCards to give to others.

Increase Impact

After redeeming the GiveCard, users can choose to increase the donation amount for the same charity or buy more GiveCards to give to others.

Determine Choice

On the checkout page, users can change the selection and quantity at any time, and they can also save these influence-enhancing choices for the future.

Let's take a look at the process!
Ideation Analysis

Bring vitality to donation through "giving."

At the beginning of the project, my supervisor Richie used some cases to tell me some preliminary ideas for "GiveCard." Through the miro board, we sorted out the process of "GiveCard" and the existing problems.

Operation Flow

Find a balance between user needs and user experience.

To find out some problems and implement the design, I created this operation flow based on user journeys and product processes.

User Flow

To sort out the user's visual information and alternative paths. I created this Flow Chart through the Miro board.

Low Fidelity Wireframe

Then I used the same tool to display the product information hierarchy on a simple wireframe. We use some small stickers to put forward the problems and solutions in each part.

High Fidelity Wireframes

The product should help users make their choice quickly and for a reason.

Campaign Simulation
User Research

The Home Depot cares about a more sustainable environment.

To better understand users, I first adopted The Home Depot as a representative "Company Campaign" user model. Then, following the research on The Home Depot's goals and social responsibilities, we simulated a "sustainable forestry" campaign.

Application

“Plant the Future” Campaign

To realize the "sustainable management" strategy, The Home Depot and Goodworld Inc. jointly launched a sustainable forestry campaign called "Plant the Future." The campaign was initiated by "GiveCard" as the carrier, and the company distributed the "GiveCard" to all employees.
"Plant the Future" aims to create a multiplied positive impact on sustainable forests through the dialogue of users' voting behavior and the motivation of value increase.

Client:
The Home Depot

Campaign Name:
Plant the Future

Topic:
Sustainable Forestry

Duration:
160 days

Prototype Testing
Product Testing - General

"GiveCard" can be quickly understood and provides multiple paths.

Due to the diversification of the path, the result is less consistent with the predetermined direction. It's a good performance that users can use an average of 4s to read the page, but the wrong click-through rate should be paid attention to and adjusted.

Product Testing - Path Analysis

The user's choice is in line with expectations.

Users will have different choices during the charity selection and the checkout stage.

Product Testing - Click Behavior

The wrong click rate comes from the response range of the buttons.

The user clicks the right arrow button on the charity selection page to view the charity information, and the response area is insufficient. However, on the checkout page, the entire card can be used as a reaction area.

Product Testing - Time on pages

Understanding information and making decisions are where it takes a long time.

Users spent a long time reading information and making choices on the campaign information page and charity selection page. At the same time, users on other pages can quickly follow the desired process to act.

The product is still in the process of development and testing. If you want to know more design details, feel free to contact me.

You may also like

Let's Connect!

Let's craft design stories and share life's adventures together! Reach out anytime for a creative chat or to exchange insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.