Kindervelt
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
Team
6 UX designers
1 design lead
1 project manager
Tools
Figma
Timeline
May-August 2023
Responsibilities
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
Research
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:
-
What motivates users to donate to charitable causes, like Kindervelt?
-
Are users, especially non-members, able to understand what Kindervelt does?
-
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:
Interview Key Insights
1
Emphasize the social and community-focused aspect of Kindervelt
Actionable Item: provide information about different local Kindervelt groups on the website
2
Include and organize resources for current members to increase site engagement
Actionable Item: provide access to important forms and information current members may need
3
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
4
Use attention-grabbing aesthetics and a cleaner layout
Actionable Item: embed videos and photos and minimize scrolling
5
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.
Competitive Analysis Key Insights
1
Simplify navigation
Actionable Item: narrow down the menu items to make it easier for visitors to find what they need
2
Embrace community
Actionable Item: incorporate the social and community aspects of Kindervelt into the website to foster a stronger connection with our audience
3
Donate call-to-action
Actionable Item: add a prominent "Donate" call-to -action button in the navigation bar
4
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.
Sitemap
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:
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:
-
Include information about groups under the “Membership” heading
-
Create a “member resources” subpage that would include the forms and newsletter archive
-
Combine the calendar and major events into one “Events” page
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
.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.
.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.
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.
Throughout the design, we made sure to keep the focus of the site on increasing donations, membership, and community engagement:
-
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
-
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:
-
Make the site feel fun and informative by including graphics like the circles in the colored sections of each page
-
Make sure to use colors, headings, and spacing consistently across each page
.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:
Tablet
.png)
Mobile
.png)
Prototype
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.
Testimonials
"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