Groupon Merchant Email Redesign
THE BRIEF
ART DIRECTORS:
Jamie Blass + Lori Kaplan
DESIGNER:
Brittany Campbell
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.
The Style guide
DESKTOP DIMENTIONS
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.
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}
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
Examples
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.
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.