Empowering Clients to Customize Their Design Themes

Allow nonprofit staff to easily extend their organization's brand identity to DonorDrive, differentiate programs, and quickly pilot new campaigns.

UI Design
UI Copy
Prototyping

Background

DonorDrive provides new and existing clients with the ability to customize their brand assets (such as colors and fonts) on their DonorDrive site through paid custom projects. However, clients who opted not to customize their site were limited to a set of default themes that often didn’t align with their branding. This created a gap for clients who wanted more control over their site's appearance without paying for a custom project.

Additionally, DonorDrive staff spent hundreds of hours annually adjusting colors and fonts on behalf of clients, leading to inefficiencies and high operational costs. This lack of customization options put DonorDrive at a competitive disadvantage, as clients increasingly expect to have more control over their branding.

Goals

This project aimed to:

  • Enable clients to edit colors, fonts, and other elements of built-in (non-custom) DonorDrive themes.
  • Reduce the design hours required to launch a non-custom design theme.
  • Reduce the number of support tickets requesting changes to site colors and fonts.

Key Outcomes

This project empowered nonprofit admins to:

  • Apply their organization’s branding—including colors, fonts, and other style elements—across their DonorDrive site, all without needing a custom project.
  • Preview changes in real-time, making it easier for admins to visualize and adjust the look of their site on the fly.

As a result of this feature:

  • Design hours for launching non-custom client sites were reduced, streamlining the process and improving operational efficiency.
  • Support tickets related to color and font updates decreased, as clients are now able to make these changes themselves.

This improvement not only enhanced the client experience by providing more flexibility and control but also gave DonorDrive a competitive edge in the marketplace by offering a self-service customization solution.

My Role

My key responsibilities included:

Discovery Research

I initiated the first phase of the project by conducting discovery research to understand the level of design customization that clients needed and expected. I planned and facilitated interviews with clients to gather qualitative insights, and also coordinated two rounds of moderated usability testing to identify key pain points and validate potential solutions. This research helped us define the scope of features required to meet client needs and ensure the solution would be easy to use and impactful.

Design & Prototyping

Based on the insights from the research, I prototyped an interface that would allow clients to easily customize their site’s colors, fonts, and other stylistic elements. I used Javascript and heavily leveraged Axure's conditional logic capabilities so that prototype users could interact with it in a very realistic way. I worked closely with another product designer to ensure the design was consistent with DonorDrive’s design system. Additionally, I contributed to writing the UI copy, ensuring it was clear, user-friendly, and aligned with the overall design language.

Screenshot of the interface that displays all configurable elements in a custom palette
Screenshot of the interface that displays all configurable elements in a custom palette
Screenshot of the interface where a user configures the core colors for a custom palette.
Screenshot of the interface for editing a custom palette's core colors

Collaboration & Usability Testing

Throughout the design process, I collaborated with cross-functional teams to refine the interface and ensure that it met both client needs and technical requirements. I planned and facilitated two rounds of moderated usability testing with customers. The final design was polished and iterated upon based on their feedback, ensuring an intuitive and seamless user experience.

I created this spreadsheet to help track and prioritize issues that came up during usability testing.