Drexel Details is an email newsletter for Drexel Alumni. Our data and anecdotal feedback revealed low engagement, so we revamped it to make it more usable and increase engagement. In collaboration with the senior editor and email specialist, we streamlined the content format and considered the technical aspects of the design. I produced wireframes, and then designed a more reader-friendly and accessible layout. We ran some tests and based on the results we settled on a single-column design and included a donate button.
The redesign increased our click-through rates from 2-4%, on the low end of the industry standard, to 5-6%, topping industry standards.
Increased click-rate from 2 – 4% to 5 – 6% (industry standard for education is 2.8%)
Maintained open rates at 22% – 24%, on par with industry standards
Email design for Details
Drexel Details: All you need to know about the Alumni Weemend
Drexel Alumni <alumni@drexel.edu>
January 7, 2019, 11:12 AM
Process
We began by looking at the existing design and analyzing quantitative and anecdotal data. The old newsletter contained too much information, the design was crowded, and it wasn't accessible
The newsletter before the redesign
Working with the senior editor, we developed a new content architecture. I translated this to wire frames, and in consultation with the email specialist I made sure that we were meeting technical specifications. We iterated the process for desktop and mobile, and translated these to designs and then to code.
Wireframes for mobile and desktop, and initial multi-column design for desktop
We performed a few tests. First, we tested the different layouts, ultimately settling for the mobile (single-column) layout across devices, since it was the most performant and we didn't see any benefit from the added production complexity of having multiple breakpoints. We also A/B tested whether it would be helpful to include a give button—our initial concern was that including the button would harm performance, but we didn't observe any performance differences and we got a few gifts, so we opted to keep it as a standard header.
A/B testing including a giving button on the header
The design was responsive and accessible, emphasizing proper font sizes, color contrast, alt labels, and semantic HTML. We continued evaluating performance and feedback to make tweaks and improve the design iteratively.
