Centercode's January release gave users a revamp of our Email Management feature, one of the most critical components in our user testing platform. A lot of functionality hinges on a reliable, easy-to-use email system: it's a foundational part of testing tasks like recruiting, test scheduling, and managing feedback. It's also a central method of relaying info between admin, users, and stakeholders. 

Email is such a normal part of everyday life that it feels very simple—so simple that it's easy to forget the complex processes whirring behind the scenes. After all, technology that works is barely even technology. By design, it works so well you don't have to think about it. It's when it doesn't work correctly, or it's hard to use, or it behaves unexpectedly, that we start to think living like the Jetsons isn't all it's cracked up to be.

Like Douglas Adams said, “Technology is a word that describes something that doesn't work yet.”

(If you know us here at Centercode, you know we love quoting the wisdom of Douglas Adams.)

Today, though, I'm not writing about technology users. I'm writing about technology builders: the wizards behind the curtain, who know exactly how complicated it is to make something easy. The two software engineers who brought this ambitious revamp to life, Dustin Meyer and Michael Ingle, talk about the process, challenges, and creative solutions behind updating Centercode's email management system.

Building a Blueprint for Email Brilliance

When Luke, Centercode's product owner and CEO, started talking to Dustin about an email feature revamp, he had two goals in mind.

First, he wanted to modernize the design of the Centercode Platform's system emails. Unlike the rest of the platform, which has seen its share of cosmetic updates, email was largely unchanged. Luke wanted to bring it more in line with the look and feel of the platform our customers use today.

Second, he wanted to expand the functionality of our email system to include a new, often-requested feature: the ability to custom brand system emails.

"We wanted to establish the design of our emails while giving admin control over the colors and style," Dustin explained. "It was exciting because it's definitely a popular request and another way for users to make the platform their own."

The first step, however, was figuring out what our own system emails look like.

The Centercode Platform sends many different types of email (system emails, customizable system emails, user-generated emails) to keep testers, admin, and stakeholders in the loop before, during, and after a project. A big part of Dustin's technical design was sorting through them all.

"The initial task was figuring out where these changes needed to apply—what we wanted or didn't want to touch," said Dustin. "Some things are buried deeper and may not need to be modernized. Other things have already been modernized."

He also had to strategize on which approaches to take to achieve the project's overarching goals. With over a million people using the Centercode Platform using an unknowable variety of different email clients, it's impossible to account for each and every one. For the sake of compatibility, the solution would have to be relatively basic.

Lastly, Dustin had to account for the limitations of "email" itself.

"Email is old technology; parts of how it works are still antiquated," said Dustin. "It's ironic, but to get a modern look, we needed to use some antiquated techniques."

The Missing Piece: MJML

By the time Michael joined the project about a third of the way in, Dustin's technical design had taken shape. But there were still important aspects that needed more thorough refinement. Namely, how to handle the platform's highly complex feedback threads.

Feedback thread emails allow the user to reply directly to feedback from the email itself, rather than redirecting them to sign in to the platform. It's a deceptively sophisticated process that touches many different areas of the system. That's one of the reasons why Dustin and Michael, two strong full-stack developers, had been brought together to work on it.

The team quickly learned that allowing Centercode admins to inject custom branding on top of these already complex emails would require a solution our current setup lacked. That's when MJML entered the chat.

MJML, short for MailJet Markup Language, is a design framework that uses automation and simpler syntax to make creating responsive, branded emails easier. An online editor translates its table-based layout into the more complex HTML, sort of like turning a sketch into a painting.

"The platform's email system predates MJML, so this was the first time we'd ever attempted to use it," said Michael. "We converted Luke's basic design template into HTML without issue. But as I started building the variations on top of it, the inherent back and forth made it really hard to connect what changes were happening where."

In the end, Michael built the entire template—with all of Centercode's conditionals, styling, tags, etc.—into MJML.

"By building more complexity on the MJML side, it was much easier to account for the different variations that would end up in the final HTML version."

Perfecting the Preview

Meanwhile, Dustin had turned his attention to a different challenge: email previews.

"We really wanted to give users the ability to preview their custom-branded emails. But to do it, we had to come up with a whole new way of previewing raw HTML."

At first, the system would layer all of Centercode's style applications over it, essentially painting on top of the user's custom code. They tried using an iFrame (an element that allows one webpage to be embedded within another webpage), but the built-in security system prevented it from happening.

"It was our technical lead Adam who came up with the idea to use a shadow DOM. In simple terms, it lets us keep the custom design elements separate from the rest of the code, so they don't interfere with each other."

The result of their joint efforts is an email system that not only compliments the design of today's Centercode Platform but also better aligns with the expectations of today's users.

The Quiet Impact of Successful Implementation

Email is something we use every day, like single sign-on, keyboards, or doorknobs. Technology that just works the way it's supposed to is meant to be invisible. That's what "seamless" really means. So, it's not surprising that the bulk of our customers haven't said much about the change. On the other hand, our power users have certainly made their appreciation for these new enhancements known.

The lack of fanfare doesn't take away from the effort or ingenuity it took to produce these results. With that in mind, I asked our two developers what they're most proud of. Dustin is happiest with how the overall design of the system emails turned out.

"For many users, that first email is their first look at the platform. It makes an impact," he said. 

For Michael, conquering the complexity of the feedback threads felt huge. "There are already more requests coming in from the product team that'll be much easier because of the work we've already accomplished."

It's just one more in the bag for these two developers who, as of writing this, have been working together for ten years. They joined the Centercode dev team at the same time, after six years at the company they'd both worked for prior. 

When I reminded them, they looked surprised.

"Ten years, wow," Dustin said. "Sort of a milestone."

Michael laughed, "I guess we should celebrate?"

They plan to do some bouldering together soon.