UX Designer & Front-End Developer
pure-waters-donation.png

Email Platform

Brick River Email Platform

Project: Brick River Email Platform Product Design & Front-End Development

Description: As the lead designer and front-end developer, I helped build the updated Brick River Email Platform—a modern, flexible email creation tool used by nonprofits to design, send, and manage their email campaigns. My work focused on configuring the email editor, improving the authoring workflow, and ensuring emails render consistently across all major clients.

Software: Figma, Visual Studio, Git, Litmus, Email on Acid, HTML, CSS, Javascript, C# / Razor

Design Question: How might we redesign the email platform to create a smoother user flow and a more flexible, modern email editor?

 

User Personas

 

Design Requirements

  1. Streamlined User Flow
    Simplify the steps for creating, editing, testing, and sending emails to reduce friction and make the process easy to follow.

  2. Improved Email Editor Experience
    Update the editor to feel modern, intuitive, and consistent, with clear formatting tools and an easier way to insert content.

  3. Reusable Content & Custom Components
    Enable users to drop in buttons, snippets, templates, and other predefined elements directly from the CMS.

  4. Cross-Client Email Compatibility
    Ensure emails render reliably across Outlook, Gmail, iOS Mail, and other major clients through strict HTML/CSS standards.

  5. Responsive, Accessible Output
    Support mobile-friendly layouts and accessible text structure within the constraints of email-safe code.

  6. User Testing & Iteration
    Validate workflows and editor improvements through continuous testing and Litmus verification, refining based on real user behavior.

 

Donation Page Figma Designs

Everything from the donation page elements, form error messages, to the confirmation page.

Beach clean up donation page figma design layout
 

Defining the User Flow

 

Donation Form Prototype

Below is the prototype for a streamlined, user-friendly donation form. Designed with the least number of form fields possible and labels placed above the input fields in order to maximize donor engagement.

Donations form user flow and prototype
Interactive Prototype
 

Development

I configured and customized the Froala-based email editor to create a clear, intuitive interface for building responsive email layouts. This included extensive front-end work in JavaScript, HTML, and CSS, along with custom integrations that allow users to insert reusable content, snippets, buttons, templates, and dynamic fields.

A major focus of the project was cross-client reliability. I tested thousands of emails using Litmus and manual checks across Outlook, Gmail, iOS Mail, and other clients to ensure consistent rendering and accessibility. I also performed user testing and iterative improvements to strengthen the authoring experience.

Key Technologies

  • JavaScript – Editor behavior, custom features, and UI interactions

  • HTML / CSS – Email-safe markup and responsive layout patterns

  • Froala Editor – Configuration, extensions, and integration

  • C# / Razor – Dynamic content and CMS integrations

  • Litmus – Cross-client rendering tests

  • Git – Version control and team collaboration

Challenge

The existing email platform felt outdated and difficult to navigate. The user flow involved too many steps, the editor lacked clarity and modern functionality, and emails were not rendering consistently across major clients like Outlook, Gmail, and iOS. Users needed a smoother way to build emails, insert reusable content, and trust that their message would display correctly everywhere.

Solution

I redesigned the email creation experience by simplifying the workflow and upgrading the editor interface. As the lead designer and front-end developer, I configured and extended the Froala editor, built custom tools for inserting snippets, buttons, and templates, and implemented email-safe HTML/CSS patterns to ensure cross-client reliability. I tested thousands of emails through Litmus and user feedback, refining the UI to make the process clearer, faster, and more dependable.

 

The Final Product

The redesigned Brick River Email Platform delivers a clearer workflow, a modernized editor, and reliable rendering across all major email clients. Users can build emails quickly, insert reusable content from the CMS, track engagement, and manage their subscriber lists—all within a streamlined interface built for nonprofits.

Key Features:

Reach the Right People

  • Unlimited subscription lists

  • Track subscriber activity and interests

  • See who signs up and how they engage

Track What’s Working

  • Opens, clicks, bounces, and unsubscribes

  • Compare campaign performance

  • View detailed activity logs

Keep Your Data Clean

  • Remove duplicates and invalid addresses

  • Let subscribers update their own information

  • Keep all data organized in one place

Design Emails in Minutes

  • Drop in content directly from the CMS

  • Save emails as reusable site content

  • Responsive, email-safe templates

  • Schedule emails to send later

 

Conclusion

The redesigned email platform now gives users a cleaner workflow, a more intuitive editor, and reliable email rendering across all major clients. The updated experience reduces friction, improves consistency, and empowers nonprofits to create professional, accessible emails with confidence. It has become one of Brick River’s most widely used and trusted tools.