In this Marketing lesson, I'll show you how easy it is to build our well-structured email newsletters using the power of Figma & Mailchimp.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Hey, what's up guys. So the goal of this lesson is to try to get you to build out newsletters that don't feel a spam. And we're going to do that with a couple of things. The first thing is you can still create newsletters that are good. The thing that we need to be aware of is how can we make them a little bit more personalized?
Okay. So let me open up our Figma so that I can walk you through the design that I set up for the stream VR newsletter. This will be the welcome message that the users get when they sign up on the website.
All right so in Figma, what I've done is I created a frame and I've made this an auto layout so that you can clearly see all the segmentation that I've made.
The first thing is of course the header. And then I add a little bit of an intro text, this would be our personalization. The idea here is to build a relationship right upfront. We want to be able to give value or give back, and also make sure that it's got a human interaction right after that, we're going to have the top features, so in this case, the watch parties is one of the features that we have for stream VR. And then as you scroll down the email, you're going to have featured products that you can see that are on special discount or offer.
Finally, because this is a service and product. We want to show also the exclusive benefits that you get, like gift cards or anything that helps give extra value to that user. The format of this is simply by using an auto layout. I can toggle off the spacing between each of these frames and that way I can see how this would look like, once it's on the email. Now notice that little gift card on the footer, it doesn't really look like a gift card.
So I'm going to just quickly modify that. So it feels a little bit more like a gift card by adding some borders and the shadow. And also making sure that it's within the frame. So when I export this out, it's going to still remain within that 510 pixels of the width.
Now why 510, I've learned that throughout the emails that I've sent out, making sure that you keep that size target helps both desktop and mobile, so anything you design around that is going to look pretty good.
You want to make sure you add enough space between each of those sections. For example, here, I'm just making sure that the content on this title is on the footer so that I can stretch this out and give a little bit of extra breathing air between one section and the other.
Once I've done that, I go ahead and export all these PNGs, but notice that I'm also exporting as a 2X, just want to make sure that I have a larger version of this image. And what we're going to do is once we have all the 2X files in our newsletter folder, we're going to compress them that way when we upload into our CRM, the user will load up the email quite quickly.
All right, so the next thing is creating our campaign. We're going to use MailChimp to create our first campaign. So you can access that through campaigns. And then under campaigns, you will see a button on the top right to create a campaign.
From there. You want to make sure you click on email and then go to automate it, from here we want to make sure we click on welcome new subscribers. Pretty simple. We add in the campaign name, we select our audience. You'll notice that you get information or settings like: where are you sending this from, the subject, the content and your audience.
So the first thing is making sure that you're verifying your domain address. So MailChimp will guide you through this process, they will send you a verification email with a code. You open the email you insert it and once it's verified, you'll be able to send emails through that email. Once you do that, we can choose the audience that we want to send this to, and of course, we want to make sure that it's immediately after the joint. And trigger if you import subscribed content, that's really up to you. If you import manually, then that email gets triggered as well.
For the subject. We're going to skip that for now can go right into the editor.
So the editor is pretty straightforward, you have a set of blocks, think of them similar to webflow, and you have some templates you can pull in, drop things into the canvas. So just like that I can drop in social links, everything has some settings and styles that you can modify. So, for example here, I'm going to just switch that over to a horizontal with an outline and just go into the default black so that it's clean and simple.
We're going to delete this and make sure that you edit the footer. Now the footer doesn't need to be as cluttered as they have that for you. You can remove almost everything. The only thing you need to keep on this part of the footer is the links for the audience to unsubscribe. From there, you can go into the style of the entire email start changing the background color, and I'm going to try to keep this as simple as possible to match our Figma design. So we know we have, everything is going to be on white, and I'm just going to copy over the texts that I have for that intro. And simply start pasting it into our block of content.
You can also remove some of these conditions because we know for sure that we're going to get the first name when they subscribe on the website. So there's no need for a conditional. From here, you can also add links directly from this Wiziwig editor, which is pretty cool. So the next thing is we want to swap out that logo and maybe add some links to that.
So once you add in the link, you can also change the alt text for accessibility and replacing the image will be pretty simple. All we have to do is upload our images that we just compressed. We can also organize everything into folders, which is really neat. You can modify the images directly from here and just by clicking insert, it gets added and replaced, pretty cool.
So under the preview dropdown, we can have a quick glance at how this looks like already on desktop and on mobile. And we can start modifying some additional things like the top little texts of viewing it on the website. We can delete that block if we need it. This little pre header can also be modified with colors and styles, so make sure you keep everything on white.
For the footer we want to make sure everything also is white. And you'll also notice that some of these have some borders, so make sure you clean this up so you don't have any borders going from the top or the bottom. Just simply remove the borders on the styles.
And once you start seeing this cleaned up, we can start importing the images that we're planning to put right below that text field. So for example, let's go back in here and simply drag and drop an image lock or image element into the block of the body.
From there, it's pretty straightforward we upload the image of our welcome party features and notice that I'm also able to go into settings and aligned this image, if it's smaller, the one thing we want to do is make sure we select the edge to edge. We want to do that with every single image you're placing in this, unless it's an image that actually lives with some content, which we're going to look in a little bit.
All right, so I'm going to just drop in that title for the products, and now we're going to do an image plus text. And so the cool thing here is that you can change the settings to have two columns, and now it will imitate our design in Figma. So we have two columns, one for the product of rift and the other one for the quest.
So again, it's pretty straightforward. You have some additional positioning, but what we want to do is just paste in the product information that we have on our design, do the same thing for the other ones. Swap out the images and boom, you can also add in additional buttons directly from the wizard week editor.
So notice here, what I'm doing is just inserting the buy now button, changing the width of it so that it fits nicely within our design. And just making sure that that button can be added in both columns one and two.
Okay. Now, We can simply stylize this by centering the text. When you insert images directly into the editor, you need to click on the image itself to add in the link of where you want this to go, changing it to red for the new price and blue.
So there we go. So it's starting to look a little bit more like the design. And the gift card image that we just created. So right there is simply uploading that image and boom, nice. So this looks good. I mean, obviously there's things we could Polish and fix and make better, but I just want to give you a quick overview of what this structure looks like and remember, make sure that everything works and looks good on mobile devices.
All right to finalize, make sure you have a good subject line and a preview text that appears on your mobile notifications. And once you're ready to go, you click start sending and that will create an automation.
Awesome. Well, that was great. It was pretty quick and simple. I hope that you enjoyed that and let's jump into the next lesson and take a look at retargeting.
Access our premium community including bonus tutorials, project files & weekly resources.UNLIMITED ACCCESS