Stealth Mode North Star — Rebranding in secret with feature flags

A presentation at React Brussels in October 2022 in Brussels, Belgium by Kathleen McMahon

Stealth-mode North Star Rebranding in secret with feature flags — Kathleen McMahon, Senior Design Systems Engineer — Stealth-mode North Star Rebranding in secret with feature flags — Kathleen McMahon, Senior Design Systems Engineer
Welcome, everyone! I’m Kathleen McMahon and I’m here today to show how you can roll out a product rebrand — in secret — using feature flags.
Before we begin, let’s get some details out of the way.

Thank you organizers — Thank you organizers
First, I want to give a huge thank you to Omar, Aymen, the speakers, the event production crew, the volunteers, and everyone that worked so hard to create an excellent event!

https://noti.st/resource11 — https://noti.st/resource11
My presentation will be posted on Notist, that’s https://noti.st/resource11, after my talk.

@resource11 Twitter | Instagram | GitHub — @resource11 Twitter | Instagram | GitHub
You can follow me at. Resource11 on Twitter, Instagram, and GitHub.
Let’s back up so I can introduce myself better…

Kathleen McMahon | Engineer • Designer • Speaker — Kathleen McMahon | Engineer • Designer • Speaker
So I’m an engineer and a designer and I like to speak about things…

image: Me on a cyclocross bike, hopping over barriers and riding through mud. — image: Me on a cyclocross bike, hopping over barriers and riding through mud.
And… I sometimes race cyclocross. Very badly.

image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes — image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes
Mostly you’ll see me in costume, racing two laps to your six, at the back of the pack, on a singlespeed bicycle — with a bunch of onlookers laughing at me, toasting with their beverages.

image: Stanley Spadowski shouts "OPEN WIDE!" and douses boy with a fire hose — image: Stanley Spadowski shouts "OPEN WIDE!" and douses boy with a fire hose
Now I think y’all agree these past few of years have been intense. Right?!

image: Group of penguins gathered on an iceberg with a few swimming and jumping in the ocean. One penguin attempts to jump atop an iceberg to join their penguin friends — and fails — splashing back into the water in ungraceful fashion. — image: Group of penguins gathered on an iceberg with a few swimming and jumping in the ocean. One penguin attempts to jump atop an iceberg to join their penguin friends — and fails — splashing back into the water in ungraceful fashion.
See the penguin in the middle of the screen? The one that failed to jump on the iceberg? That was me. Burning out. Surviving Covid layoffs. Tech interviews. New jobs. The isolation of lockdown. More burnout. So.. I did a few things to survive. Like…

image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases — image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases
Spending my time getting crafty with lighting setups during the colder months.

image: Thor, my floofy beige-striped cat, rests in his bed in my colorfully-lit office — image: Thor, my floofy beige-striped cat, rests in his bed in my colorfully-lit office
Photographing my cats Thor…

image: Thor, resting on the windowsill of my kitchen window, enjoying the warm summer breeze and sunshine on his soft beige fur and dreamy blue eyes.

image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes. — image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes.
…and Otis…

image: Otis and Thor — in perfect light and dark fur contrast — nestle together atop a soft red flannel throw. — image: Otis and Thor — in perfect light and dark fur contrast — nestle together atop a soft red flannel throw.
As this photo of them snuggling clearly shows… they are always fighting. It’s a problem.

image: A wide-planked boardwalk — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide — image: A wide-planked boardwalk — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide
And in the summer, I go to the beaches!

image: Lush green foliage surrounding fiberglass boardwalk leading to the ocean at dawn. The bright orange "Public access 1" sign accenting the way to ocean bliss. — image: Lush green foliage surrounding fiberglass boardwalk leading to the ocean at dawn. The bright orange "Public access 1" sign accenting the way to ocean bliss.
At different times…

image: Weathered wooden railings surround a raised boardwalk leading to an expanse of beach at low tide. Two individuals sit in beach chairs nearby glancing at the calm ocean water. — image: Weathered wooden railings surround a raised boardwalk leading to an expanse of beach at low tide. Two individuals sit in beach chairs nearby glancing at the calm ocean water.
Different days, and…

image: Weathered beige wooden railings and tall sea grass surround soft light beige sand leading to a calm surf at peak low tide. The late morning sun reflecting off of wispy cirrus clouds. — image: Weathered beige wooden railings and tall sea grass surround soft light beige sand leading to a calm surf at peak low tide. The late morning sun reflecting off of wispy cirrus clouds.
Different locations…

image: Dark gray weathered wooden railing and tall sage green sea grass surround a fiberglass boardwalk leading to a deep blue ocean at low tide in the late afternoon. Two fluffy white clouds sail across the clear blue sky. — image: Dark gray weathered wooden railing and tall sage green sea grass surround a fiberglass boardwalk leading to a deep blue ocean at low tide in the late afternoon. Two fluffy white clouds sail across the clear blue sky.
Always at low tide…

