Beatport Email Templates
When I started at Beatport the email design templates being used were not responsive and followed a pretty straight forward formula that primarily leaned on curated lists of albums or tracks laid out in a grid. The click through rates were low and general feedback from customers and internally at Beatport indicated that the marketing was stale and predictable.
My primary job while working at Beatport was to design their marketing email campaigns for their online store. I worked with the marketing strategists to develop user flows, sitemaps and wireframes using Balsamiq. I designed all the visual elements and final designs using Adobe Illustrator and Photoshop. I then worked with the developers to implement and QC the design and it's responsive elements.
My goal was to design responsive email templates with interchangeable sections that were compartmentalized to give thousands of options, but still allow designers to quickly compile the appropriate components to ensure pixel perfect sizing and brand continuity. We also integrated refreshed branding and the ability to use animations to give the emails new life and visual elements to catch the eye of recipients.
Before starting on the user flow or site maps for campaign templates, I worked with developers and marketing strategists to pull analytics on the previous 3 years of email sends. We referenced emails that had unusually high click through rates that resulted in sales as well as the results of any segmentation and A/B testing to inform which UX and visual elements worked well in previous sends.
We also noted which email campaigns had unusually low responses and sent out surveys internally and to industry experts to get feedback on what about these campaigns might have caused them to perform poorly. Compiling this information gave us the full picture on how to approach the new email design.
I was able to begin mapping out my information architecture (IA). The goal was to create intuitive emails that a new and/or returning customers would be able to navigate and understand with ease. From here I was able to develop a customer journey map which I then used to develop the hierarchical structure of the emails and the landing pages I needed to design.
- Responsive design that allows the emails to look very intentional on any device
- Clear CTA button placement
- Interchangable content sections that allow emails to be design efficiently while still giving each one a unique structure.
Low Fidelity: I started the initial wireframing process using paper and pen to create very rough sketches and moved to Balsamiq for wireframing. I produced multiple iterations of the layouts, navigation and tested certain pages/features on usability websites (preference tests) and with friends.
Hi Fidelity: I used Illsutrator for the high-fidelity wireframes. It was during this process when I was able to add the color and typography and focus more on the visual design. I tested different iterations of the emails by conducting a series of usability tests including quantitative and qualitative testing. Feedback from various recipients of test sends allowed me to improve and refine the design. Recipients wanted emails to feel less transactional while at the same time having clear CTA placement and multiple opportunities to click through the email to learn more. Their input helped me design better email templates. Click through rates and A/B testing showed that the final email designs were straightforward and simple to navigate.
I used Invision to create a clickable protoype of the new email templates. I conducted additional usability studies using this prototype via test sends.