Last year, Ansira was approached by Charter’s email team with a very intriguing challenge: to increase speed-to-market, enhance efficiencies, and improve email engagement and conversion—all at the same time. Bright-eyed, the team gathered in a room with a whiteboard, dry-erase marker, and countless ideas waiting to be brought to life. In the end, it was clear that what the Charter team really needed was something to help guide various teams and agencies with one source of truth: a modular email design system.
A modular design system is a set of building blocks, like Legos, that can be mixed and matched together to build digital experiences. This building block functionality improves the consistency of designs and helps teams scale their production. Combining reusable components and clear guidelines, it allows developers, designers, and other team members to successfully create digital assets—whether they’re experts or not. This reduces the need for custom design, which can be slow, inconsistent, hard to test, and difficult to maintain as teams grow and work volume increases.
In this case, Ansira saw the need and tackled the email channel. In future posts, we’ll show how cross-channel design systems can benefit brands and marketers in big ways.
Ansira was called upon to support three of Charter’s business units: tech, strategy, and development, in conjunction with the brand’s contracted agencies on creative work. In other words, it was the team’s job to facilitate cohesion among internal design, QA, and production.
While gathering stakeholder feedback, documenting opportunities for design improvements, and defining common use cases, the main goal was unifying the creative approach. To do this, Ansira tapped all parties to submit buy-in at every stage.
Given the collaboration of business units and external creative partners involved, each group had its own set of conversations: rounded buttons versus squared, headline capitalization options, defined headers in a container versus floating headers, and so on. With all of these decisions, coupled with a high send volume, the team had to find a way to ground the project noise, beginning with the basics.
The first step of the modular design system was to create a framework of reusable components and modules focused on email legibility, accessibility, and scannability. Next came the base elements, composed of three key components: a responsive grid, type hierarchy, and color palette. Then, the Ansira team designed the call-to-action buttons and created a modular structure for all emails.
While the header and footer were created with ease, the primary, secondary, and tertiary modules were an entirely different feat – needing to account for two business units and various client teams, external agencies, and seven email messaging types—with various segments and customizations.
The result was a pattern library with over 200 responsive components that can be used interchangeably—and are able to scale for collaboration and production.
For many, this shiny, new thing was also a new workflow, which came with its own learning curve. Gaining buy-in across teams, clients, and stakeholders is what makes or breaks a design system; it’s what determines if it’s going to be used or not.
Since February, Ansira has been meeting with all teams twice a month to unify the creative approach and help streamline the workflow for faster production.
With stakeholders on board for this new modular workflow, it was time for design testing. The first set of results are driving further changes to the design system. Incremental changes make them fairly easy to implement across such a large team. It’s also at this point that Ansira’s strategy team got involved, providing new ideas for a more powerful experience-based testing plan to really gain insights from the audience.
As for enhancements on the technical side, there are many ways in which the system has benefited, including a more modern approach to standards that translate to higher accessibility ratings and usability. Because the overall concept is modular, the team is able to reduce the amount of time in development, making the end result much more predictable. This, in turn, streamlines testing and quality assurance leading to an overall reduction in effort and increase in productivity while minimizing error. Making gains in these areas enabled focus on a restructuring of the data process and transforming interactions with the massive audience receiving emails.
During this time, the tech team was able to begin gaining deeper learnings about Charter’s audiences and customer data. While the road to this outcome was no walk in the park, the simplified version is that a modular design system, when coupled with the right customer data and campaign strategy, can engineer a very powerful data-driven creative workflow. Instead of manually designing a single email for a single audience, Charter can now design several content modules at once, letting the data compose the emails. Once this new workflow has been in use for a while, the next step is to dive into the analytics and see how the improved customer experience has directly increased conversions.
To create an effective modular design system, there are a few key steps you need to take.
Introducing a modular approach along with a custom design system into your email workflow can lead to increased efficiency, decrease production costs, and make it easier for you to iterate and innovate on your designs. Sure, it requires an initial investment of time to get everything up and running. But if you send a decent volume of emails and are willing to make the initial investment, the result will improve your designs and the customer experience, and your engagement rates will lead to a boost in revenue.
Up next: Cross-Channel Design Systems