Redesigning the LSA Today Quarterly Email
The LSA Today Quarterly email is an email that goes out to roughly 180,000 University of Michigan Alumni that attended the College of Literature, Science, and the Arts (LSA).
The email serves as a highlight of what has happened over the past quarter at LSA. It contains engaging story-telling and calls to action to allow the user to further engage with the college.
OLD LSA Today email design
NEW LSA Today email design
The old design had a number of issues that prevented it from being a successful, modern email. Though it was deploying to roughly 180,000 users, there was so much more that could be done to ensure users were getting and engaging with the content.
The first and biggest issue was the lack of responsive design for the email. On mobile, content outside of the 600px width would simply be cut off if the email client didn't support overflow scrolling.
We had to make the email responsive but also make sure it would be supported on most modern email clients.
The content of the email is also static. That is, everyone receives the same email. We have data that would allow us to customize and curate content for each recipient. For that data we don't have, we need to ensure we are good data stewards and ask our users to provide that data.
For example, we could include more humanities stories if we know the recipient graduated from a major in the Humanities unit. If the user had previously donated to the college, we could share more stories that are relevant to the area in which they donated.
The presentation of the email was rather cumbersome. There was a lot of close, competing content that would be fighting for the user's attention.
Since this email deployed on a semi-regular basis, we could use that opportunity to A/B test certain features and optimize the design and content to bring the best experience to the users.
After redeveloping a new email from the ground up, we were able to hit on several of our initial goals. Some of the goals are more long-term and will require a lot of process changes. For now, I'll focus on the new design and how we improved the user experience.
We created a brand new template from the ground up to allow users to view the email on smaller screens. The old template was built on legacy email design practices and contained a lot of nested, fixed-width tables. Though tables are still (unfortunately) the primary layout way to layout content in tables, we reduced the amount of nesting and used more responsive css properties (percentages, em, vh / vw, etc.).
We started by adding a lot of white space to the design and by reducing the amount of competing horizontal content. Though we also included media-queries, not all email clients support them. In the old design, there were as many as four columns of content all trying to fit within 600 pixels. We reduced the maximum number of columns down to two to allow even the smallest of screens to have a legible experience.
Since implementing this new design, we've A/B tested smaller aspects of the design to optimize the experience and provide the most engaging content. For example, one of our most recent A/B tests was to figure out if the teaser text (the text below the titles of each article) was actually necessary. We sent half of our recipients a version without the teaser text, and the other half with the teaser text.
Version A (left) is the version without teaser text. Version B (right) is the version with teaser text.
From the data, we found that more users interacted with the version without the teaser text. However, we also found that that version also had lower engagement.
We felt engagement was more important than open count. Not only were more people engaging with the email content in Version B, but those that went to the website from Version B stayed longer and visited more pages.
This email is still one of the largest email campaigns I am a part of. We have a long way to go with our initial goals but we continue to refine our design and content and utilize data in decision making.
If you enjoyed this and want to see more UX work, view all blog posts by UX tag.