Customizable Campaign Widget

Any Flipcause campaign website has a corresponding simplified Widget page, which can be displayed as a popup modal on a website, embedded into a webpage, or linked to on its own as a separate webpage.

The Widget collects the same data and displays the same fundraising and engagement tools set for the campaign page, which can include donations/payments, volunteer sign-up, registration, sponsorships, an online store, and peer-to-peer fundraising. The Widget also features settings that are customizable independently from the campaign page, such as the colors, fonts, and banner settings. So while the Campaign Website often stands alone, the Widget can be adjusted to match a different set of design styles, serving as a seamless embed or popup modal on a pre-existing website.


Phase 1 — Original Version

Background

The purpose of the Widget is for nonprofit customers to integrate a suite of custom engagement tools directly into their websites. The team working on the product was the CEO, the CPO, and the Product Designer (me). We completed this version of the Widget in 2016 and continued to add features to it to the present day.

 

Problem

We built the Campaign Website Builder, which creates customizable webpages with a suite of fundraising tools hosted on Flipcause that nonprofits can utilize to engage with their supporters. However, many customers needed tools to integrate into a pre-existing website and not live on an external page.

 

Process

Role

I worked with the CEO and CPO to build the Widget. As the sole Product Designer, my role involved adapting sketches into high-fidelity, interactive prototypes, creating handoff materials, and working with developers to engineer, test, and release the product.

 

Users

  • B2B: Small, growing nonprofits with limited resources

    • Seek a certain look, feel, and functionality within the Widget

    • Generally non-technical roles, such as Marketing Manager, Accountant, or Founder

  • Nonprofit supporters

    • Donate, register, and otherwise engage with the nonprofit via the Widget popup or embed

 

Challenges

  1. Embeds require set dimensions

    • Horizontal real estate is limited

    • Customizations, including the number of tools activated, length of descriptions, and amount of data fields collected, will necessitate scrolling in many cases, and each page can differ in length

  2. Widget design calls for greater simplicity

    • The extensive customizations permitted on the Campaign Pages would not all work on the Widget—options needed to be reduced

  3. Users needed an easy method for installing Widgets on their own

    • They needed a simple process for selecting integration options and generating an integration code to use on their websites

  4. Popups and embeds have issues on mobile

    • Sessions can fail when supporters attempt to complete transactions from popups or embeds on mobile

Research

We surveyed and interviewed our customers to understand their needs. We synthesized the research we collected for Campaign Websites with additional data from customers who wanted Flipcause’s tools to integrate with nonprofit websites. We learned that customers wanted the following:

  1. Cohesive design
    Since Widgets are integrated into pre-existing websites, their design and customization options should allow for a seamless presentation. They should genuinely look like a part of the nonprofit’s website.

  2. Various integration options
    We presented the initial Widget as a popup, but some users also wanted the tools directly embedded on a page on their website.

 

Decisions

  1. Provide various integration options for users:

    • A direct embed on a webpage

    • A popup from a button in the page body

    • A popup from a floating button

  2. Build an Integration Center on the Dashboard

    • From here, users can select integration options, button color, and button font, and they generate code with instructions on how to install it on a website

  3. Reduce design options

    • To simplify the widget, we removed several options that are available on Campaign Pages:

      • Footer

      • Search and Share buttons in the header

      • Background images

      • Any information on the Home page other than calls-to-action, a single expanded tool, or banner/title/stats

    • We also added an option for users to remove the header, which is especially useful for direct embeds

  4. Focus on keeping information above the fold

    • We aimed to establish defaults that would show up above the default Widget height, 530px

      • Redesigned the Registration, Volunteer, Sponsorship, and Store pages to be in 2 columns for Widget

  5. Open the mobile view of the Widget in a new tab

    1. While imperfect, this solution resolves a critical session issue and allows supporters to smoothly complete transactions

 

Results

This version of the Widget is live for users. It is the most popular fundraising feature for customers and accounts for 60% of total transactions made on Flipcause (for a whopping $600,000,000 total raised on the Widget alone). Below are some examples of the Widget on demo sites.

 

This pop-up widget is configured with a Campaign Menu, which is a collection of card components that can be customized to display and link to any number of campaigns. Click here to see it live on a demo site, and then click the “Support Us” floating button.

 

The donation page on the pop-up widget — click here and select the “Donate” button to view on a demo site

 

In this example, the widget is embedded directly into a webpage. The store tool appears as a seamless part of the organization’s website.

 