image: Calm waves lapping against the sand — image: Calm waves lapping against the sand
Which is the best time…

image: Dark beige wet sand, ready to reveal a baby sand dollar — image: Dark beige wet sand, ready to reveal a baby sand dollar
…to look for sand dollars

image: A sand dollar peeking out of a cluster of rocks, barnacles, and periwinkle shells in a crowded ocean tidal pool. — image: A sand dollar peeking out of a cluster of rocks, barnacles, and periwinkle shells in a crowded ocean tidal pool.
It’s like the Where’s Waldo of the ocean.

image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand. — image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand.
So I get a serious…

image: A tiny pearlescent shell sits on the side of a dark gray sand dollar in the palm of my hand. Beneath my hand is the cool waters of a very crowded tidal pool full of rocks, shells and ocean water. — image: A tiny pearlescent shell sits on the side of a dark gray sand dollar in the palm of my hand. Beneath my hand is the cool waters of a very crowded tidal pool full of rocks, shells and ocean water.
Collection of sand dollars!

image: A gathering of cream-colored sand dollars and a large periwinkle shell in a large open clam shell sitting atop a brown wooden bench at the beach — image: A gathering of cream-colored sand dollars and a large periwinkle shell in a large open clam shell sitting atop a brown wooden bench at the beach
And I photograph

image: A gathering of a dark gray sand dollar, large and small periwinkle shells in a large open clam shell sitting atop a weathered gray wooden bench at the beach — image: A gathering of a dark gray sand dollar, large and small periwinkle shells in a large open clam shell sitting atop a weathered gray wooden bench at the beach
My treasure

image: A gathering of sand dollars of many colors and sizes in a large open clam shell sitting atop the sand next to some seaweed at the beach — image: A gathering of sand dollars of many colors and sizes in a large open clam shell sitting atop the sand next to some seaweed at the beach
Every time

image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill. — image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.
Trying to do this at home is a problem… because of the Otis factor.

image: Otis — black cat of magic — lovingly gazing at me with golden eyes while lying upside down. Paws outstretched. — image: Otis — black cat of magic — lovingly gazing at me with golden eyes while lying upside down. Paws outstretched.
Because Otis is especially needy…

image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table — image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table
See, during lockdown before burnout hit peak, I also started a heck of a crystal collection. And attempted…

image: Otis, the black wonder cat, steps into the frame of my crystal collection — image: Otis, the black wonder cat, steps into the frame of my crystal collection
To get good photos. But Otis was having none of that…

image: Otis' paws walk through my crystal arrangement on the kitchen table — image: Otis' paws walk through my crystal arrangement on the kitchen table
None…

image: grouping of citrine, amethyst, and celestite glowing in the sunshine-washed windowsill — image: grouping of citrine, amethyst, and celestite glowing in the sunshine-washed windowsill
…of it.

image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention. — image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.
None of it.

image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill. — image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.
So my attempts at this…

image: Otis — always insistent black cat — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill. — image: Otis — always insistent black cat — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.
Yeah… nope.

image: Thor — ever curious fluffy beige Manx cat of Wonder — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill. — image: Thor — ever curious fluffy beige Manx cat of Wonder — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.
And now he’s even taught Thor…

image: Thor bravely places his white-mittened beige paw on the windowsill gathering of sand dollars. — image: Thor bravely places his white-mittened beige paw on the windowsill gathering of sand dollars.
To do…

image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement.. — image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement..
The same…

image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching. — image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching.
Thor looks pretty satisfied.

image: Otis looking very cute as he lays upside down on my bed, gazing at me. — image: Otis looking very cute as he lays upside down on my bed, gazing at me.
Who could resist Otis though? He’s the reason I made that intro video that BeJS shared out on Twitter. He wanted to be here.

image: Otis expectantly gazing at me from his cat tree perch. — image: Otis expectantly gazing at me from his cat tree perch.
So here is Otis. Attending by proxy.

image: Penguin — running forward on an icy tundra — skids to a stop. — image: Penguin — running forward on an icy tundra — skids to a stop.
Anyhow… When it was time to head to Brussels to see people in person, I felt so excited! People. Finally!

image: Group of penguins on tundra running away — image: Group of penguins on tundra running away
Then I remembered… omg… talking to people.
How many of you felt the same? My introvert did a little panic…

image: Penguin — running forward on an icy tundra — skids to a stop. — image: Penguin — running forward on an icy tundra — skids to a stop.
But excitement won out, y’all!
And now I’ve shaken off my stage fright anxiety…

A story… — A story…
Thanks for your patience.
So… you’re here to learn about secret rebrands…
I’ll tell you a story about that.

Northwestern Mutual — Northwestern Mutual
Currently, I’m working with an amazing group of people at Northwestern Mutual as a Senior Design Systems Engineer, helping them take the Luna Design System to the next level.

