HAOTIAN QIAN

03 / UX RESEARCH + UI

INTERMOUNTAINHEALING HEARTS

A responsive nonprofit website redesign focused on donation discoverability and sponsor engagement.

CLIENT
Intermountain Healing Hearts
PROJECT
Website Redesign
PROJECT TYPE
UX / UI Team Project
UX/UI · RESEARCH · RESPONSIVE WEBTEAM PROJECT
Final Intermountain Healing Hearts desktop homepage design
Final Intermountain Healing Hearts mobile homepage design

01 / PROJECT CONTEXT

Improving how peoplesupport the community.

Intermountain Healing Hearts is a nonprofit organization supporting children and families affected by congenital heart disease.

The redesign explored how the website could better support three important goals identified during the project.

  1. 01Registration
  2. 02Engagement
  3. 03Donations
TEAM PROJECT

These three goals came directly from the original project objective. This case study documents the collaborative research and design process completed by the project team.

  1. 01 / DISCOVER
  2. 02 / DEFINE
  3. 03 / DEVELOP
  4. 04 / DELIVER

Understanding theorganization first.

RESEARCH / STAKEHOLDER INTERVIEWS

What mattered tothe organization?

Alex Howard
PRESIDENT
Melissa Andrew
EXECUTIVE DIRECTOR
Christina Davis
EXECUTIVE DIRECTOR
FINDING 01

COMMUNITY NETWORK

Most if not all donations come through the community.

FINDING 02

SPONSORSHIPS

Largest net contributor to IHH funds.

FINDING 03

STREAMLINE WORK

Increased administrative time directing people around the website reduces time available for families and other work.

RESEARCH ARTIFACT / STAKEHOLDER INTERVIEW SUMMARY
Stakeholder interviews research slide with Alex Howard (President), Melissa Andrew and Christina Davis (Executive Directors), summarizing Community Network, Sponsorships and Streamline Work
Stakeholder interview summary used to identify three core organizational priorities.

RESEARCH / SURVEY

How were memberscurrently donating?

AUDIENCEIHH Members
36TOTAL RESPONSES
50%HAD DONATED PREVIOUSLY
RESULT

Members donate at IHH events using whichever method is easiest at the time.

Survey research slide: IHH members, 36 total responses with 50% having donated previously, alongside the Google Forms donation questions

RESEARCH / COMPETITIVE LANDSCAPE

How were similarorganizations communicating?

The team reviewed comparable nonprofit websites to understand common approaches to donation visibility, storytelling, community information, and calls to action.

This helped provide context for how IHH’s existing experience could be reorganized.

Competitor analysis board comparing the Project Heart and CHD Coalition homepages alongside a red heart-themed page with Community, Awareness and Research sections
Competitive analysis of comparable nonprofit websites.

RESEARCH / USABILITY TEST

The problem was nota lack of information.

It was finding it.

  1. 01 / OBSERVATION

    Placement is key

    “Clicked ‘More Info’ in main body, not ‘Donate’ on sidebar.”
    “Where is the PayPal link?”
  2. 02 / OBSERVATION

    Information needs reorganization

    “Shouldn’t ‘Support’ include donations?”
    “Why isn’t Sponsorship under FAQ?”
  3. 03 / OBSERVATION

    Too long; didn’t read

    “Too much info all at once.”
    “Did not read all of info on donate page.”
  4. 04 / OBSERVATION

    Needs visual relief

    “Pictures would help.”
    “Needs more white space.”
Usability test synthesis board of sticky notes grouped as Placement is key, Info needs re-organization, Too long; didn’t read, and Needs visual relief
Original usability test synthesis
  1. 01 / DISCOVER
  2. 02 / DEFINE
  3. 03 / DEVELOP
  4. 04 / DELIVER

Turning researchinto a focused problem.

DEFINE / PROBLEM STATEMENT

Finding a way to giveshould not be difficult.

PROBLEM STATEMENT
“Prospective donors/business partners have a hard time locating ways to donate/sponsor which leads to losses in prospective funding and revenue.”
HYPOTHESIS

“By designing intuitive navigation and streamlining processes, prospective donors/business partners can easily send donations/inquiries which potentially increases overall funding.”

Six people stand on an arena floor holding a large ceremonial check for five thousand dollars made out to Intermountain Healing Hearts

DEFINE / PERSONA

Expanding the audiencefrom member to sponsor.

The project originally considered a member-focused persona. As research pointed toward sponsorships as the largest net contributor to IHH funds, the team introduced a sponsor-focused persona.

