Brittany Campbell

Email Redesign

Groupon Merchant Email Redesign

iteration2

THE BRIEF

The Groupon Merchant facing emails were using old and outdated styles. The merchant marketing team requested a clean and simple design that could be used across many different emails. The email redesign should have a style guide that designers, marketing, and engineers could all use to shape future emails.

Art directorS:
Jamie Blass + Lori Kaplan

Designer
Brittany Campbell


The Style guide

Desktop Dimension
Width: 600px
Height: Determined by content

Groupon Wordmark
The Groupon Wordmark should be the only logo used on merchant emails and should only appear in Groupon Green.

Closing Content
The footer should be signed by The Groupon Team and not individual account manager.

Social Media Icons
Social media buttons are images that are used in the email. These emails should link to GrouponWorks social media pages.

email-specs.png

Footer Banner
This banner is optional but should be built into the email style in the case of an advertising campaign needing to be added to merchant emails. Dimensions: 600px x 100px


Typography

H1
{color: #2D2926; font-size: 28px; line-height: 32px; font-family: Helvetica, Arial, sans-serif; font-weight: light}

H2
{color: #2D2926; font-size: 18px; line-height: 26px; font-family: Helvetica, Arial, sans-serif; font-weight: light}

H3
{color: #82B548; font-size: 18px; line-height: 26px; font-family: Helvetica, Arial, sans-serif; font-weight: regular}

Body
{color: #75787B; font-size: 16px; line-height: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: regular}

Footer
{color: #75787B; font-size: 12px; line-height: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: regular}

Links
{color: #4691AF; font-size: 16px; line-height: 20px font-family: Helvetica, Arial, sans-serif; font-weight: regular}

Screen Shot 2015-06-14 at 9.34.47 PM.png

Mobile Specs

Dimensions
Width: 480px
Height: Determined by content
Margins: 35px

Litmus Testing
All developed emails must go through a render testing process. Please email sparta@groupon.com for access to Litmus, our testing platform.

Footer Banner
This banner is optional but should be built into the email style in the case of an advertising campaign needing to be added to merchant emails. Dimensions: 480px x 100px

 

mobile.jpg

Examples

preview
calendar
event
survey

AUDIT

The previous designs used a lot of green and the out dated logo. The emails had a lot of copy and lacked hierarchy. If there were any visuals present, they weren't consistent or engaging.


sketch-2
IMG_2076.JPG

SKETCHES

In addition to creating more hierarchy with different type sizes and weights, I started thinking about how to incorporate imagery and widgetize the email templates. There would be an area for headline banners and images as well as a bottom banner that could be use to advertise new programs and features. I also tried to place social media icons in the email body instead of the footer due to Groupon's new initiative to provide tips and resources to small business owners via Facebook, Twitter, and our Merchant Blog.