LaunchDarkly — LaunchDarkly
Before working at Northwestern Mutual, I was on the UX Next team at LaunchDarkly. This story is about my time there.
The UX Next team enabled other designers and engineers to craft high-quality experiences for their customers.
Wow, that sure is some corporate speak, huh?

Maturing the design system — Maturing the design system
When I first joined LaunchDarkly, part of our work included maturing the design system.

Design Systems are ALWAYS the hotness image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee. — Design Systems are ALWAYS the hotness image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.
And I’m a super fan of design systems, so it was exciting!

image: Visual of the various intersecting parts of a design system. — image: Visual of the various intersecting parts of a design system.
If you’ve ever worked on a design system, you know there are a lot of things to consider. Which can sometimes feel like…

image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success — image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success
…herding kittens. Always fun, yet lots of moving parts. Similar to herding kittens, maturing a great design system can be tough with so many moving parts. If your squad is small, and not a dedicated system team you have to be very strategic and choose what to tackle. For example…

Foundations missing — Foundations missing
In our case, the foundations were missing from our system. We had components, but none of the building blocks, so we began our journey to define them.

Design tokens — Design tokens
Like design tokens.
Naturally, we were just beginning to start re-defining our tokens when…

In an unexpected twist, someone kicked in the door wearing a Big Bird costume!…

Hello… brand refresh.

image: LaunchDarkly brand visual assets

What is a brand North Star?

There is this article by M81 Creative that gives a great explanation of North star:
“Your brand’s North star is the promise that you are making to your customers.”

At LaunchDarkly, their North Star aligns with their core message:
Software powers the world. LaunchDarkly empowers all teams to deliver and control their software.

image: LaunchDarkly brand visual assets

Creating a strong brand takes time

Creating a strong brand takes time (continued)

Now it gets tricky. — Now it gets tricky.
This is where it gets tricky.
While our team was informed about the brand refresh at the earliest possible moment, we had one wrinkle. And was a big one.

Time to customer rollout: 13 weeks — Time to customer rollout: 13 weeks
The time to the rebrand rollout to customers was in 13 weeks

It was a secret project… — It was a secret project…
And it was a secret project,

It was a secret project… for most of the company — It was a secret project… for most of the company
…for most of the company.

Time to internal rollout: 10 weeks — Time to internal rollout: 10 weeks
That meant the time to internal rollout to our teams was 10 weeks

image: Ross from Friends repeatedly yells "pivot!" as Rachel and he maneuver a large chair up an awkward staircase. — image: Ross from Friends repeatedly yells "pivot!" as Rachel and he maneuver a large chair up an awkward staircase.
So we had to carefully pivot to figure out how to get things done, since…

image: LaunchDarkly marketing site in 2014 — image: LaunchDarkly marketing site in 2014
Typically, visual refreshes happen more often on the marketing side

image: LaunchDarkly marketing site in 2015

image: LaunchDarkly marketing site in 2018

image: LaunchDarkly marketing site in 2019

image: LaunchDarkly marketing site in 2020

image: LaunchDarkly marketing site in 2021

Product visual refresh: less often — Product visual refresh: less often
And visual refreshes happen less often in the product app because…

Rebrands impact established product roadmaps.

Outdated product visuals break brand promises

image: Mars Babycat sleepily squints amid a cozy comforter — image: Mars Babycat sleepily squints amid a cozy comforter
So our team regrouped and thought… how can we get this done?

image: Mars Babycat sleepily squints amid a cozy comforter (still) — image: Mars Babycat sleepily squints amid a cozy comforter (still)
And how do we do this without making any questionable decisions that may impact the product, because you don’t want to be making questionable decisions like I don’t know…

image: Shrimp and lime jello mold, plated with apple slices — image: Shrimp and lime jello mold, plated with apple slices
Making dishes that include jello and shellfish?
It’s just not a good look.
But then… we had an idea.

image: Zootopia's Flash — the best sloth ever — slowly breaks into a grin while Judy Hopps and Nick Wilde patiently wait for information — image: Zootopia's Flash — the best sloth ever — slowly breaks into a grin while Judy Hopps and Nick Wilde patiently wait for information
Why not… use our own product to roll out a rebrand?

Feature flags! This means that…

image: Three baby raccoons nestled inside a tree trunk — image: Three baby raccoons nestled inside a tree trunk
We could set up a flagging structure and…

image: Three baby raccoons nestled inside a tree trunk... with a calico cat disguising themself as a sibling — image: Three baby raccoons nestled inside a tree trunk... with a calico cat disguising themself as a sibling
…rebrand in stealth mode.
We could make all of our changes alongside other teams, not disrupt other squads roadmaps.
All while the other squads were not aware that the product brand refresh was actually happening.

What is a feature flag? — What is a feature flag?
You may be asking… what is a feature flag, anyway?

There is this article by Ian Buchannan about Feature Flags and it states
“Feature flags (also commonly known as feature toggles) is a software engineering technique that turns select functionality on and off during runtime, without deploying new code.”

