Stealth-mode North Star: Rebranding in secret with feature flags

A presentation at React Miami in in Miami, FL, USA by Kathleen McMahon

 Stealth-mode North Star — Rebranding in secret with feature flags

Stealth-mode North Star — Rebranding in secret with feature flags

https://noti.st/resource11

https://noti.st/resource11

@resource11 Twitter | Instagram | GitHub

@resource11 Twitter | Instagram | GitHub

Kathleen McMahon | Engineer • Designer • Speaker

Kathleen McMahon | Engineer • Designer • Speaker

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.

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

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

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.

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

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

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: 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.

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.

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.

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

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

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

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

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

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.

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.

image: Otis sitting atop his cat tree, looking down into the living area.

image: Otis sitting atop his cat tree, looking down into the living area.

image: Otis expectantly gazing at me from his cat tree perch.

image: Otis expectantly gazing at me from his cat tree perch.

image: Penguin — running forward on an icy tundra — skids to a stop.

image: Penguin — running forward on an icy tundra — skids to a stop.

image: Group of penguins on tundra running away

image: Group of penguins on tundra running away

image: Penguin — running forward on an icy tundra — skids to a stop.

image: Penguin — running forward on an icy tundra — skids to a stop.

A story

A story

LaunchDarkly

LaunchDarkly

Maturing the design system

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.

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

Foundations missing

Foundations missing

Design tokens

Design tokens

Hello… brand refresh.

Hello… brand refresh.

image: LaunchDarkly brand visual assets

image: LaunchDarkly brand visual assets

What is a brand North Star?

What is a brand North Star?

image: LaunchDarkly brand visual assets

image: LaunchDarkly brand visual assets

Creating a strong brand takes time

Creating a strong brand takes time

Creating a strong brand takes time

Creating a strong brand takes time

Now it gets tricky.

Now it gets tricky.

Time to customer rollout: 13 weeks

Time to customer rollout: 13 weeks

Time to internal rollout: 10 weeks

Time to internal rollout: 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.

image: LaunchDarkly marketing site in 2014

image: LaunchDarkly marketing site in 2014

image: LaunchDarkly marketing site in 2015

image: LaunchDarkly marketing site in 2015

image: LaunchDarkly marketing site in 2018

image: LaunchDarkly marketing site in 2018

image: LaunchDarkly marketing site in 2019

image: LaunchDarkly marketing site in 2019

image: LaunchDarkly marketing site in 2020

image: LaunchDarkly marketing site in 2020

image: LaunchDarkly marketing site in 2021

image: LaunchDarkly marketing site in 2021

Product visual refresh: less often

Product visual refresh: less often

Outdated product visuals break brand promises

Outdated product visuals break brand promises

image: Mars Babycat sleepily squints amid a cozy comforter

image: Mars Babycat sleepily squints amid a cozy comforter

image: Mars Babycat sleepily squints amid a cozy comforter

image: Mars Babycat sleepily squints amid a cozy comforter

image: Shrimp and lime jello mold, plated with apple slices

image: Shrimp and lime jello mold, plated with apple slices

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

image: Three baby raccoons nestled inside a tree trunk

image: Three baby raccoons nestled inside a tree trunk

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

How did we use flags?

How did we use flags?

Boolean flags, Prerequisite flags, Multivariate flags

Boolean flags, Prerequisite flags, Multivariate flags

image: the Ruling Ring of Isildur's Bane

image: the Ruling Ring of Isildur's Bane

image: the Ruling Ring of Isildur's Bane

image: the Ruling Ring of Isildur's Bane

image: the Ruling Ring of Isildur's Bane

image: the Ruling Ring of Isildur's Bane

Feature Flag: enable-2021-rebrand

Feature Flag: enable-2021-rebrand

image: Enable 2021 rebrand flag targeting view

image: Enable 2021 rebrand flag targeting view

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

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

image: Enable 2021 rebrand flag targeting view

image: Enable 2021 rebrand flag targeting view

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

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

image: Enable 2021 rebrand flag targeting view

image: Enable 2021 rebrand flag targeting view

Data attributes: data-theme=“osmo" data-theme=“legacy”

Data attributes: data-theme=“osmo" data-theme=“legacy”

New font family: Inter

New font family: Inter

image: Enable Inter flag targeting view

image: Enable Inter flag targeting view

Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”

Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”

And hooks…

And hooks…

…to create a theme context

…to create a theme context

...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,

We created this useTheme function for wherever we wanted use a theme.

We created this useTheme function for wherever we wanted use a theme.

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

And pass the theme into the Provider

And pass the theme into the Provider

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.

Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”

Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”

 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

Design Tokens are design decisions propagated through a system. — Nathan Curtis

