Building a multi-brand joint venture design system for BetMGM, with ToniAnn Drenckhahn

🎧 listen to Episode #06 with ToniAnn Drenckhahn from BetMGM, on creating a brand new design system for a multi-brand organization.

This episode is our first project deep dive and it's full of legacy codebases, lessons learned, and big wins!

Read on for a peek into the episode.

ToniAnn Drenckhahn joins the show to share her experience building a multi-brand design system for BetMGM and Entain's joint venture. ToniAnn talks to us about dealing with ambiguity, owning your decisions, and keeping leadership on board as you ship a system that changes the way your business works—and your partners businesses, too.

💖 On Theme is a brand new podcast, so if you like what you're hearing, please hit subscribe on your favorite podcast platform, leave a rating or review, or share the show with someone! I love hearing your thoughts and questions, so to text the show or message me on LinkedIn and let me know what you think!

ToniAnn Drenckhahn: 

The proof of concept for the design system actually started on the tech side. Our [organizational partner teams] built a proof of concept, which showed how we could manage theming easily through Figma variables and outputting that through Storybook and maintaining that single source of truth connection. It was a really cool concept.

But it was really focused on the technicalities of delivering theming behind the scenes, and this idea of providing brands more autonomy over their front end styling.

So when we started we were like, all right, we've got the dev side, proved out this model could work from a technical standpoint. Now they staff design[ers] to it.

To be honest, I don't know that anyone understood exactly what we were about to get into, as is the case with a lot of design system work. Yeah, we're going to build components, we're going to build tokens, but there's so much more underneath it, that I think many people didn't expect.

And so we started designing components and churning things out really way too fast, ahead of dev teams, even like nothing was aligned, nothing was really thought through.

Elyse:

YOLO some components.

ToniAnn Drenckhahn: 

Yeah. I mean, leadership wants to see something, and how we're going to make this progress. And so you figure like, okay, well, we've got to put together a proof of concept. But a proof of concept does not make a robust design system.

Elyse: 

No. Tell me a little more about that dev proof of concept. You said they were working on theming? Because when I hear a proof of concept to go from some Figma variables to some code variables and see that in Storybook with the words “proof of concept”, I'm imagining a bunch of tooling that is not the same thing as going into all of our actual front end code and tokenizing it and getting those things into real production. Is that where it started?

ToniAnn Drenckhahn:

Yeah. Pretty much. I mean, it's a vision, right? It's a vision of, this would be really cool if we had this. Not really a plan yet on how we're going to deliver theming at scale.

Because it's one thing to theme your components, but it's another thing to have your entire application be themed. That is a multi year journey for us.

We had to do a lot of work to explain, too, because there's a lot of misunderstandings or misconceptions about, oh, we're working on the design system, so when will we get light mode and dark mode?

And I was like, wait a minute! There's a few things in between there that we're going to have to do!

I think that was the toughest part of the POC. It generates what we need in terms of buy-in, to keep going on this route of design systems. We had a lot of support from leadership at a high level about what this thing was going to give us, and what it was going to do … but it remained to be seen how this was going to be managed.

Elyse:

Yeah, it makes sense that leadership is interested, right? You're describing a massive legacy code base where it's actually impeding your team's ability to deliver improvements on the product. But you were saying we went way too fast. We went straight into building components. How did that actually get started? What did you build? What kind of components did you start designing? And then when did you realize we can't just make these off in a corner?

ToniAnn Drenckhahn: 

So I mean, differentiation was a huge conversation when we first started this. And when we say differentiation, we mean like brand differentiation. A lot of what Entain feels managing all these brands is [that] everyone wants something different, and so how do we do this at scale?

When we did this proof of concept, we actually took our sports header navigation. Our sports is typically the most complex part of the app that we have. We were like, let's try this out. The navigation is actually different across Entain brands, so we share like one product platform, but it shows up in different ways. Good example: we always use pills to navigate, one of the Entain brands has tabs.

So [we] wanted to see how [we could] create a design system that will support switching a theme and … different product areas.

So we ran really fast for the POC, [and] there was a misunderstanding at first that the components we put in the POC were done. And we're like, no, that was like—

Elyse: 

No, no, no.

ToniAnn Drenckhahn: 

It's proof of concept. This is not delivery.

🎨🎟️ Into Design Systems is May 25-28. Get your ticket at intodesignsystems.com/ontheme

Into Design Systems is back with their annual virtual conference, May 28-30, 2025. Get your ticket now for three days of practical, hands on sessions showing the what, why, and how of design systems. This year, the conference is focused on developer handoff, accessibility, multi brand theming, and governance. You'll get hands on knowledge you can put to use at work immediately, files and resources to take away, and hear from very well known industry speakers. Get your ticket and support the podcast by supporting our generous sponsor!

See you next episode!,

Reply

or to participate.