Case Studies

Transactional email redesign.

Company
AT&T
Role
Lead UX Designer
Artifacts
Design inventories, competitive assessments, catalog/"mood" boards, customer journeys, low- and high-fidelity wireframes, simple prototype, content styleguide
Tools
Sketch, InVision, HTML/CSS/React

Situation

Some business partners wanted to update transactional email designs and content for their particular parts of AT&T's overall transactional communication flow. Reviewing that overall flow, a senior content writer, producer, and I realized that this request wouldn't address larger issues with how different business units presented and communicated the AT&T brand across the various points of the flow—often each email a customer received looked and sounded different from the last, and many of them had outdated brand styles.

Concurrently, another business partner reviewing the overall flow asked about making improvements to the flow as a whole in order to address brand discrepancies and that customers may not fully trust official emails since they could look so different and come from different email addresses. My team strongly advocated for addressing these concerns and others to unify the transactional communication experience.

Tasks

  • Analyze existing touchpoint documents and customer journeys.
  • Catalog existing email templates being used to communicate with customers.
  • Review current practices, designs, and content voice used by other companies.
  • Reach out to other business partners involved in the overall communication flow to learn about their needs.
  • Work with the online standards team to find ways to utilize the new design system in our improved design, and utilize broader brand guidelines from marketing to ensure cohesive presentation.
  • Review our updated brand voice guides and see how we could apply these properly across the transactional flow.

Actions

  • Emphasized to our business partners from the outset that this redesign needed to be editorial as well as visual.
  • Created a mood/catalog board showing myriad existing email templates in use.
    Catalog board of existing email templates
  • Created a mood/catalog board showing how other companies presented and spoke to their customers in their transactional emails.
    Catalog board of other companies' email designs
  • Designed an initial approach with my teammates using these boards and our direct, conversational brand voice for content with a simplified, functional visual design that would fit the various types of transactional messaging.
    Initial template explorations
  • Reviewed these initial designs with business partners, and received feedback that they would like the visual designs to be more casual and eye-catching for customers. Designed a new set of email templates to address this feedback, and reviewed with stakeholders again.
    Second-round template design options
  • Applied feedback from this review, working in parts of the AT&T brand palettes, typography, and iconography balanced with our brand voice, and reviewed this with our design system team for additional guidance and feedback.
    Chosen template design, with info/warning/alert explorations
    Refining the template design with the design system team—reviewed designs (top row) and recommended design approaches from the team (bottom row)
  • Applied the new email template to a sample communication flow to demonstrate how it would look.
    The new email template applied to steps of a sample internet contact flow
  • Created redlines from my high-fidelity wireframes, an initial visual design guide, and a quick prototype using React/HTML/CSS with design system assets to show the developers how they could build the base email templates.
    Redlines for 3 different breakpoints: small, medium, and large viewports
  • Worked with my content writer teammate to create a quick editorial styleguide for updated email content to be used by business partners if they wished to write content.

Results

Business partners liked the approach my team and I created, and we framed it as a good starting point for future improvements. We reduced the number of email templates from the tens to only one. We referenced and used the design system for presenting different kinds of content, and used existing online voice guidelines to provide a simple, direct communication of information to customers. We also identified that AT&T should use fewer, common email addresses and clearer subject lines to combat any sense of distrust in customers receiving numerous emails from the company. My content writer teammate provided a simple Microsoft Word template that business partners could use to visualize their emails to customers.