Juan David LogoHomeAbout MeContact

Project Overview

360° Kids Foundation

360° Kids is a foundation dedicated to assisting children in crisis. In collaboration with Danielle Dallavalle and Thao Doan, we embarked on redesigning their donation page and flow to enhance online donation contributions.

Project Overview

Project Time:

1 week project

Project Purpose:

To enhance online donations by improving the intuitiveness and accessibility of the user flow.

Context

The Problem

What was happening?

The current web page presents several issues, particularly in adhering to Nielsen Norman Group's heuristics lists. This results in a complex and unintuitive user flow, making online donations challenging for potential contributors.

Problem Space

At- risk & homeless youth have a hard time landing meaningful jobs for a variety of reasons such as lack of proper job training, employer expectations vs. the pay, not measuring up or challenging situations at home.

Goals & Objectives

Project Objectives

To encourage donations, focus on answering top questions and streamlining the donation process.

Hypothesis

Online donors may encounter challenges in making donations, primarily due to complex processes and difficulty in identifying the initial steps to begin the donation process.

Assumptions

Donors seek an easily accessible and immediate presentation of the donation process, allowing them to swiftly commence inputting required details and effortlessly finalize their donations.

Deliverables

The project deliverables consist of a fully functional prototype showcasing the donation flow.

Research

Based on research we found that the lack of education and job training is a heavy blocker for the future of youth.

Current Flow

Research Insights

Affinity Map

Mapping

Target Audience

Based on research we began designing an updated experience for people who are between 27 -75 that have financial means to donate.

Persona

Strategy

Process

Market Research

Many foundations now have webpages to facilitate online donations. However, a significant number of them lack proper UX design, resulting in a donation process that is difficult to navigate.

User Research

Inspiration

Main Inspiration

After gaining insights into how other foundations effectively present their donation forms on their landing pages with easily accessible and clear calls-to-action (CTAs), we were determined to follow a similar approach when redesigning the donation process for 360° Kids.

Sketching

Logo Concepts

As part of a fresh redesign to the website, we believed that updating the current logo could provide a new look that aligns better with our revamped design.

Logo Redesign

Constrains

- Brand Consistency
- Compliance with Regulations
- Integration with Payment Gateways
- Donor Relationship Management
- Reporting and Analytics

Ideation

Prototyping

To encourage a quick and accessible donation process, we decided it was best to have a donation form directly on the home page and the main idea was that the user could go through the process without changing screens.

User Testing

Based on user testing, we identified areas for improvement in our design. These include:- Adding a confirmation and summary step before finalizing the donation process to enhance understanding.

- Making the tax receipt option more prominent for visibility.

- Implementing a scroll indicator on the hero section to indicate to users that they can scroll down for more information.

- Including a button for users to easily navigate back to the top of the page.

- Addressing a bug in the payment chip to ensure seamless payment processing.

The Solution

The redesign encompasses a new homepage and donation experience, along with updates to the logo, color palette, and typography. Additionally, we introduced "Grad Stories" to highlight the personal success stories of beneficiaries. Furthermore, a "Meet Our Team" section was added to showcase the individuals behind the organization, their roles, and personal quotes.
View the full prototype

Learning Outcomes & Next Steps

Key Learnings

Learning to create components & variant chips and that lack we had lack of skill and knowledge when tackling design animation.

Next Steps

Conduct a last round of user testing (perhaps with an older demographic to mak sure things are easy to comprehend and navigation is simple). Then handing it off to the development team as we push this project forward.