In JavaScript, it may look something like this.
if (featureFlags[‘new-cool-feature’] === true) { renderNewCoolFeature(); }

How did we use flags? — How did we use flags?
So what did we use flags for in this case?

Boolean flags Prerequisite flags Multivariate flags — Boolean flags Prerequisite flags Multivariate flags
Well, we used three types of flags.
Boolean, prerequisite, and multivariate flags

Well, we used them to control:
Theming, data attributes, fonts, design tokens, HTML templates, and UI updates.

And! Since we had to do it all in 10 weeks…

In secret…

image: the Ruling Ring of Isildur's Bane — image: the Ruling Ring of Isildur's Bane
We used this one ring…

image: the Ruling Ring of Isildur's Bane — image: the Ruling Ring of Isildur's Bane
…ahem!

image: the Ruling Ring of Isildur's Bane — image: the Ruling Ring of Isildur's Bane
One flag as the basis of most of our changes.

Feature Flag: enable-2021-rebrand — Feature Flag: enable-2021-rebrand
The flag that all our other flags were dependent upon was the enable-2021-rebrand flag
Of course, in retrospect, we could have named our flag a bit differently. Anyone in our company that looked up our flag name in our LaunchDarkly UI probably had some idea of what we were working on.

image: Enable 2021 rebrand flag targeting view — image: Enable 2021 rebrand flag targeting view
And this flag was a prerequisite for other flags.

image: Prerequisite flag toggled off, wrapping a group of four feature flags toggled on — image: Prerequisite flag toggled off, wrapping a group of four feature flags toggled on
Prerequisite flags are great for testing out additional features in isolation

image: Prerequisite flag toggled off, wrapping a group of four feature flags toggled on — image: Prerequisite flag toggled off, wrapping a group of four feature flags toggled on
This means you can have all these sub flags turned on.
But unless the prerequisite flag is on…

image: Enable 2021 rebrand flag targeting view — image: Enable 2021 rebrand flag targeting view
…the other flags wouldn’t work

image: Prerequisite flag toggled on, wrapping a group of four feature flags — two toggled on, two toggled off — image: Prerequisite flag toggled on, wrapping a group of four feature flags — two toggled on, two toggled off
A prerequisite flag allowed us to test individual features…

image: Prerequisite flag toggled on, wrapping a group of four feature flags — three toggled on, one toggled off — image: Prerequisite flag toggled on, wrapping a group of four feature flags — three toggled on, one toggled off
In various combinations without impacting the rest of the app.

image: Enable 2021 rebrand flag targeting view — image: Enable 2021 rebrand flag targeting view
And because… secret project, we could target our stakeholders to share a preview of our work.
Once this flag was on, we could continue work on things like…

Theming support using…

Data attributes ● Data attributes…

Data attributes: data-theme=“osmo" data-theme=“legacy” — Data attributes: data-theme=“osmo" data-theme=“legacy”
…to control whichever theme we wanted to serve up.

New font family: Inter — New font family: Inter
But we also wanted to use our new font, Inter, in our visual refresh so…

image: Enable Inter flag targeting view — image: Enable Inter flag targeting view
We added the enable-inter flag inter with the rebrand flag as a prerequisite…

Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true” — Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”
Now that our font flag was set up, we added data-inter to our set of data attributes so we could test fonts independently within our rebrand theme.

Then, we paired those data attribute values with React Context…

And hooks… — And hooks…
import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from ‘react’;
type Theme = ‘legacy’ | ‘osmo’;
export type ThemeContext = { theme: Theme; };
export const ThemeContext = createContext<ThemeContext>(null as unknown as ThemeContext);
export function ThemeProvider({ theme, children, isInterEnabled, }: { theme: Theme; children: ReactNode; isInterEnabled: boolean; }) {
useEffect(() => { document.documentElement.setAttribute(‘data-theme’, theme); }, [theme]);
useEffect(() => { if (isInterEnabled) { document.documentElement.setAttribute(‘data-inter’, ‘true’); } else { document.documentElement.removeAttribute(‘data-inter’); } }, [isInterEnabled]);
const contextValue = useMemo( () => ({ theme, }), [theme], );
return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>; }
export function useTheme() { return useContext(ThemeContext); }

…to create a theme context — …to create a theme context
type Theme = ‘legacy’ | ‘osmo’;
export type ThemeContext = { theme: Theme; };
export const ThemeContext = createContext<ThemeContext>null as unknown as ThemeContext);

...and a theme provider that we could use anywhere we need in our app, — ...and a theme provider that we could use anywhere we need in our app,
export function ThemeProvider({ theme, children, isInterEnabled, }: { theme: Theme; children: ReactNode; isInterEnabled: boolean; }) {
const contextValue = useMemo( () => ({ theme, }), [theme], );
return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>; }

We created this useTheme function for wherever we wanted use a theme. — We created this useTheme function for wherever we wanted use a theme.
export function useTheme() { return useContext(ThemeContext); }

