BTP: Template Editor with Gui Schmitt
Behind the Pixels is a conversational blog series that aims to give a glimpse into the work & life of being a designer at Klaviyo
A: Why don’t we start and have you introduce yourself? Tell us a little bit about how long you’ve been a designer and how long you’ve been at Klaviyo.
G: Hi, I’m Gui or Guilherme Schmitt. I’ve been a designer here at Klaviyo since late 2018. Initially, I was part of our mobile team and helped build SMS and I’ve also done some work on our design system. Now I’m working on our templates team which is responsible for the email builder. I have been a designer since around 2013.
A: Yes, you’ve been around the Klaviyo block and you tackled one of the biggest projects that we’ve had to date here. You want to tell us a little bit about the feature we’re going to be talking about today.
G: So this project was unveiled to the world at KPE (Klaviyo Product Event) in Q4 2021. It is our new modern email builder which uses a much more reliable technology that enables us to build upon and deliver value quicker. We have a lot of features in the pipeline that are going to help serve that purpose, which I’ll be happy to talk about as well.
But this original project has been in the works for quite a long time, around two years. From the very beginning, we were thinking about what are the things that we want to do in terms of modernizing our builder and what sort of foundation we want to build so that we can go from there.
And it’s not only myself, I can talk about some of the folks that have worked on this project throughout the years. So for designers, there’s Julie Lungaro, Sara Reich, and Don Ton — if you listen to the podcasts, you might hear some familiar names. And on the product side, Sean Walsh started the project and now Corrine Lin is heading it and for engineering Nikita Shenkman and Daniel Kez. So it was a big team and there were a lot more people that have helped along the way with feedback and all sorts of things.
A: Yes, this was definitely a big one that took a lot of people and I know you guys talked to a lot of customers throughout the process as well. Thinking about the research portion of the project, who did you talk to? And were there any big takeaways that you guys learned along the way?
G: So over the years, we got a lot of feedback from folks about our previous editor — things that people didn’t like and things that were not working as expected. We [also] talked to people that had come from other platforms asking questions like what are the things that they enjoyed about other email builders? And we did a lot of research into creation tools in general, not only for email but anything that involved creation on the web. We learned about the expectations people had coming to our platform…
In terms of surprising things that we’ve learned, whenever you talk to a customer, you always learn about the ways that our product fits into their workflow, and you realize our product is not an island. It coexists with other marketing efforts and apps or other things that might exist in a spreadsheet somewhere. We’re always trying to find out what are the things that people want to get done considering this broader ecosystem?
And what are the features that we could absorb and bring to our own platform so that it becomes an all-in-one place and much easier for people to use. I think that’s just the lens that we use in general whenever we are building things at Klaviyo — understand the customer and what their pain points are, and also acknowledge that, at the end of the day, we are a tool in their belts, and they are trying to get things done and we want to help serve that purpose.
A: Totally, and as designers, we have a lot of different tools that we can use to collate that information. Was there any particular ideation session, maybe an activity you guys did that really stood out to help inform the direction that you all took with the editor?
G: I would say that piece about inspiration — looking into sources, some of them are the obvious ones like our direct competitors, but then also any sort of tool that people might use and find enjoyable to help them get things done. We identified those patterns and saw the things that people were familiar with so that we could bring that to our platform and make the friction of trying new things much smaller… I am an avid collector of either screenshots or gifs or anything that explains a flow of ideas. I think ideas that you can use in design can come from anywhere– so I like to look outside of the most direct stuff and try to see what comes from unexpected places. As for me, as someone that plays video games, I find certain UIs are a great solution for complicated information.
A: The email template editor definitely required making a lot of complex things simple and actionable. Along those same lines, one of our design values is empowering, how did you work this value into the designs for the editor?
G: So when making a creation tool it’s always our mindset that we want to help someone accomplish their goal — they have this email idea in their mind and we want to empower them to make that idea into reality. So, throughout this builder we were finding ways for people to do things quickly, finding ways to optimize the number of steps that they would need to take, and finding defaults that would be sensible so that someone in a time crunch could make something great with the minimum amount of clicks. I think all these things were in our minds in terms of having a tool that empowers people to communicate their brand or express themselves in different ways.
Providing different sorts of stylistic opportunities so that we can, as a toolmaker, support all different ways of creating… you can be expressive, you can be serious, you can be professional, you can be casual — it’s all these things coming into place and empowering them to express themselves. Anything and everything.
And I would say one of the things that we’re working on next, which was also announced at KPE is universal saved content, which will unlock a lot of value and time saving for folks because it will allow brands to be consistent and to have the same language across several different messages and to update things very easily and apply that to a lot of places. So we’re very excited to see this come out soon and can’t wait to see how people use it.
A: Really exciting! The editor is a great example of an extremely complicated technical feature, so I’m sure you guys ran into a few technical limitations. Any examples you have and any ways that you all adjusted based on that?
G: Yeah, all design is an exercise in compromise. The way that we like to think about it, is we design this optimal [experience], usually prefer to think with no constraints, and then as we get closer to implementation or to the mock phase we try to find the compromises that are worth it in terms of things that we need to get from the design system or things that we have to create from scratch.
And I’d say, for the builders specifically, we work closely with the design systems team to find ways that we can improve on some patterns, like dropdowns, so that if we make this for our builder, we’re able to prove it works for everyone and all the places that use it, so that’s pretty cool.
We’ve also recently been building support for custom fonts in our editor. And that’s a feature that has been frequently requested… But the reality of email, as it exists today, from a client standpoint is that a lot of [email clients] don’t show the custom fonts. So even though everyone agrees that this is a great avenue for brand expression, we have to be upfront with our users about the tradeoffs of using those and make sure they have a sensible default so that in case this font doesn’t show, they know what will display instead.
In a certain way, we’re ahead and we’re waiting for the world to catch up to us… I think that it’s one of those things where there is a technical limitation for now but things are already in place whenever that limitation is lifted.
A: Okay, cool. And this project was a long time coming from an engineering perspective. They did a lot of work on the backend while you guys were doing design work. What was the biggest challenge you guys had to overcome to get this out the door?
G: I’d say a big challenge for this feature in general is, and this is something that is a little technical, but when people think about major redesigns from a user standpoint, it seems like you’re just flipping a switch, and then you’re in this magical new world. When in reality our templates all have to be converted to the new editor, and that has to be done for every single email, so it’s a big process. Something that we had to think about and overcome is what is the best way to handle this so that we’re clear and transparent about what could happen [during conversion].
Even if there’s only a small chance that something changes, we want to make sure that we’re upfront and people understand — be transparent about what will occur, and then allow people to preview it to see if it works and they feel comfortable, rather than just do it for everything automatically. So the conversion piece is a big part of this process that was not super obvious when we were designing but that was a key strategic decision of releasing it the right way.
A: Definitely not something we think about often, conversion. Alright, this was a long process and took a lot of blood, sweat, and tears — what are you proudest of with the editor build?
G: The email builder is a core part of our user experience. It’s often the place that people spend most of their time on our platform and I was lucky to be able to help build something that matches people’s expectations and something that our design team wanted to redesign for a while. Awesome to be able to build something that helps people get things done faster, but also reflects our design values in a more clear way.
When the event happened I looked at Twitter and saw people getting excited over it, and it’s cool just seeing how people are adapting and using it. I think that’s always one of my favorite parts of getting anything out the door is seeing how people respond to it and how it helps them do the things they want to do. And if I can help someone save time, and you multiply that by a lot of people, it’s a lot of time.
A: Saving the world time one person and email at a time. Okay, similar question. Is there a favorite memory or something funny from the years that we spent doing this project?
G: We had an opportunity with the folks that lived in and around the Boston area to go as a team to the office [to celebrate]. Some people were still remote but having that day where we were all together, I think that was probably a highlight for me. I know the future is still uncertain as far as if this can be something that we can do on a recurrent basis, but for that little magical moment in time, it was awesome.
A: Love it. And my final question, for other designers out there reading this, what advice do you have for them from your almost a decade of experience designing and taking on challenging problems such as this?
G: When you’re facing a problem that is vague or seems complicated and there’s no obvious solution in front of you, just remember to take it one step at a time and understand that things go through peaks and valleys. I think it’s natural for the creator in any creative process to have a moment in time where you feel like something’s not going right or you need to totally rethink things. When that happens, catch yourself in the moment and try to understand that it’s just part of the process of solving any big problem…
You’re gonna have a little bit of unease because there are so many different ways that you can solve it and it may seem confusing or hard to decide. So take a step back and evaluate things and try to really go back to why you’re doing it and what you are trying to get done. That might help illuminate the path forward and silence those voices that tell you that none of these paths work.
🎉🚢 — A big congrats to Gui and all the folks who made the new template editor a reality! 2022 is sure to bring more awesome new features.
Are you a Klaviyo customer? Build emails in the new editor today!
Interested in helping design the next Klaviyo feature? We’re always looking for great people to join our team.
