The Label: Creating a design system for email
Uli Gottwald, Senior Product Designer at the Fashion Store, shares some of the challenges and opportunities of transforming this essential customer channel.
Email is a direct line to our customers. We can use it to grab attention, start a conversation, create interest, encourage exploration, and deepen our relationship. So naturally, it demands a lot of design love. Yet, while we had been constantly updating and improving our on-site experience — fashion and tech both move rapidly — our email design was rather neglected. With our new Label redesign we had the chance to finally fix email in style; adding much more of the personalised joy that is at the heart of our brand experience.
One size never fits all
Zalando was operating across 17 different markets (it’s 23 now!), each with their own needs, trends, styles and cultural nuances. But with the existing email communication, we were limited to 5 templates to cover all of these demands. It was clear we needed more flexibility.
So we set ourselves three key objectives:
- How could we enable each market to create and test emails independently?
- How could we connect this seamlessly with the on-site brand experience?
- And how could this all be packaged within a coherent design system?
Yes, we set the bar high, but we also knew this was an opportunity to really make an impact on this vitally important, customer touch point. We needed a modular email design system, which meant we could just grab any element, fill it with content, and it’s ready to be sent out. Such elegant simplicity involved tackling some really tricky challenges.
Overcoming restrictions
Before we could begin designing, we needed to fully understand all the restrictions imposed by the major email clients such as Gmail, Outlook, and Apple Mail. Sure, HTML5 can create amazingly rich emails that effectively act as mini websites within your inbox. But if we wanted all our customers to be able to see and read our emails the way we intended, we didn’t have the same freedom and flexibility as when we’re designing on the fashion store site.
For example, horizontal scrolling carousels are not possible in some major email clients. We had to find a solution that could work around such restrictions, yet still provide a richly engaging experience that encouraged exploration and click through to the site.
Not overwhelming customers
Some of our on-site elements include a link carousel which displays up to eight links at once. Since we couldn’t display a carousel the same way within an email, we had to come up with a workaround. We knew from our research that most people don’t read long emails and rarely scroll through to the end. So instead of stacking those eight links, we tuned our email tool to select the four most relevant links based on the customer’s shopping behavior. (For example, if our customer indicated that they liked jackets, and jackets happen to be part of the links in the on-site element, jackets would be displayed within the customer’s email).
The moment of truth
What we developed was a real step change. But before we could launch, we needed to rigorously test it with our customers. Could they navigate easily? What were their expectations about the links we had set up?
As it turned out, the response was really positive in terms of navigation, so our research ended up mostly being about content. Here are some of the main things we discovered:
- Subject lines are critical, if they don’t grab the attention they go in the bin.
- Keep text short, and because customers won’t read through to the end, they need to be punchy at the very beginning.
- Make the content visually rich, this invites click through to products.
- Vouchers and coupons are loved and easily clicked on.
Providing implementation guidance and support
After some minor iterations based on these insights, it was time to implement the elements into the tooling, and educate our markets and designers on how to adopt this new system. Initial hesitation from our colleagues representing the markets — who were used to the previous method and needed some guidance and a few workshops — soon turned to excitement about the possibilities the new approach offered. It was personally very satisfying to see how quickly the market teams embraced and mastered what we have developed. And as you can see, the difference speaks for itself!
So, what did we achieve?
This is the first fully-considered design system for email at Zalando, and it took just three months to build. Here’s what we achieved in that short time frame:
- Emails can now be fully automated as well as manually created.
- We can now dynamically generate hundreds of different emails without relying on fixed templates.
- Market teams can now create emails independently of one another, and test as often as they like to fully understand what works for them.
- Changes to emails no longer require either design or engineering support.
But most importantly, Zalando can now shape a seamless email experience that provides customers with colourful and relevant content to guide them through a shopping journey they will be delighted by.
My own journey
This project involved a big step out of my comfort zone, and to be honest, I was a bit intimidated at first. This was the first time I would be creating an entire design system on my own, and I was entrusted with one of Zalando’s most important communication channels. But I embraced the opportunity, because I knew that leaving my comfort zone was the only way I would grow as a designer.
This new email design system has enabled my colleagues to create engaging communications without feeling the limitations of templates or need for engineering support. And that’s what makes this a very special project for me.