And used our theme provider in the app entry point, leveraging our rebrand flag value to set the theme — And used our theme provider in the app entry point, leveraging our rebrand flag value to set the theme
const theme = is2021RebrandEnabled() ? ‘osmo’ : ‘legacy’;

And pass the theme into the Provider — And pass the theme into the Provider
<ThemeProvider theme={theme} isInterEnabled={isInterEnabled()}>

Which uses the useEffect hooks to set data attributes in the root element of our app. — Which uses the useEffect hooks to set data attributes in the root element of our app.
useEffect(() => { document.documentElement.setAttribute(‘data-theme’, theme); }, [theme]);
useEffect(() => { if (isInterEnabled) { document.documentElement.setAttribute(‘data-inter’, ‘true’); } else { document.documentElement.removeAttribute(‘data-inter’); } }, [isInterEnabled]);

Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true” — Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”
Now that app theming was scaffolded, we could continue work on…

Design tokens. So like I mentioned, before the North Star was revealed, our team was already refactoring our token architecture.
Once this rebrand was announced, we had to adjust our tokens work without losing any of our progress.
And we didn’t have time to automate the process with Style Dictionary.

Design Tokens are an abstraction for everything impacting the visual design of an app/platform. — Sönke Rohde — Design Tokens are an abstraction for everything impacting the visual design of an app/platform. — Sönke Rohde
If you’ve never heard of design tokens, Sönke Rohde Tweeted a great definition: Design Tokens are an abstraction for everything impacting the visual design of an app or platform.

Design Tokens are design decisions propagated through a system. — Nathan Curtis — Design Tokens are design decisions propagated through a system. — Nathan Curtis
In other words, design tokens are design decisions propagated through a system.

Base tokens —color-blue-500: hsl(231.5, 100%, 62.5%);
Semantic tokens —focus-color: var(—color-blue-500);
Component tokens —Button-color-text-focus: var(—color-blue-500);
Generally, tokens span three categories:
Base, the raw values. Semantic, aliased to base values and shared across the application, and component tokens, scoped at the component level.

Blended base + semantic tokens — Blended base + semantic tokens
Our legacy token system was a blend of base and semantic…
Blended base + semantic tokens —primary-green-base: hsl(165.1, 72.5%, 45.7%);

Not Scalable — Not Scalable
…so it wasn’t scalable, due to the naming conventions used.
It didn’t make sense to have a color name in a semantic token if our primary color changed. Hence the refactor.
Considering the 10-week time frame…The tokens that we were most concerned about were our application-level tokens.

We chose to focus on using the data attribute to map our application-level tokens to base tokens in either the legacy or osmo theme.
Since our theme was controlled by a flag, we could target the data attributes in our CSS…
:root { —primary-color: var(—primary-green-safe); }
:root[data-theme=’osmo’] { —primary-color: var(—color-blue-500); }

…And change values by adjusting the data attribute
We used this 1:1 mapping of our values and tested our rebrand by toggling on our flag.
This was especially helpful because we could introduce a new set of semantic tokens quickly without much fuss.
:root { —primary-color: var(—primary-green-safe); }
:root[data-theme=’osmo’] { —primary-color: var(—color-blue-500); }

Now, we could have a separate set of base tokens… — Now, we could have a separate set of base tokens…
:root { —color-error-dark: var(—danger-red-dark); —color-error-base: var(—danger-red-base); —color-info-base: var(—info-blue-base); —color-warning-base: var(—alert-orange-base); —color-success-base: var(—primary-green-base);
—focus-color: var(—info-blue-safe); —primary-color: var(—primary-green-safe); —text-color: var(—gray-black); —text-color-danger: var(—danger-red-dark); }

Then we could create a new set of application-level tokens… — Then we could create a new set of application-level tokens…
:root { —color-error-dark: var(—danger-red-dark); —color-error-base: var(—danger-red-base); —color-info-base: var(—info-blue-base); —color-warning-base: var(—alert-orange-base); —color-success-base: var(—primary-green-base);
—focus-color: var(—info-blue-safe); —primary-color: var(—primary-green-safe); —text-color: var(—gray-black); —text-color-danger: var(—danger-red-dark); }

And change values by adjusting the data attribute — And change values by adjusting the data attribute
By leveraging those data attributes through feature flagging, we could test out our new token values in the app at runtime, without impacting any of the other teams’ work.
:root[data-theme=’osmo’]
:root[data-theme=’osmo’] { —color-error-dark: var(—color-system-red-600); —color-error-base: var(—color-system-red-400) —color-info-base: var(—color-blue-400); —color-warning-base: var(—color-system-yellow-500); —color-success-base: var(—color-system-green-600);
—focus-color: var(—color-blue-500); —primary-color: var(—color-blue-500); —text-color: var(—color-black-300); —text-color-danger: var(—color-system-red-600); }

Including re-mapping tokens for our font family, test, adjust values quickly — Including re-mapping tokens for our font family, test, adjust values quickly
:root[data-inter=’true’]
:root[data-theme=’osmo’]

