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
UX Next
Maturing our design system
[image] woman attempting to arrange 10 squirming kittens in a straight line, with varied success
Hello… brand refresh.
[image] Collection of LaunchDarkly brand assets
What is a brand North Star?
“Your brand's North star is the promise that you are making to your customers.” — M81 Creative
[image] Collection of LaunchDarkly brand assets
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] 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] 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?
[image] The Ruling Ring of Isildur's Bane
[image] The Ruling Ring of Isildur's Bane
One flag to rule them all
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
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”
We paired those data attribute values with React Context…
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
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
Data attributes: data-theme=“osmo" data-theme=“legacy" data-inter=“true”
We could create a set of semantic tokens…
And change values by adjusting the data attribute
Including re-mapping tokens for our font family, test, adjust values quickly
And even set up some component tokens
To theme and streamline our CSS to quickly remove blocks of code later on.
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 rebranced 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.
Environment switcher
[image] LaunchDarkly Switch environment dropdown view
[image] Rebrand Env Colors flag targeting view
[image] Rebrand Env Colors flag variations view
[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] Three baby raccoons nestled inside a tree trunk... with a calico cat disguising themself as a sibling