UX/UI Case Study:
Email Newsletter Design For New Site Launch
Professional Project
Email Campaign
Email newsletter design for new site launch. Designing an email template that is engaging and reusable.
Ji Hu | Lydia Mansel
My Role: content planning
branding
prototyping
visual design
email implementation
Project’s Scope
The ABM Agency has launched their new site, and also shifted their main services from SEO and Lead Generation to Demand Generation and Account-based Marketing.
Because of these big changes on their main services and website, they need to find a way to communicate their new services and branding to their existing customers and prospects (potential customers).
Goals
- Let people know exactly what services The ABM Agency provides now.
- Let people know that The ABM Agency has a new website (attract traffic).
- Communicate and reveal the new branding.
- Engage potential customers with blogs related to B2B marketing to attract clicks and engagements.
- Lead potential customers to engage with The ABM Agency’s LinkedIn page since all of their customers will be B2B marketing customers.
Design Rationale (Process)
Why use email marketing?
After talking with the marketing team and copywriter, we decided on using email as the marketing channel to engage with the audience, because:
- Email marketing creates an engagement that is personal and customizable.
- Email campaign results can be easily measured, we can score and mark each prospect who opened the email or clicked on a certain link, then gradually send them down to the sales funnel through lead nurturing.
- Email marketing is cost-effective, and plus The ABM Agency already has their old customers and new prospects’ email addresses.
Content sync:
Going through the approved copy with the copywriter, get the general ideas from her and the marketing team, then I annotated with notes to give myself some visual cues to help me prototype.
lo-fi Prototyping:
I did this lo-fi prototype with pencil and paper in 5 mins, then I showed it to the team, to make sure they like how I arranged the content and the visual hierarchy.
Takeaways: Team members all agree, for the new site launch section: The ABM Agency now mainly focuses on B2B digital marketing services: Demand Generation and Account-based Marketing, we will have to let people know this big service change when they open this email.
Solution: I made the two services Demand Generation and Account-based Marketing more prominent under the “new site launch” section. (see blew)
Hi-fi Prototyping:
Surprisingly we didn’t have website style guideline to work with, and I had to finish this email design in 2 days, there wasn’t enough time for me to create a website style guideline from scratch, so I decided that I would use the color, fonts and layout style from the new homepage.
This is the homepage:
Hi-fi email I designed:
Design key points:
- I used the notification red round bubble to grab users’ attention to keep reading.
- Hand-drawn cloud using the pen tool and customized rocket illustration to communicate the feeling of “launching”.
- Different screens to show the website is well designed and responsive.
- Big neomorphism buttons with gradient text that users can click on and learn more about the two new services.
- Using curved tabs to distinguish each section.
- Big Linkedin button with beautiful neumorphism Linkedin logo to attract people’s clicks.
Email Implementation
As we all know, these days, designers have to wear different hats, and I am that type of designer who can both design and code, I understand HTML and CSS, I hand-coded my own website and I have been using WordPress Elementor to implement websites for a year now, I love it.
I also use Hubspot and Activecampaign to implement email campaigns. Here for this email, I used Hubspot’s email marketing tool:
I made sure the email is responsive both on mobile and desktop, also dark-mode friendly. Another thing that is important in email marketing is how engaging are your subject line and pre-text, so I made sure both on mobile and desktop, the subject line and pre-text can display the keywords: B2B Marketing, Demand Generation, and Account-based Marketing.
Testing
Send test emails to team members, see how it displays on mobile and under dark mode, everything looks good, send!
Results
This email eventually got an 11.5% opening rate, it’s a great opening rate considering this is the first email with the launch of the new site.
43.5% of people who opened the email actually read the email, which means people find the content and visual interesting and useful, we should keep creating similar content and keep the same visual.
Future Opportunities
Although the email opening rate is decent for the first email, it can be better, I think implementing these tactics can help with the opening rate even more:
- Adding emojis to the subject line, so that among all the emails in the inbox, the one’s subject line with emoji will jump out because of its high visual hierarchy.
- Implement personalization within the email body. Add %firstname% code to the email, and set up the default value as “Hi” when there is no first name.
- Do A/B testing, to find out which version has a better opening rate. These days, email marketing platforms can first send each of the A and B versions to 10% of the contacts, then calculate and send the higher opening rate version to the rest of the contacts.
next
Next Project