And set up some component tokens — And set up some component tokens
:root { —Button-color-background-primary: var(—color-success-safe); —Button-color-background-primary-hover: var(—color-success-dark); —Button-color-background-primary-focus: var(—color-success-dark); —Button-color-background-primary-active: var(—color-success-dark);
—Button-color-border-primary: var(—color-success-dark); —Button-color-border-primary-hover: var(—color-success-dark); —Button-color-border-primary-focus: var(—color-success-dark); —Button-color-border-primary-active: var(—color-success-dark);
—Button-color-text-primary: var(—white); }

To theme and streamline our CSS.
Even better, we could use this data attribute to wrap blocks of CSS code, and when it’s time to remove legacy styles, we can quickly remove blocks of code later on.
:root[data-theme=’osmo’] { —Button-color-background-primary: var(—primary-color); —Button-color-background-primary-hover: var(—color-blue-600); —Button-color-background-primary-focus: var(—color-blue-700); —Button-color-background-primary-active: var(—color-blue-700);
—Button-color-border-primary: var(—primary-color); —Button-color-border-primary-hover: var(—color-blue-600); —Button-color-border-primary-focus: var(—color-blue-700); —Button-color-border-primary-active: var(—color-blue-700); —Button-color-text-primary: var(—white); }

Performance optimizations — Performance optimizations
We also used flags in other ways for performance optimizations

In our HTML templates…

We used the LaunchDarkly Go SDK and Go templates on the backend to bootstrap our flag data into our HTML templates.
This would give us just enough information to render our pages.

And used the enable-2021-rebrand feature flag to set the data-theme attribute as a performance optimization.
This way, we could have the HTML templates check for this flag and render the correct theme while we wait for the JavaScript to load and initialize the HTML, to avoid a flash of incorrectly-styled content
{{% if ._flags.Enable2021Rebrand %}}
<html lang=”en” data-theme=”osmo”> {{% else %}} <html lang=”en” data-theme=”legacy”> {{% end %}}

We also used the enable-inter flag value preload this variable font only if the flag was on.
This way, our app performance wouldn’t take a hit from loading any unnecessary fonts if the flag was off.
{{% if ._flags.Enable2021Rebrand %}}
<html lang=”en” data-theme=”osmo”> {{% else %}} <html lang=”en” data-theme=”legacy”> {{% end %}}

For UI updates…

Left nav — Left nav
We used feature flags to control whether we would show/hide content in our left nav

For example, if our rebrand flag was off — For example, if our rebrand flag was off
import { forwardRef, Ref } from ‘react’; import { useTheme } from ‘theme’;
export function AppNavItem({ className, name, icon, href, itemRef, …other }: AppNavItemProps) {
const { theme } = useTheme();
const navItem = React.createElement( ‘a’, { className: classes, href, …other, ref: itemRef }, [ theme === ‘legacy’ && icon && React.cloneElement(icon, { key: ‘icon’, className: ‘AppNav-itemIcon’, ‘aria-hidden’: true }), <span className=”AppNav-itemText” key=”name”> <span className=”AppNav-itemName”>{name}</span> </span> ], );
return navItem; }
export default forwardRef<Element, AppNavItemProps>((props, ref) => <AppNavItem {…props} itemRef={ref} />);

…the legacy theme would be true... — …the legacy theme would be true...
const { theme } = useTheme();
const navItem = React.createElement( ‘a’, { className: classes, href, …other, ref: itemRef }, [ theme === ‘legacy’ && icon && React.cloneElement(icon, { key: ‘icon’, className: ‘AppNav-itemIcon’, ‘aria-hidden’: true }), <span className=”AppNav-itemText” key=”name”> <span className=”AppNav-itemName”>{name}</span> </span> ], );
return navItem; }

…and we’d show icons in the left nav — …and we’d show icons in the left nav
const { theme } = useTheme();
const navItem = React.createElement( ‘a’, { className: classes, href, …other, ref: itemRef }, [ theme === ‘legacy’ && icon && React.cloneElement(icon, { key: ‘icon’, className: ‘AppNav-itemIcon’, ‘aria-hidden’: true }), <span className=”AppNav-itemText” key=”name”> <span className=”AppNav-itemName”>{name}</span> </span> ], );
return navItem;

image: LaunchDarkly left nav in legacy view — image: LaunchDarkly left nav in legacy view
So users would have the expected legacy UI experience

image: LaunchDarkly left nav in rebranded view — image: LaunchDarkly left nav in rebranded view
While we worked on the rebranded nav in secret

Top nav

image: LaunchDarkly legacy view without top nav — image: LaunchDarkly legacy view without top nav
There wasn’t a top nav in the legacy UI…

image: LaunchDarkly rebranded view with top nav — image: LaunchDarkly rebranded view with top nav
…and now there is one.

image: TopBar Spike feature flag targeting view — image: TopBar Spike feature flag targeting view
By adding the topbar-spike flag with the rebrand prerequisite

