top of page


Kindervelt is the largest auxiliary of the Cincinnati Children’s Hospital and one of Greater Cincinnati’s outstanding volunteer organizations, dedicated to raising funds for Cincinnati Children’s Hospital Medical Center

Role: UX Designer


At a Glance


6 UX designers

1 design lead

1 project manager




May-August 2023


User Interviews

Information Architecture

Wireframing & Prototyping

The Goal

Redesign the main pages of Kindervelt's website to:

  • Increase membership and donations

  • Raise awareness and community participation

  • Make it more responsive, scannable, and informative 


User Interviews

One of my team members and I conducted user interviews via Zoom with four Kindervelt members and two 

non-members to answer the following questions:​

  1. What motivates users to donate to charitable causes, like Kindervelt?

  2. Are users, especially non-members, able to understand what Kindervelt does?

  3. What would encourage both current and new members to engage more with Kindervelt as an organization?

Affinity Diagram

To begin organizing our results, we created an affinity diagram. The portion of the affinity diagram pictured below contains some of the key areas of feedback:

affinity diagram part 2.jpg
affinity diagram part 3.jpg

Interview Key Insights


Emphasize the social and community-focused aspect of Kindervelt 

Actionable Item: provide information about different local Kindervelt groups on the website


Include and organize resources for current members to increase site engagement

Actionable Item: provide access to important forms and information current members may need


Highlight upcoming events to motivate people to use the site

Actionable Item: provide an events calendar and overview of upcoming events with an RSVP option


Use attention-grabbing aesthetics and a cleaner layout

Actionable Item: embed videos and photos and minimize scrolling


Use clear messaging to help new members understand what Kindervelt is about

Actionable Item: highlight fundraisers to demonstrate Kindervelt's impact and explain the joining process

Competitive Analysis

While I worked on the user research, some of my other teammates completed a competitive analysis of the websites of 4 other nonprofit organizations that share similar goals to that of Kindervelt.

Screen Shot 2024-01-09 at 5.38.55 PM.png

Competitive Analysis Key Insights


Simplify navigation

Actionable Item: narrow down the menu items to make it easier for visitors to find what they need


Embrace community

Actionable Item: incorporate the social and community aspects of Kindervelt into the website to foster a stronger connection with our audience


Donate call-to-action

Actionable Item: add a prominent "Donate" call-to -action button in the navigation bar


Improve visual design elements

Actionable Item: incorporate strong contrast and fun visual elements that align with Kindervelt's branding

Starting the Design

Information Architecture

Before we jumped into wireframing, we first wanted to review Kindervelt's current information architecture and suggest some changes in order to put more focus on the membership and donation pages, since those were our main goals for our redesign. For instance, the current site had eight items in the navigation menu, which we felt was visually overwhelming, particularly for new users.


Two of my team members and I reviewed Kindervelt's current sitemap in order to discuss the best way to reorganize and consolidate the information on Kindervelt's site:

Screen Shot 2023-08-23 at 6.57.09 PM.png

I proposed the following key changes to reduce the number of items in the navigation menu to five and draw the user's attention to how to join and donate to Kindervelt:

  1. Include information about groups under the “Membership” heading

  2. Create a “member resources” subpage that would include the forms and newsletter archive

  3. Combine the calendar and major events into one “Events” page

Screen Shot 2023-08-17 at 12.58.26 PM.png

User Flows

My team members and I also created three user flows to demonstrate how users would achieve the primary goals of the site using our proposed sitemap:

User Flow 1: Become a member

User Flow 2: Make a donation

User Flow 3: Sign up for an event

Kindervelt Information Architecture (2).png

Component Library

While my group worked on the information architecture, the rest of our team created a component library to create consistent branding as we redesigned the site. They created a color palette of three primary colors that incorporated Kindervelt's current green branding and introduced two new colors to use as secondary and tertiary colors. They also chose fonts to use for headings and body text and created an icon library and grid system to use in our designs.

image (1).png

Refining the Design

Low-fidelity Wireframes

Once we got the Kindervelt team's approval of our information architecture and design system, we created low-fidelity wireframes of the key pages of our site. Each member of the team took a page, so I was responsible for designing the membership page.

Membership Page.png

High-fidelity Wireframes

I first created a high-fidelity wireframe that was very similar to the low-fidelity version. However, after discussing the mockup with the Kindervelt team, I reorganized the page to put the membership details first so that new users can learn more about what being a member means in general before choosing what type of member they'd like to be.

Membership 1.png
Membership 2.png

Throughout the design, we made sure to keep the focus of the site on increasing donations, membership, and community engagement:

  1. We added “donate” and “join us” call-to-action buttons in the header and throughout the homepage to draw the user's attention to those actions

  2. We added a footer that includes links to key pages that users may be looking for and once again encourages users to either donate or join Kindervelt

Final Design

After viewing our initial high fidelity designs, the Kindervelt team wanted more color on the page, a different color for the footer, and more fun graphics, which we incorporated into our iterations. Below is the final version of the membership page after the team decided on how stylize the overall website to: 

  1. Make the site feel fun and informative by including graphics like the circles in the colored sections of each page

  2. Make sure to use colors, headings, and spacing consistently across each page

Membership_Web_Final (1).png

Responsive Designs

Once we'd finalized the desktop designs, we also created designs for tablet and mobile screen sizes to ensure a responsive website design. Below are the responsive designs I created for the membership page:


Membership Tablet (1).png


Membership Mobile (1).png


The final result was an entirely redesigned and responsive website with new, consistent branding and a primary focus on encouraging membership and donations:

You can also view the full prototype here.

Reflection & Takeaways

This project was a great experience in learning about the strengths and challenges of working with a team of other designers. 

Working with a team opened the possibility of:

  • bouncing ideas off each other, allowing us to create a more creative use of color and graphics throughout the site

  • learning from my team members, from whom I learned how to use auto layout and design with a grid system to ensure consistent spacing of content

  • balancing out each others' strengths, such as when we split the team to work on the information architecture and design system simultaneously

  • getting more done on a tight timeline, since we could divide up tasks amongst the team


At the same time, working with a team introduced the following challenges:

  • ensuring that we were using consistent spacing, color, and overall styling across the pages

  • keeping the Figma file organized, since we were all working on the file at the same time

Overall, I found working with a team to be extremely invaluable, and I learned how key communication is when designing with others to keep the final product organized and consistent. 


It was also really helpful to meet with the Kindervelt team on a weekly basis, as we were able to continually iterate, taking the client's needs and insights into account at each step. 

If we'd had more time to complete this project, it would have been great to conduct a round of usability testing with our final prototype to get additional user feedback to incorporate into another iteration of our designs before handing them off to Kindervelt's developers.


"Thank you team! With one week to go the new look is fresh and current. Great team work…Awesome job!"

- Cindy Burger, President of Kindervelt

"The DFG team was amazing! They were methodical in the approach form user research, survey, affinity diagram, design UX/UI, and helped us develop a formal design system. The designers paid attention to our platform and asked questions to be sure their designs could be implemented. Early in the design each member worked on a section of the website which allowed us to see different interpretations of our design system. This led to a fantastic final uniform look and feel! Thank you for all the hard work in our short design cycle."

- Jim Young, Volunteer Developer for Kindervelt

bottom of page