Web Design

Heart Beats Website

Heart Beats Children’s Society is a nonprofit organization supporting families of children with congenital heart disease. This project involved redesigning their website to modernize its look, improve accessibility, and create stronger communication channels with their community. The goal was to deliver a warm, trustworthy digital presence that reflects the organization’s compassionate mission.

Mockup of the Heart Beats Children’s Society website displayed on smartphone, tablet, and laptop screens, showcasing a responsive design with a hero image of a child holding a teddy bear and a call-to-action to donate or volunteer.
Mockup of the Heart Beats Children’s Society website displayed on smartphone, tablet, and laptop screens, showcasing a responsive design with a hero image of a child holding a teddy bear and a call-to-action to donate or volunteer.
Mockup of the Heart Beats Children’s Society website displayed on smartphone, tablet, and laptop screens, showcasing a responsive design with a hero image of a child holding a teddy bear and a call-to-action to donate or volunteer.

My Role

Web Designer & UI Developer

Duration

6 months (Ongoing)

Tools

Squarespace, Go Daddy, MailChimp, Adobe

Overview

/Challenge

/Challenge

/Challenge

The existing Heart Beats website lacked visual hierarchy, accessible navigation, and mobile responsiveness. It was difficult for families and donors to find critical information, sign up for programs, or engage with the community. The site also lacked integration with modern communication tools, making it harder to share updates and build lasting connections.

/Solution

/Solution

/Solution

I partnered with Heart Beats to completely reimagine their website with a user-first approach. The redesign included a simplified navigation system, updated brand visuals, and responsive layouts optimized for mobile and desktop. We also integrated newsletter signups and improved content architecture.

Research

1. Client Discovery & Stakeholder Interviews

I began with a collaborative consultation session to define key goals, audiences, and expectations. This helped align design efforts with organizational needs and constraints.

2. Trend & Inspiration Scan

I conducted a visual and UX audit of similar nonprofits to identify opportunities for improving engagement, hierarchy, and emotional tone.

3. Site Content & Functionality Audit

A full review of the existing site revealed inconsistencies in messaging, content overload, and navigation gaps that needed refinement.

4. Iterative Client Feedback Sessions

Throughout the design process, I presented wireframes and mockups in stages, allowing for direct feedback and refinements in real time.

Sketch wireframes and sitemap planning for the Heart Beats Children’s Society website, featuring hand-drawn layout ideas, user flow, and categorized navigation planning.
Sketch wireframes and sitemap planning for the Heart Beats Children’s Society website, featuring hand-drawn layout ideas, user flow, and categorized navigation planning.
Sketch wireframes and sitemap planning for the Heart Beats Children’s Society website, featuring hand-drawn layout ideas, user flow, and categorized navigation planning.

Finding 1 - Hard-to-Find Information

Visitors struggled to locate event details, program sign-ups, or key donation information, leading to high drop-off rates.

Finding 1 - Hard-to-Find Information

Visitors struggled to locate event details, program sign-ups, or key donation information, leading to high drop-off rates.

Finding 1 - Hard-to-Find Information

Visitors struggled to locate event details, program sign-ups, or key donation information, leading to high drop-off rates.

Finding 2 – Inconsistent Brand Experience

Finding 2 – Inconsistent Brand Experience

Finding 2 – Inconsistent Brand Experience

Finding 3 – Limited Accessibility

Finding 3 – Limited Accessibility

Finding 3 – Limited Accessibility

Design

The new design centered around a calm, clean layout with warm tones and soft typefaces that reflect the emotional mission of Heart Beats. I created modular layouts that scale across devices, intuitive page flows that guide users to take action, and built-in integrations with Mailchimp for streamlined communications.

Mobile mockups displaying the Heart Beats Children’s Society homepage and mission page, showcasing a clean, accessible layout with clear calls to action for donation and volunteering.
Mobile mockups displaying the Heart Beats Children’s Society homepage and mission page, showcasing a clean, accessible layout with clear calls to action for donation and volunteering.
Mobile mockups displaying the Heart Beats Children’s Society homepage and mission page, showcasing a clean, accessible layout with clear calls to action for donation and volunteering.
Tablet mockup of the Heart Beats Children’s Society homepage highlighting the organization’s mission to support children with heart disease, with clear messaging and a clean, responsive layout.
Tablet mockup of the Heart Beats Children’s Society homepage highlighting the organization’s mission to support children with heart disease, with clear messaging and a clean, responsive layout.
Tablet mockup of the Heart Beats Children’s Society homepage highlighting the organization’s mission to support children with heart disease, with clear messaging and a clean, responsive layout.
Floating desktop screen panels showing different sections of the Heart Beats Children’s Society website, including homepage hero image, board of directors bios, and family-focused community event photos.
Floating desktop screen panels showing different sections of the Heart Beats Children’s Society website, including homepage hero image, board of directors bios, and family-focused community event photos.
Floating desktop screen panels showing different sections of the Heart Beats Children’s Society website, including homepage hero image, board of directors bios, and family-focused community event photos.

Results

Note: The Project is still in development, but these are anticipated outcomes based on testing and progress.


  • Navigation success rate improved by 70% in early feedback sessions.

  • Stakeholders report higher engagement and clarity during feedback presentations.

  • Content update process reduced from hours to minutes due to simplified CMS structure.

Reflection

This project reminded me how powerful design can be when it’s grounded in empathy and built in partnership with the people it serves. Collaborating with Heart Beats was not just about creating a beautiful website; it was about giving families a space that feels supportive and trustworthy. If given more time, I would expand testing to include real families in the community and refine the onboarding process for future volunteers and donors. I look forward to the full launch in September 2025, knowing this platform will make a lasting difference.