We could add the top nav into the rebranded UI by turning on the topbar-spike flag. — We could add the top nav into the rebranded UI by turning on the topbar-spike flag.
import classNames from ‘classnames’; import { useTheme } from ‘theme’; import Topbar from ‘components/Topbar/Topbar’; import ‘stylesheets/components/App’;
export const App = ({ className, children, isTopbarSpikeEnabled, }: AppProps) => { const classes = classNames(‘App’, className, { ‘App—with-top-bar’: isTopbarSpikeEnabled, }); const { theme } = useTheme();
return ( <div className={classes}> <SkipToContent /> {isTopbarSpikeEnabled && <Topbar />} <AppNavContainer theme={theme} isTopbarSpikeEnabled={isTopbarSpikeEnabled} /> <main className={classNames(‘App-main’, { ‘App-main-with-topbar’: isTopbarSpikeEnabled })} id=”content” > {children} </main> </div> ); };
export default App;

Since this flag was dependent on the enable-2021-rebrand flag... — Since this flag was dependent on the enable-2021-rebrand flag...
const classes = classNames(‘App’, className, { ‘App—with-top-bar’: isTopbarSpikeEnabled, });
return ( <div className={classes}> <SkipToContent /> {isTopbarSpikeEnabled && <Topbar />} <AppNavContainer isTopbarSpikeEnabled={isTopbarSpikeEnabled} /> <main id=”content”> {children} </main> </div> ); };

...we could test this in isolation — ...we could test this in isolation
const classes = classNames(‘App’, className, { ‘App—with-top-bar’: isTopbarSpikeEnabled, });
return ( <div className={classes}> <SkipToContent /> {isTopbarSpikeEnabled && <Topbar />} <AppNavContainer isTopbarSpikeEnabled={isTopbarSpikeEnabled} /> <main id=”content”> {children} </main> </div> ); };

image: LaunchDarkly Switch environment dropdown view — image: LaunchDarkly Switch environment dropdown view
With LaunchDarkly, whenever you create a new project you get two default environments, production, and test, and they are set to specific colors by default.

image: Rebrand Env Colors flag targeting view — image: Rebrand Env Colors flag targeting view
We wanted to test out new default environment colors, so created the rebrand-env-colors multivariate flag…

image: Rebrand Env Colors flag variations view — image: Rebrand Env Colors flag variations view
…used blocks on JSON in our variations to test out color combinations on the fly…

