I was fairly new to the world of email design when I began designing the content for the monthly CiviCRM newsletter in the fall of 2014. Marisa Porter had already done the difficult work of volunteering over 80 hours to create a completely responsive email newsletter template. Read about that process here.
The monthly CiviCRM newsletter BEFORE its responsive redesign:
After:
I found myself diving into the best practices of effective user design—almost obsessively—as I took over the content design for the newsletter. Over the course of a year, I used a variety of images and graphics. I constantly wondered how effective my design decisions were. As I watched trends and read reports detailing user response to design, I learned some interesting things.
Humans skip read in an F-shaped pattern.
Jakob Nielsen tracked 1.5 million eye movements of 300 web users and discovered that humans skip-read as they scan through a web page or email. The heat map of these eye movements revealed an F-shaped pattern. This means that words and images on the left side of your design will get most of the attention, with the occasional scan that reaches across and to the right.
I tested the monthly CiviCRM newsletter design with an imaginary F-shaped pattern after looking at the heat maps from Nielsen's studies.
Marisa designed the CiviCRM email newsletter template structure in such a way that the CiviCRM newsletter began with a single column, leading with the most important content aligned to the left of the email design. The following stories followed suit with email content placed strategically in an F-shaped pattern.
Visuals are processed 60,000 times faster in the human brain than text.
Study after study shows that the human’s eyes are attracted more strongly to beautiful imagery and graphics over text—even if the text is important! By using interesting visuals, the human’s curiosity may be aroused enough to read the text. Statistically, content with visuals receive 94% more engagement than those without.
Optimizing images while retaining their quality.
In the newsletter template, image width and height are declared so that the email design will maintain its structure when images are turned off by an email client. I created Photoshop templates with the exact pixel dimensions used in the email newsletter. I saved each image for web so that they were fully optimized for quick email load times while retaining their visual integrity.
The End Result
“The number of people who clicked through links on the monthly CiviCRM newsletter increased by 40% on average in the year following the mobile responsive re-design.” /CiviCRM Newsletter Report Statistics
The Future of CiviCRM Newsletters
I learned a lot about email design and I really enjoyed working with Dave, Michael, Josh and Linda in the past year.
I hope that Civi newsletters continue to grow and evolve. I hope they tell the many wonderful stories of the important work that CiviCRM enables organizations to accomplish across the world. I hope new humans are inspired to contribute their time and resources to improve and expand CiviCRM.
I'm humbled and honored to be a small part of this growing community. I have learned it is far better to be a small part of a big thing than a big part of a small thing. Together we can effectively design a beautiful, thoughtful experience for inhabitants throughout our evolving universe.
About the author:
After over 22 moves between New York and Tokyo, Meg Delagrange finally found her home with Wanna Pixel Inc. A designer since her eyes could distinguish black from white, an artist since her fingers first gripped a new crayon, she's been rearranging and coloring her world for as long as she can remember. Meg takes the ideas and puzzle pieces of information from the nonprofit organizations Wanna Pixel works with and turns them into beautiful, interactive, accessible, and modern user experiences.
Meg began learning how to use CiviCRM in the summer of 2014 when she joined the team at Wanna Pixel, then Arete Imagine Inc. Using CiviCRM, their agency created events for three educational conferences across the state of Pennsylvania. Meg managed event registrations and created lists of organized contacts of each school district in every county across the eastern half of the state in CiviCRM. She was immediately impressed that she could easily open a contact dashboard and see every phone call or email along with notes she created for that contact. She assigned followup tasks on individual contacts to herself or others on her team. Meg was also able to reach out to attendees from conferences that were held the year before, via the information she found in the event reports in CiviCRM.
Meg really enjoyed learning to manage contacts for Wanna Pixel clients within CiviCRM and designing content for their email campaigns . This ultimately lead her to taking over the content design for the CiviCRM monthly newsletter, where she learned a lot and enjoyed contributing to the community of CiviCRM.
