Helping Make a Lasting Impact

UI DESIGN & DEVELOPMENT | 4 WEEKS

Founded as an initiative within GBH in 2011, CDP is an independent public benefit corporation working on behalf of more than 230 public radio and television stations to share data across the system, analyze fundraising performance, and develop best practices.

As a UI/Front-end Developer, I recommended a redesign of legacy donation forms.

Problem

The digital Marketing Team designs and implements email fundraising campaigns and corresponding donation forms for public media stations.

• The forms were built on a legacy application, with little flexibility in layout and style.

• Different stations had their own forms, but they shared a common design. Any universal design change must be implemented across multiple forms, which can be time-consuming.

Solution

The solution consisted of two parts, with the goal of updating the forms, both in design and HTML.

• I redesigned the form to reduce the length and instead offer a more user-friendly 3-step process to complete the donation.

• I also implemented the design system of the HTML template and corresponding stylesheets (global and local) that all stations can use. The template can be adapted for generic donation forms as well as support thematic campaigns.

Design Features

• Optional hero image, which can be updated to match specific campaigns

• Station colors are picked up in UI elements, form status, field selection, and buttons.

• Two-column layout to support blurbs or relevant content on the left.

• Visual indication of form status, with clearly indicated sections for donation, personal, and payment information.

• Design adapted to different stations

• Addition of a goal

• Station colors for UI elements