Stealth-mode North Star Rebranding in secret with feature flags — Kathleen McMahon, Senior Design Systems Engineer
Thank you organizers
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: 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: 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: 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 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: 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: Calm waves lapping against the sand
image: Dark beige wet sand, ready to reveal a baby sand dollar
image: A sand dollar peeking out of a cluster of rocks, barnacles, and periwinkle shells in a crowded ocean tidal pool.
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 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 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 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 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 multiple shapes, sizes and colors on my dining room windowsill.
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: A gathering of sand dollars of multiple shapes, sizes and colors on my 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.
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 bravely places his white-mittened beige paw on the windowsill gathering of sand dollars.
image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement..
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: Otis looking very cute as he lays upside down on my bed, gazing at me.
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…
Northwestern Mutual
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: Visual of the various intersecting parts of a design system.
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 (continued)
Now it gets tricky.
Time to customer rollout: 13 weeks
It was a secret project…
It was a secret project… for most of the company
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 (still)
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
What is a feature flag?
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. One flag… …to rule them all.
image: ree baby raccoons nestled inside a tree trunk... with a calico cat disguising themself as a sibling
Thank you.