Embedded Files
My role
UX Designer — email audit, module strategy, wireframes, and functional/accessibility specifications.
Team
Senior Producer, Technology manager, Account Director, Developer, Visual designer, UX designer.
Timeline
10 weeks
Context:
Galleri had multiple email touchpoints across patient, HCP, employer, and health-system communications.
Design requirements
Reusable · Responsive · Accessible · Easy to assemble
Challenge
Emails were created by different agencies, leading to inconsistent execution and friction in PMRC review, build, and brand cohesion.
Goal
Create a reusable modular email system for multiple audiences and email types, built for Salesforce marketing platforms.
Target Audiences
Patients · HCPs · Employers · Health systems
Success criteria
Reduce email production and QA time
Make email creation easier across design and development
Improve consistency and application of email best practices
Discovery
I audited existing Galleri emails across audiences and email types to identify recurring content patterns and reuse opportunities.
I compared desktop and mobile implementations, mapped existing patterns to recommended modules, and identified where optional elements could provide flexibility without requiring additional components.
Existing email patterns → recommended reusable modules.
Newsletter email
Marketing email
Transactional email
Applied across email types: Newsletter · Marketing · Transactional
From audit to module strategy
The proposal called for approximately 16 reusable modules to support four audience-specific marketing variations, newsletters, and transactional emails. Because that target was a meaningful constraint, I focused on consolidating similar patterns and designing modules flexible enough to support multiple use cases.
Three recurring layout structures emerged from the audit:
Developing the module system
Developing the module system
I started with low-fidelity wireframes to explore how recurring content patterns from the audit could be translated into reusable modules.
These early explorations helped me work within the client’s target of approximately 16 modules by identifying where similar patterns could share a common structure.
I then refined the selected patterns into more detailed wireframes that defined the module layouts, hierarchy, and content variations more precisely.
Consolidating variants into reusable components
Early in the process, we considered separate components for elements such as standalone buttons and footer variations with and without unsubscribe links. As the system evolved, we realized those differences could be handled within reusable components instead of creating separate modules. This reduced the overall component count while preserving flexibility.
Exploration for reusable components
Final 16 modules
Low-fidelity module exploration → refined 16-module wireframe system.
Defining responsive behavior and specs
Defining responsive behavior and specs
Once the module structure was established, I documented how each component should behave across desktop and mobile.
18 desktop modules / 16 mobile modules
Responsive behavior reduces the number of distinct mobile components.
The specifications covered:
responsive layout behavior
content and image variations
CTA and linking behavior
spacing and component anatomy
accessibility considerations
implementation guidance for development
This gave the team a shared reference for building the modules consistently across different email types.
Desktop - 18 Modules
Mobile - 16 Modules
Desktop + mobile behavior documented for implementation
Accessibility best-practice guidance used to inform the system
Designing for accessibility
Designing for accessibility
Accessibility guidance was incorporated into the email system requirements, including readable text, meaningful links, color contrast, responsive behavior, and semantic structure.
From UX framework to design system
The module framework was then formalized into a detailed design-system guide.
The documentation brought together:
grid and layout standards
typography and color guidance
button styles and usage
component anatomy
desktop and mobile behavior
content and accessibility requirements
optional elements and implementation notes
The final documentation captured module usage, anatomy, responsive behavior, and accessibility guidance for implementation.
Desktop and mobile module anatomy
Applying the system across audiences
Applying the system across audiences
The same module framework was used across patient, HCP, employer, health-system, newsletter, and transactional communications.
Rather than creating a separate system for each audience, the shared modules could be combined in different configurations while maintaining a consistent underlying structure.
Outcome
The project delivered a documented, responsive email system that supported multiple Galleri audiences and email types.
By consolidating recurring patterns into reusable modules, the system reduced the need to redesign and rebuild each email from scratch, created a more consistent workflow across design and development, and provided shared standards for responsive behavior and accessibility.
The resulting emails were built and shipped.
Final designs with placeholder copy; copy creation was outside of our project scope.
Desktop
Mobile
Page updated
Google Sites
Report abuse