Introduction to the Challenge: Promotional Email


You’re a cofounder of KitCat Society, a company that walks people through finding and adopting cats. The company started as a team of 6 friends about a year ago, and has quickly demonstrated the success of its business model, hired 20 new employees, and moved into a new office.

Since opening, the company has acquired thousands of emails from customers as well as potential customers who have expressed interest in your service. Up to now, you’ve been using a canned template.

You and your team know that your email messaging needs have outgrown the abilities of the pre-canned template, and you’ve decided to take on setting up an html email workflow.

Here are the reasons you’ve outgrown the canned template you’ve been using:

  • You need more flexibility and control with layout
  • You need more flexibility and control to shape content

You’ve tried your hand at coding email in the past, but it was a huge headache because you’re not familiar with coding responsive emails that display correctly on every device.

Since then, you’ve taken ZURB’s Responsive Email class so you understand how to frame opportunities; sketch; design; prototype; code; and test your emails. Now you’re ready to take another crack at putting together a responsive html email, to make sure you’re ready to create and institute the company’s email workflow.

The Marketing Needs:

Here are the things your team wants to start with for the first newsletter email:

  • Let your customers know you’ve been given the #1 Readers’ Choice award from Paw Monthly.
  • Promote your new “what kind of cat person are you” blog post.
  • Newest cats available for adoption.
  • Grooming 101 tips: understanding brushes.

Your Plan:

  • Go through 1-2 rounds of sketching your email, presenting to stakeholders, and getting feedback.
  • [Optional] Taking the structure from your email sketch, apply a visual presentation layer that matches the visual design of your company’s website (please see style guide in appendix below).
  • [Optional] Wireframe your email.
  • Code your email.
  • Test.
  • Debug.


  • Email Sketches
    • (1) Initial email Low-Fi sketch.
    • (1) After getting feedback, create a second round sketch.
  • [Optional] Wireframe
    • (1) Referencing the KitCat brand style guide in the appendix, mockup your email.
  • [Optional] Visual Design
    • (1) Styled mockup of your email.
  • Coded Email
    • (1) Coded Email

Appendix: KitCat Brand