And used Go to store the values.
if post.Environments == nil { colors := accounts.EnvironmentColors{} if err := json.Unmarshal(ctx.Flags.EnableRebrandEnvColors(), &colors); err != nil { return err } envs = accounts.MakeDefaultEnvironments(“”, colors)

Favicons — Favicons
Lastly… Favicons. It’s always a nice touch to have your favicon ready to go when you roll out your rebrand rather than scrambling to update at the last moment.
Especially if you are using them in more than one environment.

image: Favicon Env variations flag targeting view — image: Favicon Env variations flag targeting view
By adding the favicons-env-variations multivariate flag…

image: Favicon Env variations flag variations view — image: Favicon Env variations flag variations view
We could use strings in our variations…

And serve up whichever favicon version we needed, depending on the environment, in our HTML template. — And serve up whichever favicon version we needed, depending on the environment, in our HTML template.
{{% if ._flags.Enable2021Rebrand %}} <link rel=”icon” type=”image/svg+xml” href=”{{% ./img/{{% ._flags.FaviconEnvVariations %}}.svg”> <link rel=”icon” type=”image/png” href=”{{% ./img/{{% ._flags.FaviconEnvVariations %}}.png”> {{% else %}} <link rel=”icon” type=”image/png” href=”{{% ./img/{{% ._favicon %}}” /> <link rel=”mask-icon” href=”{{% ./img/mask-icon.svg” color=”#055177” /> {{% end %}}

Phew! — Phew!
That was a lot… So to wrap up…

image: The Ruling Ring of Isildur's Bane. One flag… …to rule them all. — image: The Ruling Ring of Isildur's Bane. One flag… …to rule them all.
With the power of feature flags

In a 10-week time frame.

We implemented a substantial amount of changes to a product app.

image: ree baby raccoons nestled inside a tree trunk... with a calico cat disguising themself as a sibling — image: ree baby raccoons nestled inside a tree trunk... with a calico cat disguising themself as a sibling
And rolled out a product rebrand in stealth mode.
So I figure… if we could do it, so can you.

Thank you.

@resource11 Twitter | Instagram | GitHub

Kathleen McMahon
@resource11

1 / 167

Rebranding a product is nothing new. However! Oftentimes, rebranding a product can be a challenge when a product roadmap is in play. Developers want to get a new visual refresh implemented quickly, yet often don’t know where to begin or how to sync those needs alongside other product goals. This talk will reduce the barrier for developers that want to integrate a brand refresh into a product and retain their teams’ feature and velocity goals.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.

See you there! 🙌🏽
— Taz Singh (@tazsingh) August 1, 2022
pic.twitter.com/8nC4gDGISO
— Josh Goldberg 💖 👉 fosstodon.org/@JoshuaKGoldberg (@JoshuaKGoldberg) August 3, 2022
Really looking forward to that talk @resource11
— Omar Jilla (@o_jilla) September 2, 2022
My fall speaking schedule is starting to fill up!

First up... @BrusselsReact on October 14th.

If you're into @DesignTokens, #ReactJS, LaunchDarkly feature flagging, and working in stealth mode, this talk is for you! 👋🇧🇪 pic.twitter.com/oMAGLriSYV
— Kathleen McMahon (@resource11) September 6, 2022
I shall raise a glass in solidarity to your wayward luggage. @BrusselsReact is going to be great! https://t.co/98KvU8Kygr pic.twitter.com/S6yXGSgrVH
— Kathleen McMahon (@resource11) October 13, 2022
😂😂 thanks Kathleen! Apparently my bag and I are finally in the same country 🙌🏾

See you tonight!
— Shaundai Person @shaundai@mas.to (@shaundai) October 13, 2022
Kathleen @resource11 & Otis😸are saying Hi from 🇺🇸 !!!#ReactBrussels folks are so happy to welcome you, but wait, is Otis also into #Javascript ? will he be with us😉!?

🌐 https://t.co/Uif1wbOTkZ pic.twitter.com/62epPcEA4u
— React Brussels 🇧🇪 October 14th (@BrusselsReact) October 13, 2022
Yes he is! And… he definitely wanted a chance to speak on the @BrusselsReact stage. There are so many outtakes of this fresh kitty’s shenanigans. https://t.co/33u7OJT1ea
— Kathleen McMahon (@resource11) October 13, 2022
My trusty bagpipe magnet still travels with me — and breaks into song randomly, @daggala! pic.twitter.com/auh9CppauJ
— Kathleen McMahon (@resource11) October 13, 2022
If the tech check says anything, @BrusselsReact is going to be a fantastic event! pic.twitter.com/70hP2C6vTn
— Kathleen McMahon (@resource11) October 13, 2022
.@resource11 with a story about using feature flags for a secret redesign refresh at LaunchDarkly (dogfooding LaunchDarkly). pic.twitter.com/kPPkdovrsE
— Floor - Signed, Slimmed, SBOM-ed (@FloorDrees) October 14, 2022
Loved your talk on feature flags in design systems @resource11. Super useful and very well put🔥
Those dancing disco lights were fun😂 pic.twitter.com/1ggmHFprgu
— Nikk ⚛ (@niksharma1997) October 14, 2022
Post @BrusselsReact talk treat ready… for later! pic.twitter.com/bAn6SVfJDb
— Kathleen McMahon (@resource11) October 14, 2022
Hilarious watching @TejasKumar_ and @jutanium at second @BrusselsReact dinner! pic.twitter.com/rLxbjX6DXH
— Kathleen McMahon (@resource11) October 14, 2022
A few selfies with @AtilaFassina @JoviDeC @_philpl @JoshuaKGoldberg @DavidKPiano @jen_ayy_ @resource11 @debs_obrien @TejasKumar_ @domizajac & more! 🙌🏽😄❤️ pic.twitter.com/ttqpK6y8te
— Taz Singh (@tazsingh) October 17, 2022
@resource11 talk at @BrusselsReact on accessibilty in User Experience is something I really want to explore more with here

Of course not to miss the lovely sand dollars and the cute snuggling cats slide 🤗

Also thanks for taking beautiful pics of me

Love you loads Kathleen❤️ pic.twitter.com/kv7EBUcoV0
— Bhuvana Meenakshi (she/her) (@bhuvanakotees1) October 21, 2022
I’m really glad you enjoyed it! It’s was so much fun exploring Brussels with you and getting into trouble/taking photos. 🤣 Thanks for the lovely pics! 💞
— Kathleen McMahon (@resource11) October 22, 2022
huge thanks to our Rock Star speakers! @TejasKumar_ @aakansha1216 @alexadark @shaundai @niksharma1997 @ElianCodes @antoinepairet @jutanium @debs_obrien @AtilaFassina @resource11 @stevenfabre @domizajac @ythecombinator @DavidKPiano @JoshuaKGoldberg and our amazing MC @FloorDrees
— React Brussels 🇧🇪 October 14th (@BrusselsReact) November 4, 2022
Welcome @JoshuaKGoldberg @domizajac @stevenfabre @resource11 @AtilaFassina @jutanium @antoinepairet @ElianCodes @niksharma1997 @aakansha1216 @ythecombinator @shaundai @DavidKPiano @TejasKumar_ @debs_obrien
What a day that'll be 😉!!! #javascript #reactjs #webdevelopment
— React Brussels 🇧🇪 October 14th (@BrusselsReact) August 1, 2022