Mobile versions of the Widget Campaign Menu, donation page, and store page. To optimize transaction sessions, the widget opens in a new tab on mobile.


Phase 2 — First Redesign

Background

A few years after developing the Widget, our team sought to reskin the entire front end, so I led a Widget redesign to pair with the Campaign Pages redesign that launched around the same time. From 2019-2020, I designed over 100+ pages to account for possible customizations and scenarios, and we developed the project through the front-end phase.

 

Problem

The Widget design was outdated and in need of modernization. Its components needed improvement and consistency with the new Campaign Pages design.

 

Process

Role

I worked within the Product Team (consisting of a Tech Director, Product Manager, and Product Designer (me)), creating initial sketches and iterating with their feedback. Together, we conducted research, collecting feedback from Sales, Customer Success, and Customer Experience teams who worked directly with customers.

I designed the new components and interactive prototypes, which were reviewed and approved by stakeholders. Once I delivered handoff materials, I also acted as Product Manager for this initiative, managing the pipeline, engineering, and quality assurance as we developed the project on the front end.

 

Challenges

  1. Embeds require set dimensions
    Like the first version, the Widget redesign still had to be created within the constraints of the default installation dimensions (530px height). We could not alter this without reinstalling thousands of customers’ Widgets, which we did not have the resources to do. Therefore, I had to work to ensure that these customizable popups and embeds kept content and buttons largely above the fold.

  2. Engineering required an entire rebuild
    The original Widget architecture did not allow for a simple reskinning of components. Instead, we had to rebuild the entire product on the front end and apply and test complex functionality.

  3. Developing an entirely new design > development approach
    In this build, we switched from dated Adobe tools to Sketch and InVision. To minimize duplicates and an unsustainable code structure, we created a database of components with CSS names attributed to each.

Research

I consulted the Customer Experience and Customer Success teams for requests and feedback from our customer base, the CEO for business and product vision, and the Engineering team to devise what is possible in implementation. We identified the following needs:

  1. Design improvements
    Even on a desktop, the fonts on the Widget in some areas can be too small to read comfortably. As much as possible, we needed to maximize real estate in the limited frame while accounting for optimal usability (large enough buttons, readable font sizes, and action items above the fold).

  2. Improved Peer-to-Peer tool integration
    The current version of the Peer-to-Peer tool takes the user out of the embed/popup and opens a new tab. Users wanted the tool to remain inside the Widget and not take users away from their website.

 

Decisions

  1. Mobile design optimization

    • I increased font and button sizes and decreased margins for improved readability and usability on mobile.

    • I integrated responsive images and cards on mobile view.

  2. Streamline components and update UI

    • Component consistency and product scalability were paramount, and I sorted elements into component types for improved UX and development.

    • I updated product writing and styling for clarity.

    • I redesigned the tools icons and implemented code-based icons across the platform.

  3. Integrate Peer-to-Peer tool with new design

    • I redesigned the Peer-to-Peer flow to remain in the Widget (without opening a new tab). I accounted for the decreased real estate by removing some initial sign-up features that the supporter could later adjust on a full-page web browser.

  4. Aim for fewer clicks

    • We combined the donation description with the amount selector so that all descriptions would be viewable without users having first to click the amount.

 

Redesigned store item page on Widget mobile

 

Redesigned Peer-to-Peer page on Widget mobile

 

Redesigned Checkout page on Widget desktop

Redesigned Peer-to-Peer sign up page on Widget desktop

 

Results

Like the mirroring Campaign Pages redesign, this version features new font defaults, modern button styles, clearer hierarchy, and better consistency throughout. It also makes better use of the limited horizontal space of the Widget pop-up, with a focus on action items above the fold.

I managed the product development of this project through front end development. Below you can see the results of the project.

 

In this example, the Widget homepage has been configured to show all 6 engagement tools, as well as all possible display elements: banner, title and tagline, progress bar, and stats. This configuration triggers the short, stacked tools cards that maximize horizontal space.

 

The Widget donation page — the selector buttons now feature the donation amount description, so it can be seen before click

 

Mobile versions of the home, donation, and store pages

 

Phase 2 — Second Redesign

The second redesign of the Widget was not officially launched, although the creation of a Design Systems Library in Figma for the second Campaign Websites redesign allows for an easy imaging of what it could be.

 

The second widget redesign, using components from the newer Design System Library

Previous
Previous

Fundraising Campaign Website Builder

Next
Next

Flipcause User Dashboard