Design Tokens are design decisions propagated through a system. — Nathan Curtis

Blended base + semantic tokens

Blended base + semantic tokens

Not Scalable

Not Scalable

 Now, we could have a separate set of base tokens…

Now, we could have a separate set of base tokens…

 Then we could create a new set of application-level tokens…

Then we could create a new set of application-level tokens…

And change values by adjusting the data attribute

And change values by adjusting the data attribute

Including re-mapping tokens for our font family, test, adjust values quickly

Including re-mapping tokens for our font family, test, adjust values quickly

And set up some component tokens

And set up some component tokens

Performance optimizations

Performance optimizations

Left nav

Left nav

For example, if our rebrand flag was off

For example, if our rebrand flag was off

…the legacy theme would be true...

…the legacy theme would be true...

…and we’d show icons in the left nav

…and we’d show icons in the left nav

image: LaunchDarkly left nav in legacy view

image: LaunchDarkly left nav in legacy view

image: LaunchDarkly left nav in rebranded view

image: LaunchDarkly left nav in rebranded view

Top nav

Top nav

image: LaunchDarkly legacy view without top nav

image: LaunchDarkly legacy view without top nav

image: LaunchDarkly rebranded view with top nav

image: LaunchDarkly rebranded view with top nav

image: TopBar Spike feature flag targeting view

image: TopBar Spike feature flag targeting view

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.

Since this flag was dependent on the enable-2021-rebrand flag...

Since this flag was dependent on the enable-2021-rebrand flag...

...we could test this in isolation

...we could test this in isolation

image: LaunchDarkly Switch environment dropdown view

image: LaunchDarkly Switch environment dropdown view

image: Rebrand Env Colors flag targeting view

image: Rebrand Env Colors flag targeting view

image: Rebrand Env Colors flag variations view

image: Rebrand Env Colors flag variations view

Favicons

Favicons

image: Favicon Env variations flag targeting view

image: Favicon Env variations flag targeting view

image: Favicon Env variations flag variations view

image: Favicon Env variations flag variations view

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.

Phew!

Phew!

image: The Ruling Ring of Isildur's Bane

image: The Ruling Ring of Isildur's Bane

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

Thank you.

Thank you.

Great products combine valuable features with strong branding to a target audience. Defining your brand’s North Star is the key to delivering the standards of that promise to your customers in a compelling — and memorable way.

Occasionally though, your visual brand is redefined and you need to course-correct your UI to align with a new direction, while the rest of your team is meeting their own product goals. However! What if details of the rebrand are not widely shared within your organization? How do you get that rebrand in without sharing the details until it’s time?

In this talk, we’ll take a look at how you can use feature flags to roll out an updated UI in stealth mode — without impacting the work or velocity of your fellow teammates.

Video

Resources

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

  • LaunchDarkly

  • Design Tokens are an abstraction for everything impacting the visual design of an app/platform.

  • Micaela Se Botó — Sonora Carruseles — Video Oficial

    My presentation stage walk-on music — and favorite song — of my dance partner, Otis the haus panther.

    Music lyrics by https://www.musixmatch.com/:

    Bailando mi bugalú, Micaela se pasó (¡Ay, ay, ay! Micaela se botó) Que se botó, se botó, Micaela se pasó (¡Ay, ay, ay! Micaela se botó)

    Micaela cuando baila (¡Sí, señor!) El bugalú arrebata (¿Cómo no?) Micaela cuando baila (¡Sí, señor!) El bugalú arrebata (¿Cómo no?) Toda la gente la llama (¡Sí, señor!) La reina del bugalú

    Que se botó, que se botó, que se botó (¡Ay, ay, ay! Micaela se botó) Y cuando yo bailo con ella, atrás me dejo (¡Ay, ay, ay! Micaela se botó)

    Cuando yo baile con ella (¡Sí, señor!) Micaela se botó (¿Cómo no?) Cuando yo baile con ella (¡Sí, señor!) Micaela se botó (¿Cómo no?) El bugalú lo bailó (¡Sí, señor!) Pues, yo sé que ella es candela

    Micaela es una nota bailando bugalú (¡Ay, ay, ay! Micaela se botó) Ha botado la pelota y tremondu rebotu

    Que se botó, que se botó, que se botó (¡Ay, ay, ay! Micaela se botó) El bugalú bailó y mucho lo gozó

    Qué bien se ve Micaela cuando baila bugalú (¡Ay! Mira Micaela cómo baila bugalú) Lo dice toda la gente y lo dice Marilú

    ‘Tá sabrosa Micaela igual que mi bugalú (¡Ay! Mira Micaela cómo baila bugalú) Se pasa la noche entera bailando mi bugalú

  • What Is Your Brand’s North Star

Buzz and feedback

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