836 Followers
·
Follow

Designing Emails for Unacademy using Figma — Power of NoCode!

In this article, I am going to about my entire process of how we shipped brand new email designs for Unacademy using Figma.

Image for post
Image for post

Now even though this article is related to design, I am not going to be talking about UI and UX design. This is more where I talk about the process we followed to design and ship beautiful looking emails.

I was the sole designer on the project and handled everything from start with finish (along with product managers of course).

This article is mainly for anyone, especially designers who want to create stunning looking emails,

  • without compromising on design,
  • with a smooth workflow between designers and engineers,
  • without using paid and complex third-party tools.

Alright then, let’s get started.

About the company

Unacademy is an online learning platform where students in India can study for various competitive exams such as UPSE, IIT JEE, NEET, Banking, CA, and more.

The company hires educators who teach the classes LIVE and students can watch them at their own convenience. Students have to pay a subscription fee to access all the content the platform offers. Similar to Skillshare and Netflix.

Gameplan

So in my experience, there are two ways to go about designing and shipping emails to users.

  • Using an email builder like MailChimp or,
  • Manually coding it using a tool like MJML.

I’m not aware of any other ways. But these are the ones I am aware of.

Now we did not want to use a tool like MailChimp to create emails as we did not want to compromise on the design aspect. Email building tools are extremely limited when it comes to customization. Hence we decided not to go in that direction.

The other option was to code it. Sure we would ask the engineers to code it for us. But what we realized was that as the number of types of emails increased it would be very hard for the designers and developers to collaborate. We wanted a smooth workflow where neither the designers nor the developers would work too hard on a simple email.

Power of NoCode

So we started to look online for a few solutions and we came across one. We found this plugin for Figma called Marka Email Generator Plugin.

Image for post
Image for post

Now based on past experiences, we all know that these so-called plugins that export code from designs are a scam and they don't really do a great job.

That's what I thought too until I used it. And viola 😍

The tool did an incredible job of exporting the code. It exports the HTML file with inline CSS and the images. And, its responsive for mobile as well, beat that!

I was too excited to get started. But when I started designing the emails in Figma, I realized it was quite complicated than I had expected it to be. I made a mistake of not reading the documentation on how to use the plugin.

So I highly recommend that you start by reading the documentation and exploring the project files that the plugin provides.

Design Process

So let me take you through a bit of my design process for this project.

I started off with some ideas and inspiration. There are 2 things that I did to get some ideas for the visual language.

As you can see down below, I gathered tons of screenshots and spent a good amount of time analyzing them. A few things that I focused on were

  • how the email’s visual language matched the brand and,
  • the way the content was displayed on the email.
Image for post
Image for post

So after coming up with a very basic direction of the visual language, it was time to design it. But first I sat down with the product manager to understand the list of emails that had to be designed.

There were about 10 different types of emails that had to be designed. OTP, successfull purchase, weekly and daily stats, renewal were are a few of them.

But there was one very imporant aspect I kept in mind when designing the emails. And that was scalability.

This meant that I had to come up with plug and play system where anytime we had to design a new email, all we had to do was to use a component and change the text and numbers. Let me show you what I mean.

Image for post
Image for post
Image for post
Image for post

These are just a few of the plug and play components. Let me give you a few examples on how these could we used in action.

Image for post
Image for post
Image for post
Image for post

Exporting Code

After designing these emails with great care and following all the guidelines mentioned in the documentation, I exported the code and shared it with the backend developers.

They worked on connecting it with their database and sending it to users. I have absolutely no idea about that.

As you can see down below, the plugin allows you to see how the email will look on desktop and mobile devices. It’s pretty dope.

Image for post
Image for post

And… That’s a wrap!

I hope you guys found this case article useful and informative. Feel free to hit me up on any social media platform if you have any questions. I would be more than happy to have a chat with you.

Designer