Stealth-mode North Star — Rebranding in secret with feature flags
https://noti.st/resource11
@resource11 Twitter | Instagram | GitHub
Kathleen McMahon | Engineer • Designer • Speaker
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: 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: 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, 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 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: 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' paws walk through my crystal arrangement on the kitchen table
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 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 expectantly gazing at me from his cat tree perch.
image: Penguin — running forward on an icy tundra — skids to a stop.
image: Group of penguins on tundra running away
image: Penguin — running forward on an icy tundra — skids to a stop.
A story
LaunchDarkly
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.
image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success
Foundations missing
Design tokens
Hello… brand refresh.
image: LaunchDarkly brand visual assets
What is a brand North Star?
image: LaunchDarkly brand visual assets
Creating a strong brand takes time
Creating a strong brand takes time
Now it gets tricky.
Time to customer rollout: 13 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: LaunchDarkly marketing site in 2014
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
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: 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: 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
How did we use 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
Feature Flag: enable-2021-rebrand
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: 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 — three toggled on, one toggled off
image: Enable 2021 rebrand flag targeting view
Data attributes: data-theme=“osmo" data-theme=“legacy”
New font family: Inter
image: Enable Inter flag targeting view
Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”
And hooks…
…to create a theme context
...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.
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
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”
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
Blended base + semantic tokens
Not Scalable
Now, we could have a separate set of base tokens…
Then we could create a new set of application-level tokens…
And change values by adjusting the data attribute
Including re-mapping tokens for our font family, test, adjust values quickly
And set up some component tokens
Performance optimizations
Left nav
For example, if our rebrand flag was off
…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 rebranded view
Top nav
image: LaunchDarkly legacy view without top nav
image: LaunchDarkly rebranded view with top nav
image: TopBar Spike feature flag targeting view
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
image: LaunchDarkly Switch environment dropdown view
image: Rebrand Env Colors flag targeting view
image: Rebrand Env Colors flag variations view
Favicons
image: Favicon Env variations flag targeting view
image: Favicon Env variations flag variations view
And serve up whichever favicon version we needed, depending on the environment, in our HTML template.
Phew!
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
Thank you.