Style Guide and Email Newsletter Generation

UX Design
Role: UX Designer
Client: UCSF Health
Tools: Sketch, Zeplin, JIRA
Deliverable: Website

Client did not have a working style guide or template that could be used as a building block for the generation of Email Newsletters during their Health Campaigns.


Understanding the Problem

Previously, the client would deliver a mockup to the Dev team but the sizing, spacing, and hierarchy of fonts would often be different. The launched version would, as a result, have small but significant variations.

Defining the Goal

Create a style guide to be used as a template with easy to use building blocks so any designer can quickly generate a design based on JIRA ticket requirements and developers can quickly digest, interpret, and execute, while also staying true to brand guidelines and medical campaign objectives.

Getting Oriented

My first step in generating the style guide was to take a look at existing wireframes the company had been using to develop desktop and mobile landing pages.

Previous Campaign

My concerns with the existing wireframes are listed below:

  • Logo size variation
  • Lack of strong sense of hierarchy with font
  • Elements, especially in mobile, feel squished
  • Center aligned body text and variations in line length
  • No clear distinction between some sections

Competitive Analysis

The next step was briefly looking at the competition to see what they execute well, and what could, perhaps, be improved upon.

Competitor's Website


Style Guide Creation

First step was establishing font sizes to clearly define hierarchy, usage, and promote consistency across designs.

Font Sizing

The Next step was defining usage of H1, H2 and Body Copy.

Font Sizing

As well as image sizing, module spacing, and CTA guidelines.

With guidelines established, the next step was to begin building out the template modules.

I started with rough sketches in my notebook outlining the general direction for each module. Then, I transferred that to Sketch using the guidelines I had previously established.


After reviewing the JIRA ticket for the goal of the campaign, and receiving the copy and photographs, I began the creation of the Desktop and Mobile mockups for the July Newsletter in Sketch.

Luckily, since the dimensions, spacing, and guidelines were already established in the style guide, it was mostly evaluating, and confirming that certain dimensions did in fact work with heirarchy, legibility, cohesiveness, while maintining the approachable feel of a children's hospital.

Lessons Learned

  • With clearly defined guidelines for spacing, sizing, and placement, our Dev team was able to turn around live versions that from closely resembled the mockup, more consistently
  • While not possible for all designs, for mockups that have a similar purpose (Email Campaigns) the introduction of a style guide with building blocks will save designers time, simply inputting the copy and photography, but it will also facilitate communication with the Development team prior to execution.

Live Version

UCSF July Newsletter