OVERVIEW
I was tasked with leading the design of a new Visual Donation Form Builder, a modern, block-based experience that would redefine how forms were built, improve discoverability of GiveWP's features, and serve as the foundation for the company's next stage of growth.
PRODUCT
GiveWP
ROLE
Product Designer
DELIVERABLES
Research, UI Design, Usability Testing, Prototype, Stakeholder Engagement
GiveWP powers donation forms for over 100,000 nonprofits worldwide. At the core of its product was a legacy form editor, the tool every fundraiser relied on to create donation forms. While functional, the editor was showing its age: it was option-heavy, unintuitive, and disconnected from the live experience of building a form.
Screenshot of the legacy editor
This wasn't just a usability issue. The form editor was central to GiveWP's product adoption, customer satisfaction, and revenue growth.
This project wasn't simply about making the UI prettier. It required balancing three critical dimensions:
User Experience: Nonprofit fundraisers needed a faster, more intuitive way to create forms without feeling overwhelmed.
Business Goals: GiveWP needed to reduce onboarding friction, increase adoption of advanced features, and strengthen retention in a competitive WordPress ecosystem.
Technical Feasibility: The new builder had to integrate with WordPress' Gutenberg block system, support dozens of existing add-ons, and scale without breaking existing customer workflows.
The challenge was to deliver a transformational upgrade without alienating a large base of legacy users, while aligning executives, PMs, engineers, and support teams around a shared vision of the future.
I began by auditing the existing product to understand every workflow and pain point. I then turned to products like Gutenberg, Gravity Forms, WP Forms, etc, to see how block-based builders approached the problem.
A clear insight emerged: builders often forced users into one of two extremes. Either everything happened in one cluttered space, or users had to toggle between building and previewing.
This insight shaped the core principle of my solution: separate structure from design but keep them in the same visual space.
Of course, insight alone doesn't make design simple. As I started shaping the builder, challenges piled up.
Onboarding friction: My first attempt at a guided tour had 9 steps. Through our internal testing, we noticed most people were skipping the guided tour.
I iterated several design concepts, video walkthroughs, interactive tours until we landed on a streamlined 5-step guide that actually worked based on the time and engineering constraints we had for this project.
High learning curve: Existing users were used to the legacy flow of creating forms, so the new experience initially felt unfamiliar.
In the legacy editor, users began by selecting a form template, then moved on to form settings. In the new Visual Donation Form Builder, they landed in Build Mode first, which disrupted their expectations.
To align with users' mental models, I updated the creation flow so that the first step was once again the template selection modal. This preserved familiarity while still introducing the benefits of the new builder.
Screenshot of the template selection modal
However, this raised a new question:
Navigation issues: I had three design concepts to switch from Design Mode to Build Mode.
During testing, the Build Mode still had issues with navigation between the block settings and form settings. There was ongoing confusion about where to find the form settings within Build Mode.
Screenshot of the Build Mode with Form and Block Settings in the same side panel
I rethought the navigation structure to clearly separate block settings, form settings, and design settings, reducing friction and making the builder easier to explore.
There was also concern about Design Settings being overloaded with too many options. To address this, we ran a card sorting exercise to see how testers naturally grouped these options.
The results helped us reorganize them into clearer categories like General and Styles, matching users’ mental models and improving overall navigation.
Screenshot of the card sorting results in Maze
Add-on Compatibility: The legacy editor supported dozens of add-ons, but the new builder didn't have all the add-ons compatible close to the major release. Stakeholders feared backlash from our users, especially the paid users who would expect the add-ons to work with the visual donation form builder.
I proposed a phased rollout, launch the builder as an optional “try it out” feature, provide migration tools, and clearly note which add-ons were supported. This reduced risk, reassured leadership, and gave us time to improve coverage.
The launch of the Visual Form Builder had measurable impact on both users and the business:
Adoption & Engagement: ~20% of users adopted the builder within weeks.
Efficiency Gains: The new design tab allowed users to test interactions without leaving their workflow, eliminating the need to preview on a separate page.
Increased Feature Visibility: The visual canvas surfaced advanced features that had been buried, improving cross-sell opportunities for add-ons.
This project stretched me beyond execution into product and organizational leadership:
Systems Thinking: I created a scalable mental model by separating skeleton, design, and global settings.
Decision-Making Under Constraints: Limited time and add-on support required pragmatic trade-offs and creative fallback experiences.
Stakeholder Alignment: I guided executives, PMs, engineers, and support teams toward a shared vision, even during high-pressure moments.
Leading Through Change: By reframing risks and designing phased rollout strategies, I helped the company and its users transition smoothly to a new way of building donation forms.
The Visual Donation Form Builder reshaped how nonprofits approached fundraising online, empowering them to build with clarity and confidence.