Making every VAC email feel like part of the product.
VAC’s transactional emails had evolved independently, making account, verification, security and announcement messages harder to scan and trust. Over six weeks, I redesigned the suite as a reusable communication system, documented how it should scale and handed production-ready specifications to engineering. The templates shipped and remain in use.
Select any frame to inspect the production specification.
End-to-end design ownership
Audit through engineering handoff
Organisation-facing learning platform
Templates remain in use
Section 1 of 12Overview
Overview
Email was part of the product, but it did not feel designed as part of the product.
The redesign treated email as a lifecycle experience rather than a collection of isolated messages. A shared anatomy, typography system, colour language, action pattern and footer structure created consistency across high-frequency and high-trust moments.
General
Flexible service and account communication with one clear action.
Verification
OTP and email verification with the requested value visually prioritised.
Security
High-trust notification that explains the event and recovery path.
Updates
Structured daily updates and important changes without a wall of text.
The redesign goal was not to make every email identical. It was to make every email feel like it came from the same product, with the same priorities and level of care.
Context
Users encountered inconsistency at moments when clarity and trust mattered most.
VAC supports organisations that train deskless workforces. Its users may interact with the product through email while creating an account, recovering access, confirming identity, responding to security activity or receiving learning and administrative updates. A confusing message therefore creates friction at a moment when the surrounding product interface is unavailable to help.
Visual hierarchy varied across messages
Titles, supporting copy, codes, links and calls to action competed differently from one template to another, increasing scanning effort.
Brand expression was inconsistent
Emails could feel detached from the product experience, weakening recognition and confidence at sensitive account moments.
Content structure was difficult to reuse
Without a shared template anatomy, each new email risked becoming another one-off layout with different spacing, buttons and footer behaviour.
Secondary information diluted the primary task
Users needed to know why they received the message, what mattered now and what action—if any—they should take.
Future teams lacked a clear governance model
Redesigning current templates alone would not prevent the system from becoming fragmented again.
Role & ownership
I owned the six-week project from audit through engineering handoff.
As the Product Designer, I reviewed the existing suite, defined the communication model, redesigned the templates, created the reusable system and prepared the handoff used by engineering to ship the work into VAC.
- Suite-wide hierarchy inconsistency
- Brand and readability gaps
- Unclear action priority
- Fragmented template structures
- Future maintenance risk
- Shared email anatomy
- Typography and colour rules
- Purpose-specific content modules
- CTA, support and footer patterns
- The complete high-fidelity template suite
- Production-ready specifications
- Reusable component and layout rules
- Guidance for future templates
- Responsive and content behaviour intent
- Engineering handoff for implementation
The deliverable was a shipped product system, not an isolated visual exercise.
I completed the design work across the full suite and handed the system to engineering. The resulting templates were implemented in VAC and continue to support its user communication today.
Process
A focused system-design process for an existing product surface.
Across six weeks, the work moved from identifying inconsistency to defining shared rules, applying them across the full message suite, documenting future use and preparing an implementation-ready handoff.
Inventory
Review the suite by purpose, urgency, content density, required action and recurring structural elements.
Diagnose
Identify hierarchy, readability, branding, accessibility and maintenance inconsistencies.
Systemise
Define tokens, template anatomy, message patterns, action rules and reusable content zones.
Ship
Apply the system across the suite, deliver engineering specifications and support its move into production.
Audit
The audit examined whether an email could explain itself in seconds.
Email readers scan quickly, often on small screens and without full product context. The audit therefore prioritised recognition, hierarchy, action clarity, trust and resilience rather than decorative consistency alone.
Can the reader identify the message purpose, primary information and next action immediately?
Does the message look and sound like a trusted part of the product?
Does the copy explain why the message was sent without unnecessary repetition?
Is the primary task obvious, consistently placed and described with specific language?
Are spacing, line length, type size and contrast suitable for rapid scanning?
Can future teams create a new message without inventing a new layout?
Every message needed a clear job.
Verification should prioritise the code. Security should prioritise the event and recovery path. Announcements should separate routine updates from critical information. A universal layout without intent-specific hierarchy would still fail.
Standardise anatomy, vary emphasis
The solution used a shared framework while allowing the central content module to change based on message purpose.
Define
The system was organised around reader questions.
Lead with a descriptive, benefit-led or event-led title rather than internal terminology.
Provide concise context before asking the reader to act.
Visually elevate the requested code, security event, change or announcement.
Use one primary call to action where action is required, with specific button language.
Maintain recognisable branding, support context and consistent footer information.
Provide support or recovery information without competing with the primary task.
Shared template anatomy
From audit finding to shipped rule
Design system
A compact visual language made the suite recognisable and maintainable.
The retained production key established Montserrat, a blue action and heading colour, dark body copy, layered secondary greys and white or light-grey email surfaces. The key is shown as historical project evidence; current production colours should continue to be periodically revalidated against modern contrast and email-client requirements.
Montserrat
One family, deliberate hierarchy
Weight, scale and spacing separated message purpose, body explanation, codes, actions and support information.Original production design key
One family, deliberate hierarchy
Montserrat created a recognisable visual voice. Weight, scale and spacing separated message purpose, body explanation, codes, actions and support information.
Blue for purpose and action
The primary blue connected headings, codes and buttons. Dark grey carried essential reading, while lighter tones were reserved for lower-priority information.
A readable central container
A restrained content width, generous spacing and consistent section rhythm improved scanning across desktop and mobile contexts.
One primary action
Buttons used consistent shape, placement and label treatment so readers did not have to relearn how to respond.
Template patterns
Shared rules, different centres of gravity.
The same visual system supports multiple message intents by changing what receives the strongest emphasis.
General service communication
A flexible pattern for account changes, administrative updates, payment messages and other product communication. The title establishes purpose, the body explains context and a single button carries the next action.
- Plain-language purpose
- One primary action
- Predictable support footer
OTP and verification
The requested code becomes the strongest element after the title. Supporting language remains quieter, and the alternative verification action is visually distinct without competing with the code.
- Requested value is prioritised
- Supporting copy remains secondary
- Alternative route stays visible
Security event
The event, affected account and recovery action are prioritised. The copy explains what happened, what to do if the event is recognised and where to review further activity.
- Event and account stay visible
- Recovery path is explicit
- Trust language remains concise
Updates and announcements
The pattern separates routine updates from important announcements, reducing the chance that critical changes disappear inside a long undifferentiated message.
- Routine and critical information separate
- Sections support rapid scanning
- The next action remains singular
A shared framework applied across distinct message intents.
The retained overview shows the system applied across a broad range of account, verification, security, administrative and product messages. The polished overview is a curated portfolio presentation; the individual templates and linked selected-suite source remain the underlying evidence.
Open the retained selected-suite sourceDelivery & guidance
The system was documented so engineering could ship it and future teams could extend it.
The handoff translated visual design into repeatable decisions for designers, writers and implementers rather than leaving engineering to infer the intended hierarchy from isolated frames.
Classify the message before choosing a layout
Determine whether the email informs, verifies, warns, requests action or aggregates updates.
Write the title around the user event
Use language such as “Verify your email” or “A new sign-in” rather than an internal feature name.
Keep one dominant information target
Code, action, security event or announcement should have a clear visual priority.
Use one primary button
Secondary links belong in supporting content and should not visually compete with the main task.
Maintain sender and support context
Readers should know who sent the message, why they received it and how to get help.
Preserve the system when creating new templates
Reuse the shared anatomy and purpose-specific modules before introducing a new pattern.
Engineering handoff constraints
The specification communicated the intended behaviour engineering needed to preserve when translating the designs into production email markup.
Prioritise a robust single column
Maintain hierarchy and action clarity on narrow screens without relying on complex responsive layout behaviour.
Do not depend on Montserrat alone
Preserve readable scale, weight and spacing when an email client replaces the preferred typeface.
Messages must work with images blocked
Essential purpose, codes, account information and actions remain available as live text with meaningful alt text where imagery is used.
Protect hierarchy across email clients
Use implementation patterns that tolerate inconsistent CSS support, including inline styles and conservative layout structures where required.
Support dynamic copy lengths
Containers and spacing rules accommodate longer names, translated content and variable announcement lists without breaking hierarchy.
Keep actions understandable as links
Button labels remain specific and useful if the visual button treatment is reduced or unavailable.
Engineering shipped the system into VAC.
The high-fidelity suite, style key and reusable rules formed the handoff package. The templates moved into production and remain part of the product’s active communication experience.
Accessibility
Accessibility was approached through hierarchy, clarity and implementation safeguards.
The shipped system improved accessibility through larger titles, restrained line length, predictable action placement, simplified grouping and a robust single-column structure. The historical contrast and client-test records are unavailable, so the case study does not claim a specific WCAG conformance level from screenshots alone.
Scannable information order
Purpose, context, primary information and action follow a consistent reading sequence.
Reduced competing emphasis
One dominant action or value limits uncertainty about what matters now.
Recognisable sender context
Consistent brand, support and footer treatment helps users distinguish legitimate communication.
Single-column composition
The central layout adapts more reliably to mobile email clients than complex multi-column structures.
Semantic fallback
Headings, links, alt text and meaningful button labels should remain understandable when visual styling is reduced.
Contrast and dark mode
Production templates should be periodically rechecked as brand tokens, client rendering and accessibility expectations evolve.
Outcomes
The six-week redesign shipped and became VAC’s ongoing email experience.
The strongest verified outcome is durable product adoption: engineering implemented the redesigned system, and the templates remain in active use. Quantitative behavioural metrics are not reconstructed without the original analytics.
Production delivery
The system moved from high-fidelity specification into VAC’s live product communication.
Still in use
The templates continue to support VAC’s account, verification, security and update touchpoints.
Reusable patterns
Shared anatomy and purpose-specific modules reduced reliance on one-off template decisions.
Clearer handoff
Engineering received an organised specification rather than a disconnected collection of frames.
- Unified visual and structural anatomy across the suite
- Consistent heading, body and primary-action hierarchy
- Purpose-specific patterns for common email intents
- Reusable typography, colour and spacing direction
- Guidance for future design and implementation
- Stronger continuity between VAC and the inbox
- Clearer actions during account-sensitive moments
- Less competing emphasis within each message
- More predictable support and sender context
- Improved readability across the communication lifecycle
Evidence retained
- Four representative production template specifications.
- A suite-level overview showing broad application.
- A documented typography and colour direction.
- A consistent button, footer and message hierarchy.
- Verified six-week ownership and engineering handoff.
- Verified production release and continued use in VAC.
Evidence not reconstructed
- Original audit inventory and exact template count.
- Before-state screenshots and issue-severity records.
- Email-client QA and historical contrast results.
- Open, click and task-completion changes.
- Support-contact or resend-rate changes.
- Calendar dates and the full implementation-team roster.
Metrics I would instrument today
Verification completion · password recovery completion · security review completion
Primary CTA click-through · time to action · abandonment by message type
Purpose recognition · perceived legitimacy · message clarity rating
Email-related support contacts · repeated sends · recovery assistance requests
Client rendering defects · accessibility defects · dark-mode failures
Template reuse · one-off variants · time to create and approve a new message
Reflection
The strongest outcome was not visual consistency. It was decision consistency.
Email is product UX
A user’s trust in the product can be shaped by a message they read outside the application.
Consistency needs governance
A polished redesign will fragment again unless future teams can apply the same reasoning.
Intent should drive hierarchy
The system is strongest when shared rules support—not flatten—the purpose of each message.
The project reframed email from a final delivery artifact into a shipped product surface with its own information architecture, reusable rules and engineering-ready standards.
Need a guided walkthrough of the work and decision-making?
Start a conversation