Enhancing Donorbox Form Editor with Live Preview

The final product after the redesign includes a live preview, enhanced user experience for options, and a reorganized information architecture in the left sidebar for better navigation.

Role:  Product Manager
Duration: January 2023 – May 2023

Donorbox App

Donorbox is a leading SaaS non profit donations management app in the US. It employs around 150 people from around the world.

Goal Overview

The objective of this project was to enhance the form editor by integrating a live preview feature, which would allow users to see changes in real-time. The previous version of the editor only displayed static images, creating confusion for users who were unable to see how their edits impacted the final form. The focus was to improve usability, user experience, and conversion rates by enabling real-time feedback during form creation.

Additionally, we made incremental improvements to the UI and information architecture (IA) to make the editor more intuitive. One key improvement was reorganizing the left toolbar, ensuring essential options were more accessible. The existing onboarding flow showed a simplified version of the form editor to new users, which caused confusion as they believed the basic options were the only available features. Our solution was to display the full dropdown menu from the start.

‍

Existing Form Editor Design

Static Preview

The original form editor only displayed static images, meaning users couldn’t preview their changes in real-time, especially for features like color, amount, and currency, which led to user frustration.

Simplified First-Time Experience

First-time users were presented with only basic form options, causing confusion and frustration. Many users believed the editor lacked additional features until they reopened the editor for a second time, revealing more options.

‍

Goal 4: First-time users saw only essential options, causing confusion as they believed these were the only features.
Goal 1: After the user opens the editor for the second time, there is no color, amount, or currency preview—only a static image is displayed.

Challenge

Environment

The team worked across multiple time zones, requiring effective coordination between design, development, QA, and stakeholders to ensure progress. Jira was the central tool for managing project tasks, ensuring alignment between teams, and tracking the overall timeline and deliverables.

Limitations

Due to limited development resources, the team focused on incremental improvements rather than a complete redesign. It was important to avoid alienating power users—especially older users familiar with the current interface—while still enhancing the user experience with live preview and UI improvements.

‍

Product Management Process

1. Research & Discovery

User Feedback & Insights

We gathered critical feedback through user interviews and behavioral data from Hotjar. Power users expressed frustrations with the lack of a live preview, which made real-time form adjustments difficult. Additionally, users requested a “receipt” option to add custom thank-you messages after donations.

Research Conducted
  • User Research: Interviewed users to understand their challenges with the existing editor.
  • Hotjar Analysis: Analyzed Hotjar recordings to track user behavior and pinpoint areas of confusion.
  • Customer Surveys: Collected quantitative and qualitative feedback via user surveys.
  • Competitor Analysis: Assessed similar platforms in the donation space to identify best practices.
  • Internal Team Feedback: Sought insights from internal teams, including customer success and accounts, to better understand operational pain points.

2. Product Development & Execution

Wireframes and User Flow Development

Collaborating with the design team, I directed the creation of wireframes for the form editor’s new live preview feature. We ensured the wireframes reflected user needs by integrating real-time updates and improving the editor’s visual hierarchy.

Interaction Design & IA

Working alongside the UX/UI designers, I ensured that the information architecture (IA) was optimized. We moved misplaced options and restructured categories in a more intuitive manner, making navigation smoother for users.

Prototyping & Testing

I oversaw the development of interactive prototypes using Figma, which were then tested internally with stakeholders and selected users. Feedback was continuously gathered to iterate and refine the design.

‍

‍

Sketch illustrating some of the design changes made to the 'Essential' screen.

Cross-Functional Collaboration & Communication

Coordination with Development and QA Teams

I worked closely with the development team, using Jira to manage sprints and ensure that the implementation of the live preview feature was feasible given technical constraints. QA teams were engaged early to identify potential bugs and edge cases to be addressed during development.

Collaboration with Product Management and Stakeholders

I maintained ongoing communication with product management to ensure that the updated form editor met both business objectives and user expectations. Regular check-ins with stakeholders ensured that progress aligned with broader company goals, and their feedback was incorporated into design iterations.

‍

Comparison of the Amounts screen before and after the redesign, highlighting the addition of a live preview feature.
The redesigned Essential screen featured a live preview and an enhanced user experience for the left toolbar menu.
Amounts screen details
Payment screen
Form information screen
Post donation screen and form live preview

‍

User Testing & Iteration

User Testing

Internal teams—including product, customer success, and accounts—were involved in the initial testing phases to validate the redesign. We also conducted live user testing to gather real-time feedback from users, ensuring the updated features addressed key pain points.

Iteration

Based on user testing results, I oversaw the iteration process, making adjustments to the UI and interaction flows. Changes to the information architecture were made to improve clarity and enhance the overall user experience.

Live Testing & Hotjar Review

After the feature was deployed, we monitored user behavior through Hotjar, confirming that the live preview significantly improved the overall user experience by reducing confusion and increasing form creation efficiency.

‍

‍

Outcome

Impact Metrics

  • Customer Satisfaction: A post-release Hotjar survey showed a noticeable increase in customer satisfaction with the form editor.
  • Form Creation: Form creation rates improved by 10%, indicating that the live preview and reorganized options made the editor easier to use for first-time users.
  • User Confusion Reduction: The live preview feature reduced confusion, particularly regarding changes to color, amount, and currency options.

These metrics highlighted the success of the live preview feature and the importance of incremental changes, contributing to overall user satisfaction and engagement.

Hotjar survey with the question: "Did you find it easy to setup the form"

Key Learnings

This project demonstrated the value of data-driven decision-making and user-centered design in driving product enhancements. By focusing on incremental improvements, we were able to deliver impactful results without disrupting the experience for long-term users. Effective cross-functional collaboration and feedback loops were crucial in ensuring the success of the project.

My Contribution

  • Led comprehensive research efforts, including user research, competitor analysis, and feedback gathering.
  • Managed the product development process, including defining the user flow and coordinating with UX/UI teams.
  • Used Jira to manage project timelines, sprints, and task assignments across teams.
  • Facilitated cross-functional communication between development, QA, and stakeholder teams.
  • Directed live testing and oversaw post-launch performance metrics using Hotjar and GA4 to ensure continuous improvement.

‍