How General Assembly Uses Design Simplicity in Email

[post_text_highlight text=”Welcome to our first Design Inspiration blog post! Every Tuesday we’ll be pick an email that caught our eye and see if we can extract some useful email design tips from it. We hope you will enjoy it!” bgcolor=”#ff0000″]

General Assembly is a global technology education company, with classes and tutorials ranging from front-end web development to data science and even storytelling. The company teaches design classes as well, and it shows off its design expertise with its elegant, clutter-free, and easy-to-navigate website.

So it’s no surprise that there’s plenty to learn from GA’s email newsletter design. Here, we take a look at what makes a GA class promotion email worth emulating and what could be improved to make it even better.

What this email gets right

1. Confirms WHY you signed up

When you open a General Assembly email, you’re not bombarded by a lengthy introduction, ads, or a complicated header navigation. Instead – up front and center – you find a bold, action-oriented message the confirms the reason why you contacted GA: Build Your Skills.

2. Reflects the simplicity of GA’s visual brand IDENTITY

This look is clean, modern, and clutter-free. The email uses just two primary typefaces, organizes the content with a mix of a single-column (text and call to action) and two-column (course catalog) layout, and leaves plenty of white space. This approach gets readers to focus right away on GA’s course offerings.

3. Lets visuals carry the STORY

The cute, approachable graphics immediately grab the eye. Since they’re paired with minimal text (short, 1-sentence descriptions) and are neatly arranged, readers can easily scan the information and choose the class that’s right for them.

What needs improvement

At the time of testing, this GA’s email was not responsive, and therefore suffered from a lack of readability on mobile devices.

Instead of a responsive design, which would shift its two-column layout to a single column on mobile, this email’s two-column layout simply gets narrower on mobile, making it much harder to read. A responsive layout would substantially improve readability, lead to higher reader engagement, and likely drive more people to register for courses.

Email design tips

What can you learn from the General Assembly email? Consider these pointers:

• Use a headline font that’s at least three times the size of your body copy. This is your chance to experiment with size and typeface. Try a bold leading statement in a typeface that’s four to five times larger than the body text. In this email, the top headline is 62 pixels, while the body text is only 15 px. And simple is key: note that GA’s headline is only three words.

• Use different typefaces to create visual separation. Using too many fonts can be distracting, but using different font types for separate sections of your message (for example,  title vs. paragraph vs. footer) creates natural, visual separation between them. In GA’s email, they opted for two “email safe” fonts: Georgia for the main title at the top, and Arial for the paragraph.
• Call out the most important text in bold type. Making text bold is a simple way to call attention to what’s important without introducing additional typefaces. But use bold text sparingly, only where it improves readability (e.g., in the GA email, the bold course titles help them stand out from the descriptions below).

• Think of your layout as a grid. Keep each image and section equidistant from each other with balanced padding. Ensure that each title and paragraph take up the same number of lines.
• Limit your descriptive text to 10-15 words. Attention spans are short, especially on mobile devices. Readers who want more information should be able to click on images and text within your email to find out more.

Plus, don’t forget to use a responsive template! It’s easy and automatic when you design your email with an email editor like BEE.

[post_text_highlight text=”What do you think of General Assembly’s email? What would you do differently? Tell us in the comments.” bgcolor=”#ff0000″]

Next step: let’s try building this email!

Let’s create an online course catalog newsletter like this one from General Assembly! Check out our workshop: How to Apply Design Simplicity in Email.