Docusaurus to Astro migration

Bringing Yarn’s new design to life, a month early

Yarn had a new website design ready, but no one free to build it. We rebuilt the site from the ground up as a free contribution to the open-source community, and launched a month ahead of schedule.

Yarn website redesign with Astro
Maël Nison

We partnered with Lokman and the Lucky Media team for a couple of months to rebuild the Yarn website based on a new design we had commissioned but didn't have the bandwidth to implement.

Their help was critical, making us gain weeks of work and letting us focus on our core project. They communicated well, periodically sharing updates and always remaining open to feedback. I'm very grateful for their help and would recommend them to anyone looking for a partner to help them with their projects.

Challenges

Millions of developers rely on Yarn, and its website is where many of them first discover it. The site wasn’t broken, but it was holding the team back.

A new design with no one to build it

Yarn had commissioned a new website design, but its small team didn’t have time to build it. Even minor updates to the old site took real effort, and every hour spent on the website was an hour taken away from Yarn itself.

A big launch on the horizon

A major new version of Yarn was coming, and with it a surge of visitors. For a tool known for speed, a slow website would make a poor first impression on everyone arriving to try it.

A site that was hard to find your way around

Package pages had confusing links, and the site lacked the modern touches visitors expect. Finding the right information took more effort than it should.

The results

Yarn launched its new website ahead of its version release, without pulling its team away from the product.

Under two months to go live: We delivered the full rebuild a month ahead of schedule.

Near-perfect quality scores: Performance went from 85 to 99, and accessibility and best practices both reached 100.

Ready for launch-day traffic: Package search returns results instantly, even during the traffic peak from the new version launch.

Easier to find what you need: We redesigned the package pages with clean, readable links and clear visual feedback while content loads.

Time back for the team: Updates now take minutes instead of a developer’s afternoon, so Yarn’s engineers can focus on Yarn.

99

Lighthouse Performance

100

Lighthouse Accessibility

100

Lighthouse Best Practices

Why it worked

We approached this project as contributors, not contractors. There was no invoice, no scope negotiation, and no change requests. We built what we believed Yarn deserved, to the standard we hold ourselves to.

That meant designing around the two groups who use the site: the developers who visit it, and the small team who maintain it. Visitors get a fast, easy site. The team gets a website that no longer competes with the product for their time.

Technology stack

Yarn website rebuild timeline

Let’s chat

We partner with a limited number of brands each quarter to ensure senior-level attention on every project.

developers discussing code

More projects like this

AI application using Laravel and OpenAI

Tech startup saves 960 hours with AI-powered automation
LaravelOpenAIReact
lead generation with ai

Enterprise Statamic website redesign and development

Taking data.world’s campaign launches from weeks to under an hour
Statamic
Dataworld website thumbnail