Heartland Charity

Designing a mobile app and responsive website for a new charity platform

Date: December 2022
Role: UX Designer, Researcher, Visual Designer

The Goal

Create a cross-device charity platform for giving that increases contributions and  improves user experience.

The Result

A prototype that gathers charities in one location, is consistent across devices, and has an intuitive donation flow where donors can complete their giving with confidence in seconds.

Project Overview

Currently charities have individual online presences and processes to receive donations. The responsibility of locating and navigating these unique processes is a burden on the user and suppresses giving. This project was completed as part of an educational program.

Research Summary

User Pain Points

Two trends emerge when examining participant interview and survey responses:

Lost Time

Participants expressed disinterest or frustration when thinking about the process of donating online, but not necessarily the cause.

Unknown Impact

Participants were unsure that their action would make a difference for
the better.

Key Data

75% of survey participants report less than 10min of research when deciding on a donation opportunity.
100% of respondents listed their phone as most frequently used when shopping online. Half of respondents reported this behavior as a daily occurrence regardless if a purchase was made.
At least one digital wallet or digital payment app were included in 75% of responses when asked about payment types used by respondents.
Competitive audit research suggests simplifying the donation process into a quick and predictable experience could make the most significant impact toward our goal, followed by boosting donor confidence in their decision to give.

How might we...

How might we make donating a simpler and shorter experience to increase giving?

Design Approach

Guideposts

Simplify

All-in-one, donor solution for clear and unified mobile-forward donation process.

Validate

Highlight charity efficacy by using a trusted independent scoring system.

Accommodate

Allow users a variety of ways to donate via digital wallet or other digital payment tools.

User Flow

Steps were taken to ensure donations were possible at any time and location on the site.
Donation User Flow chart. Heartland Charity App

Preliminary Designs

Early low-fidelity designs feature a hierarchical design approach with a fixed header and a prominent call-to-action donate button.

Wireframe home screen for Heartland Charity app.
Homepage low-fidelity mockup.

Home

  • Placement of the donation button at the top discourages accidental user interaction.
  • The image carousel directly below the title bar spotlights current events and initiatives.
  • Users easily find their cause with the search bar.
  • Information is brief and minimal to maintain clarity. If interested, users can learn more with the “more info” button.

Directory

  • Users can browse the list of charities.
  • Learn more about a certain charity
  • Filter and sort search results.
  • See a charity’s score via a trusted independent source.
Wireframe charity directory screen for Heartland Charity app.
Directory page listings with sort and filter options.
Wireframe donation screen for Heartland Charity app.
Donation flow, low-fidelity mockup.

Donation Flow

  • Users enter the donation sequence after clicking the donation CTA button.
  • A progress stepper below the title bar orients the user.
  • Navigation buttons on the bottom of the card allow the user to freely travel between steps.

User Testing

“It’s simple... It’s great there’s no signing in.”
- Study Participant 2

Key Findings

  • Participants appreciated the intuitive design and speed of use in usability testing.
  • Specific features in the donation flow require further refinement to simplify and improve the process overall.
  • Navigation outside of the donation flow could be better indicated.

Insights

  • Tailor donation flow depending selected payment method.
  • Clarify recurring donation options.
  • Be more specific about acceptable payment methods.
  • Increase navigation options and their prominence.

Final Design

Design Changes

Insights from testing data were used to refine the app and produce the final design.
Log updated snack bar with higher contrasting colors to increase visibility to user.
Clarify recurring donation options.
Time tracking app menu drawer with a dedicated line for sharing timesheets added.
Add branch to donation flow separating digital wallet payments from credit and debit payments.
A sample of app icons and their names centered in a 4x4 grid.
Specify accepted payment methods at select screen.
A sample of app icons and their names centered in a 4x4 grid.
Center donation button. Add search feature and menu drawer access to
title bar.

Final Design

  • Intuitive hierarchical structure.
  • Distinct sections to assist user orientation.
  • Careful use of graphics to favor performance on slow connections speeds.
  • Clear typeface and color contrast in compliance with WCAG standards.

Mobile

Heartland homescreen. Mobile.
Home screen
Heartland donation flow screen. Mobile.
Donation flow
Heartland charity directory screen. Mobile.
Charity directory
Click to see all mobile design screens.

Desktop

Heartland charity homepage: desktop
Home screen - Desktop
Heartland charity donation flow: desktop
Donation flow

Outcome & Next Steps

Outcome

This design solution offers visitors an intuitive and easy way to find their charity, discover a reputable one, and has flexible payment options.

Metrics

Data shows an increase in user completion rates and “likely donor” scores.

Next Steps

  • Explore positive ways to communicate and reinforce the impact users have because of their donations.
  • Future usability studies would provide valuable feedback to add features and refine design aspects.

Case Studies

Mobile phone with timekeeping app floating above an orange and violet background.

Want to know more?

Check out the about page, reach out on social, or drop me a message. Thanks!

About

Steve Carlton

Digital Designer

Work
|
About
|
Contact
Copyright © 2023 Steve Carlton