Microsoft needed a library of reusable page components for its product websites by launch dates that were set in stone. We delivered 33 components in just four weeks. Now, the organization’s marketing teams use them to build almost every new page.
Windows and Surface websites are among the most visited product pages in the world. The teams behind them needed reusable building blocks to get content out there, and they needed them fast.
Fixed launch dates
At Microsoft, each product launch is tied to a specific date – and that date doesn’t change. Ad campaign marketers, in-person events organizers, and several other teams all work from the same shared timeline. That meant every component had to be ready, tested, and working on a tight timeframe, so the pages built from them could go live on schedule.
No time to ramp up
Because of the launch constraints, there was almost no time for onboarding. Microsoft needed a partner that could understand a large, complex setup, get up to speed quickly, and start delivering straight away.
One high standard, multiple variations
Every component had to work across both brands in many languages, in light and dark mode, on every device, and be fully accessible. One sub-par component would have shown up on pages seen by millions of people.
For our Windows and Surface launches, Lucky Media built our component library and quickly became a true partner, bringing recommendations that helped us make better decisions.
They hit every deadline, and every component arrived accessible, documented and quality-checked.
Jim Arment
Principal Software Engineer @ MicrosoftMicrosoft’s marketers got a complete library on schedule, packed with all the components they need. And they’ve been building with it ever since.
33 components in four weeks: A new batch arrived every week, each one ready to use, with nothing pushed back.
90% of new landing pages are built from our components: Microsoft now assembles new launch pages almost entirely from the library, with no new development needed.
Less than one issue per component: Projects like this typically see three to five fixes per component. We had just 20 across all 33, because every component was tested before it reached production.
Ready for every market: Each component was tested with right-to-left languages and with text about 40% longer than English, so translated pages never break. All the copy is controlled by the content team.
Premium motion, for everyone: Launch pages feature smooth scroll animations, like stacking cards and hero reveals, on every device. Each animation has a less frenetic alternative for visitors who prefer reduced motion.
From project to partnership: The success of the component library has led to an ongoing engagement with Microsoft’s web teams.
33
components in 4 weeks
90%
new landing pages
4
weeks to deliver
2
brands, 1 codebase
We treated quality as part of every sprint, not a final step. Automated accessibility tests ran on every change, and we also tested by hand with keyboards and screen readers. That caught problems the tools missed, like invisible focus states and animations visitors couldn’t pause.
And we didn’t stop at the brief. When a problem needed input from Microsoft’s design or engineering partners, we worked through it with them instead of just delivering to spec. Because the library is still growing, we handled what Microsoft’s teams needed now while planning for the future, suggesting improvements to the wider library along the way.
Storybook as the single source of truth
Each component’s Storybook stories define how it looks and behaves. The docs, the tests, and the design review all read from those same stories, so they will stay in step as the library grows. Both brands share one React and TypeScript codebase, and each brand has its own design tokens.
Design review: Designers check every state, in light and dark mode, for both brands.
Live docs: The developer docs are generated from the code, so they update whenever the code does.
Automated tests: Every story runs interaction and accessibility tests in a real browser, and any failures block the release.
Preview links: Every change publishes a Storybook preview, so reviewers can check it before it’s merged.
Easy handoff: The standards and checks live in the repo, so Microsoft’s engineers can keep the same quality bar without relying on us.
Let’s chat
We partner with a limited number of brands each quarter to ensure senior-level attention on every project.
