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

A presentation at Trajectory 2021 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

UX Next

UX Next

Maturing our design system

Maturing our design system

 [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

Hello… brand refresh.

Hello… brand refresh.

[image] Collection of LaunchDarkly brand assets

[image] Collection of LaunchDarkly brand assets

What is a brand North Star?

What is a brand North Star?

“Your brand's North star is the promise that you are making to your customers.” — M81 Creative

“Your brand's North star is the promise that you are making to your customers.” — M81 Creative

[image] Collection of LaunchDarkly brand assets

[image] Collection of LaunchDarkly brand 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

[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] 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?

[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

One flag to rule them all

One flag to rule them all

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] Enable 2021 rebrand flag targeting view

[image] Enable 2021 rebrand flag targeting view

[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”

We paired those data attribute values with React Context…

We paired those data attribute values with React Context…

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

Design tokens

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

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

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

We could create a set of semantic tokens…

We could create a set of semantic 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 even set up some component tokens

And even set up some component tokens

To theme and streamline our CSS to quickly remove blocks of code later on.

To theme and streamline our CSS to quickly remove blocks of code later on.

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, and we’d show icons in the left nav

…the legacy theme would be true, 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 rebranced view with top nav

[image] LaunchDarkly rebranced 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, we could test this in isolation.

Since this flag was dependent on the enable-2021-rebrand flag, we could test this in isolation.

Environment switcher

Environment switcher

[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

[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] 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

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.

Buzz and feedback

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