Dynamic HTML Email Receipts
Every transaction generated through a nonprofit’s Campaign Website or Widget generates a custom supporter receipt. These receipts are designed with generality and flexibility in mind, as to not impose any branding incompatible with an organization’s style guide. Users can tailor these receipts from the Dashboard with campaign-specific logos as well as custom messages utilizing a rich-text editor that can include images and several text formatting options.
In addition to transaction receipts, there are several other email communications sent by Flipcause, including notifications sent to nonprofit customers about supporter activity, security alerts, customer sign-up confirmations and next steps, and internal company alerts and requests.
Background
Flipcause sends out several communications: emails to customers (nonprofit organizations), emails to the supporters of their nonprofit customers (when they complete a transaction, for instance), and internal emails within the company. Until 2019, all emails were text-based. Some of these emails, such as transaction receipts for nonprofit supporters, were extremely lengthy and difficult to digest. Considering the variety of the nature of each email a customer could receive (security alerts, notice of completed requests, notifications, signed contracts), these text-based emails lacked the branding and design needed to easily differentiate between them.
I was a part of the team that developed these initial text-based emails and formatted them as clearly as possible within the constraints. Below you can see an example of a text-based transaction receipt, which was one of the most densely information-packed emails sent from Flipcause on behalf of nonprofit customers to their supporters after completing a transaction.
An example of one of the original text-based emails sent to supporters of Flipcause’s nonprofit customers after they completed a transaction on a campaign:
Problem
Flipcause emails were text-based with little hierarchy, and they displayed so much information that it was difficult to deduce the most important data. Users could not easily distinguish receipts based on activity type (donation, registration, volunteer sign up). We aimed to revamp email communications to be paired down, HTML-based, easy to digest, shareable, and mobile-friendly.
Process
Role
From 2019-2022, I led a redesign of all Flipcause communications. I collaborated with stakeholders to create specs for each email set, utilizing research provided by the Customer Experience team and feedback from the Customer Success team. I created a design component library and high-fidelity mockups. I then worked with the Frontend Developer and QA team to accurately translate the Figma files into code. Additionally, I was the designated Product Manager of this project, responsible for shipping through development, testing, and live release. I also developed systems to test each email, which included checks on a variety of frequently used mobile and desktop apps.
Users
Nonprofit customers
When receiving communications from Flipcause, they seek to quickly digest essential information from differentiated emails while still recognizing Flipcause’s brand (security alerts, notice of completed requests, notifications, signed contracts).
Nonprofit supporters
When receiving receipts from nonprofits through a Flipcause campaign, they seek to view paired-down data, prioritizing the amount paid and who they paid.
Challenges
We needed to incorporate the full receipt data without cluttering the design or overwhelming the recipient.
Nonprofit receipt design had to be general enough to apply to any organization, as we did not have the resources to allow for user customization beyond the logo and custom message.
Font customizations on the custom message were creating inconsistencies and bugs across different email clients.
We didn’t have a QA system in place for testing emails on all devices. Testing was difficult because emails are read through email clients, which can enforce their own styling.
Research
I collaborated with the Customer Experience, Sales, and Customer Success teams to gather research and write specs to appropriately pair down and reorganize each email set so that it displays the most important and up-to-date information. The Customer Experience team was tasked with surveying customers and creating a comparative analysis to determine which fields were essential for receipts. We determined the following:
Activity type, the amount paid, organization name, campaign name, transaction date, transaction ID, and custom message are the most important data points for nonprofit supporters receiving a receipt.
Some supporters want to share their receipts on social media.
70% of emails are viewed on mobile, and dark mode is increasingly popular.
The most commonly used email clients among customers and supporters are Gmail desktop & mobile, Apple mail desktop & mobile, and Outlook desktop.
Decisions
We decided to include a full PDF receipt with each email that included all data but kept essential information in the email body.
I implemented neutral colors on receipts (blue and light gray) that would not interfere with a nonprofit's branding.
I created a shareable section on receipts summarizing the activity. This section intentionally appears above the fold on mobile, which is the most common method for checking emails. This section also allows users to instantly recognize the type of activity summarized in the receipt (donation, volunteer sign-up, registration, etc.).
I created a mobile-specific layout for the emails with reduced margins to maximize mobile real estate.
I removed font customization for receipts, which caused many unresolvable bugs.
I developed a QA system and trained a QA team to test common email clients and devices, including dark mode.
Results
All supporter-facing transaction receipt emails have been redesigned and launched on Flipcause’s live server, along with a slew of other sets:
Security alerts
Fiscal Sponsor Dashboard requests
Flipcause sign-up emails
Dispute automation emails
I also started designing organization notifications (sent to nonprofit customers), triggered when a customer’s supporter completes a transaction.
The example below shows the redesigned transaction receipt, which replaced the text-based email above. After every transaction, these redesigned transaction receipts are sent to nonprofit supporters. There have been over 5 million transactions through Flipcause, generating over $1,000,000,000 for nonprofits. After we released this email set, we were excited to see screenshots of Flipcause receipts shared in the wild on social media platforms. We also received positive feedback from our users via survey.
Below is the redesigned transaction receipt, sent to nonprofit supporters (desktop view). Information has been paired down to the most essential parts, and the full details are now available on a PDF linked at the bottom.
Below is the mobile version of the redesigned transaction receipt. The top section contains the most important information so that nonprofit supporters can take screenshots of this part of the receipt to share on social media.
Below is the redesigned organization notification email, sent to nonprofit customers after a supporter completes a transaction on a campaign. This email was paired down and redesigned in HTML from a prior plain text version.
This email was designed in a similar format to other organization-facing emails, but color-coded to be cohesive with the Fiscal (Project) Dashboard. This email confirms that the Fiscal Dashboard user’s request has been completed.
This email, redesigned from a plain text version, prompts a potential customer to start a 60-day free trial after a demo.