In our previous blog, Ankush introduced our new message composer in Acoustic Campaign, a story centered around listening to you and using your feedback to deliver an ideal email experience. If you missed that blog, you can check it out here.
As the design lead at Acoustic, my colleagues and I have been fortunate to meet with many of you to understand how you design and build emails. So, today, I want to tell you how my team used the message composer to design and build our own email series.
Effective emails are well designed emails
For our pre-beta launch, we wanted to send emails to our users to help them get the most out of their message composer experience, as well as to gather feedback. We understood that email campaigns are not about that one email but a series that tells a story about the product and the brand. Our plan was to create a series of emails with a few different templates optimized for each type of email we wanted to send. To design our emails, we adhered to a few best practices:
- Make the design easy to scan, with plenty of white space and a balance of text and images to draw the recipients' eyes to what's most important.
- Optimize for all devices - especially mobile!
- Personalize it! Avoid generic emails.
- Create a strong call to action.
- Show your subject line some love. A well-worded one-liner can make or break your email.
- Craft language that's conversational and engaging.
We sketched out a lot of different ideas and collaborated with our UX writers to craft the copy. We created some animations and even threw in a few emojis for good measure (yes, those are proven to grab attention!)
As designers, sketching out the email came naturally. But eventually, we had to build it.
Bringing our design to life
I'll admit, we didn't have a lot of luck when we tried to build our designs in the classic builder – we really needed the help of someone with front-end development skills. Like many of you, we know just enough CSS and HTML to be dangerous, but certainly not enough to be confident in our abilities to code a responsive email from scratch.
But my team was scrappy and determined to give it a go. After all, what could be a better litmus test for our new composer?
With our drag-and-drop editor, we felt our chances were a lot better. Almost everything that would have typically been coded could now be created with inline editing and WYSIWYG controls. Padding, margins, colors, background images, and alignment could all be adjusted in the message composer to achieve pixel perfection. The best part was that these emails were mobile-responsive without any additional work on our end. (Media query, what's that?)
Because our emails were part of a series, there was a lot of consistency across the designs – sharing a common footer, header, and even a customized HTML block added by our front-end developer. Thank goodness for saved blocks. We created the common elements once and then just reused them in all our emails – saving a ton of time. Plus, we saved our emails as templates and it was super easy to swap out images and copy to create multiple "how-to" emails.
Here’s the breakdown of how one of our emails maps into different sections and blocks in the message composer:
Let's keep the conversation going
We learned first-hand what we really liked about the message composer, what we thought we could do better, and some things we wished we had - like a color picker! So for now, it's back to designing our next set of awesome message composer features. Tell us about your email building experience - we'd love to talk!
Stay tuned! In our next post we'll dive deep into one of our emails to show you what's possible with the message composer.
Please sign in to leave a comment.