OLD / MEMBER-FOCUSED
Coco persona card: 28, St. George, UT, IHH member, married, HR specialist, one child with CHD

Coco

AGE
28
LOCATION
St. George, UT
ROLE
IHH Member
KEY CHARACTERISTICS
  • Struggles to balance her job and her family
  • Grateful for the IHH community and feels less alone
  • Wants to contribute back to IHH through volunteering or attending events
  • Financially strained from medical treatments for her son
NEW / SPONSOR-FOCUSED
Hannah Brown persona card: 40, Salt Lake City, UT, prospective sponsor, married, Customer Development Manager at Costco, one dog

Hannah Brown

AGE
40
LOCATION
Salt Lake City, UT
ROLE
Prospective Sponsor
STATUS
Married
CHILDREN
1 Dog
POSITION
Customer Development Mgr
ORGANIZATION
Costco
GOALS / NEEDS
  • Partner with local nonprofits to meet quarterly quota
  • Find local nonprofits that align with the company’s values
  • Needs an easy way to reach out to nonprofits
  • Needs an ETA after initial outreach

DEFINE / SYNTHESIS

Mapping what userssay, think, do, and feel.

Empathy map for Coco with Says, Thinks, Does and Feels quadrants of sticky notes, alongside Goals and Pain Points columns
The empathy map consolidated observations into behaviors, thoughts, goals, and pain points.

DEFINE / SCENARIO

Designing arounda real sponsorship journey.

Hannah discovers IHH through a colleague, visits the website, finds sponsorship information, submits an inquiry, receives confirmation, and later receives a response.

Six-frame hand-drawn storyboard of Hannah discovering IHH, receiving the website, finding sponsorship info, submitting an inquiry form, and receiving a confirmation email
Original six-frame storyboard

DEFINE / USER JOURNEY

The experience did notend at form submission.

  1. STAGE 01Business Partnership Referral
  2. STAGE 02Completing Inquiry Form
  3. STAGE 03Receiving Confirmation
User journey map with the Hannah Brown persona panel and a seven-step experience across Business Partnership Referral, Completing Inquiry Form and Receiving Confirmation, with an emotional curve below
Hannah Brown user journey map, including the emotional journey across each stage
  1. 01 / DISCOVER
  2. 02 / DEFINE
  3. 03 / DEVELOP
  4. 04 / DELIVER

Moving from ideasto structure.

DEVELOP / LOW FIDELITY

Starting with thecontent hierarchy.

Early sketches explored how homepage content, donation information, sponsorship information, and supporting content could be reorganized before visual styling was introduced.

Collage of hand-drawn paper prototype sketches covering the homepage, donation module, more ways to give, and donation form states

DEVELOP / MID FIDELITY

Testing structurebefore visual polish.

Mid-fidelity desktop and mobile wireframes translated the paper sketches into structured, responsive layouts.

Mid-fidelity desktop and mobile wireframes for the homepage, corporate partnerships page, and donation page

DELIVER / DESIGN RESPONSE

Answering whatthe research showed.

  1. 01

    Clearer navigation

    Key actions such as donations and sponsorship information became easier to locate.

  2. 02

    Stronger information hierarchy

    Long blocks of information were reorganized into more digestible visual sections.

  3. 03

    Responsive experience

    Desktop and mobile interfaces were designed as part of the same system.

FINAL PROTOTYPE

Explore the prototype.

OPEN IN FIGMA ↗

NEXT STEPS

The project ended.The questions did not.

Proposed next steps from the original project — not yet completed.

  1. 01Continue iterating the hi-fidelity prototype using 5-second testing results.
  2. 02Research and develop the sponsorship link sharing feature from the events page.
  3. 03A/B testing on the donation checkout process.

PROJECT PROCESS

Two diamonds,four phases.

  1. DISCOVER
    • Stakeholder Interviews
    • Survey
    • Competitor Analysis
    • Usability Test
  2. DEFINE
    • Problem Statement
    • Persona
    • Empathy Map
    • Storyboard
    • User Journey
  3. DEVELOP
    • Paper Prototype
    • Mid-Fidelity Prototype
  4. DELIVER
    • Responsive High-Fidelity Prototype
TEAM PROJECT

Intermountain Healing Hearts Redesign was completed as a collaborative UX design project.

This case study presents the shared research and design process documented in the original project materials.

Individual responsibilities are intentionally not attributed where the original project documentation does not clearly identify ownership.