Sketching Examples Case Study Context

*The sketching lectures that follow are based on this course's case study scenario. Please review the below excerpt from the Case Study before watching the sketching videos:


You’re a cofounder of Kit Cat 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 through MailChimp.

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 MailChimp 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:

You have an email list of thousands of customers who have indicated that they want you to send them updates. 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.