Screenshots of email interfaces displayed on a blue background, showcasing email templates designed for project.
Screenshots of email interfaces displayed on a blue background, showcasing email templates designed for project.
Screenshots of email interfaces displayed on a blue background, showcasing email templates designed for project.

Powering smart email notifications

Powering smart email notifications

rundown

Designed and implemented a scalable email notification system.

Designed and implemented a scalable email notification system.

type

Internship project
UX design, Full stack dev

Internship project
UX design, Full stack dev

timeline

June 2024 -
August 2024

June 2024 -
August 2024

June 2024 - August 2024

tools

Figma, React,

JavaScript, Git

Figma, React,

JavaScript, Git

Figma, React, JavaScript, Git

NIVEA and GIG program members asking questions about GIG program details

Updates were going unseen

Students and companies were missing important GIG program updates such as start dates, submission deadlines, reimbursements, and task changes.

Reports of confusion and missed opportunities surfaced from the lack of a robust notification system. My goal was to find a way for the platform to notify users of important events and actions.

Creating a comprehensive email system

I began by exploring the platform and observing how current users navigated it, focusing on where emails could drive action and improve clarity. I looked at:

Which emails already existed and if they were relevant

Whether the emails needed to be updated to new design system

Where there was no confirmation for essential actions/events in the platform

H\FC product snapshot displaying submitted reimbursements with prices and status indicators.
H\FC product snapshot displaying submitted reimbursements with prices and status indicators.
H\FC product snapshot displaying submitted reimbursements with prices and status indicators.

Key opportunities for notifications

Program date updates

Students request GIG program date extensions; companies approve or deny changes

Students request GIG program date extensions; companies approve or deny changes

Expense reimbursements

Students submit expenses for approval; companies approve or deny reimbursement

Students submit expenses for approval; companies approve or deny reimbursement

Invoices paid

Weekly, monthly, or one-time payments processed for completion of tasks and GIG

Weekly, monthly, or one-time payments processed for completion of tasks and GIG

Subscription plan updates

Company is notified upon upgrade/downgrade/pause/cancel of HFC subscription

Company is notified upon upgrade/downgrade/pause/cancel of HFC subscription

Samples requested or sent

Users might not always know what they want–close observation leads to the best insights.

Users might not always know what they want–close observation leads to the best insights.

Designing for scale

To reduce future design and dev work, I created email templates for four key categories. Each template is mobile-friendly, uses reusable components, and supports dynamic data.

Transactional

Confirm payments, updates

Email template for transactions
Email template for transactions

Dates

Program date changes

Email template for date changes
Email template for date changes

Events

Drive time-sensitive behavior

Email template for events
Email template for events

How it works

New user onboarding

Email template for onboarding
Email template for onboarding

Implementation considerations

Some emails relied on a Stripe webhook, while others used custom logic tied to the platform's workflows

I created each email to be optimized for mobile and componentized for scale. Each relied on dynamic user data (e.g. GIG name, due date, or student information), making them personalized and event-driven.

Flowchart illustrating a process with multiple steps and connections for a reimbursement trigger and notification flow
Flowchart illustrating a process with multiple steps and connections for a reimbursement trigger and notification flow

Reimbursement trigger and notification flow

testing my code @H\FC HQ!

Tackling the development

Here's how I went about implementing the emails:

Learned React + JavaScript in three days

Reviewed codebase to understand trigger logic

Created emails in React Email with modular components

Placed triggers inside backend logic (e.g., on reimbursement approval, program dates changed, GIG ended, etc…)

Exciting outcomes

I’m proud to have contributed to the backend & design of outstanding email performance.




In a world of fragmented attention, effective email design can serve as a subtle yet powerful driver of retention, satisfaction, and loyalty. These numbers show how engaged a community is with the right notifications!

Four blue boxes showing outcome of email system in 2024: open rates, deliverability, click rates, and email engagement metrics
Four blue boxes showing outcome of email system in 2024: open rates, deliverability, click rates, and email engagement metrics