Unity Website
Leading Unity's web design, from flagship pages to a shared design system- Unity Website
:quality(80))
About the project
Context
Starting in 2022, Unity (one of the world's leading real-time 3D and game engine platforms) partnered with Locomotive on an ongoing web engagement. The mandate began with realigning key entry points to Unity's creator-first repositioning, then expanded across three years into navigation strategy, content architecture, a new product page, and the formalization of a shared design system called Mango. 12 transversal projects. 4,300 hours. One evolving brief.
My role
Lead designer at Locomotive across all sprints from 2022 to 2026. I set UX and design direction, led the site-wide audit, defined the design system architecture in close collaboration with Unity's web and brand teams, and maintained quality and consistency across a 14-person multidisciplinary team, with weekly touchpoints on both sides and continuous alignment with 10+ Unity stakeholders.
Release date
2023
Expertises
UX Design, Information Architecture, User Interface (UI), Interaction Design, Design Systems
The outcome
A shared design system, adopted on both sides, built sprint by sprint over 3 years
:quality(80))
Phase 1 (2022): Homepage restructure and first immersive iteration. with Games page rebuilt to clarify the offer for multiple audiences.
:quality(80))
Phase 2 (2023): Unity Gaming Report delivered as a web experience and reusable template.
:quality(80))
Phase 3 (2024) : Resources hub redesign (discovery, filters) as a scalable content product.
:quality(80))
Phase 4 (2025) : Navigation foundations and header strategy aligned with evolving taxonomy.
:quality(80))
Phase 5 (2024 - 2026) : Design system formalization and ongoing governance across continuous sprints.
The result: 60+ components built to strict standards, 80+ pull requests merged, a shared Figma and Storybook library actively used across sprints, and a delivery model that became a reference for how Locomotive engages large tech organizations. Half the technologies introduced on this project (TailwindCSS, Storybook, Chromatic, NextJS, Sanity) are now Locomotive standards.
This wasn't a redesign. It was a design infrastructure built to outlast any single sprint.
Strategy first
An audit-led approach that made every sprint defensible
Before touching a single component, I conducted a full UX audit of the existing site, mapping content blocks, identifying friction points, and building a systemic view before intervening locally.
This audit grounded every sprint prioritization decision. It prevented redundancy across pages, established a shared vocabulary for the design system, and justified starting with hero structures and navigation rather than rebuilding pages in isolation.
It's also what made our recommendations credible to Unity stakeholders: every design decision could be traced back to a documented observation, not a creative preference.
Without this foundation, each sprint would have optimized locally without building toward anything coherent.
Delivery under constraint
Turning a static annual report into a reusable web experience
:quality(80))
Unity's Gaming Report had always been a PDF. Dense, static, and rebuilt from scratch every year. The brief was to turn the 2023 edition into a web experience.
Before designing anything, we audited every past edition of the report : how Unity structured their content, what patterns repeated across years, how they wrote for different audiences. That analysis became the editorial foundation for the digital version, and the first real signal of what a design system for Unity could look like.
The real challenge wasn't the content. It was designing something that could live beyond a single edition.
:quality(80))
Dynamic chapters listing as the page's primary navigation. Users land with a full mental map of the content before reading a single word.
:quality(80))
Mobile-first experience with an anchor navigation that lets users jump directly to any chapter without scrolling through the full page.
Shipped in 9 languages including Japanese, Vietnamese and Russian. Every layout decision was stress-tested against content expansion from the start, not retrofitted after.
:quality(80))
Every section is a modular block tied to Sanity. When the 2024 edition launches, the template is already there. Unity's team updates content, not architecture.
The result
A durable template that lets Unity publish each new edition with reduced effort, at consistent quality.
Where the design system started
Where the design system started
I chose to start with the Resources section instead of product or marketing pages. It was text-heavy and allowed us to experiment without pressure. This context helped establish design foundations like typography and spacing. The work then expanded into content strategy, proposing a collection-based architecture around creator journey stages, leading to a personalized hub that adapts to the user's Unity account.
:quality(80))
The Resources contrasts with a light background against dark marketing pages. A collection slider allows Unity's team to curate themes, helping users find relevant content quickly.
:quality(80))
On mobile, users can access all filters without losing their place, keeping primary content visible and the filtering experience contained.
:quality(80))
Search was designed as a first-class feature, not an afterthought. Filters, content type indicators, and result hierarchy follow the same design system logic as the rest of the section.
Page hierarchy through headers
Reworking page hierarchy through a flexible header system
I chose to start with the Resources section instead of product or marketing pages. It was text-heavy and allowed us to experiment without pressure. This context helped establish design foundations like typography and spacing. The work then expanded into content strategy, proposing a collection-based architecture around creator journey stages, leading to a personalized hub that adapts to the user's Unity account.
A component system covering all site use cases. It includes media options, stat displays, CTA configurations, and flexible content within a consistent structure.
The product header shifts from the default light treatment. A dark background aligns with the dark mode in marketing, grounding the page in the product's visual universe.
A header for the Community section featuring a dynamic spiral of game creators that reacts on scroll, adding movement and emotion. The light background contrasts with marketing pages, reinforcing the creator-first identity.
Navigation
A navigation redesign built on a new taxonomy and a smarter visual language
While we were reworking the header hierarchy, Unity's internal team was restructuring their service offering and page taxonomy in parallel. The two workstreams fed each other naturally: clearer page levels above, clearer navigation paths between them. That alignment created the opportunity to rebuild the main navigation from scratch.
:quality(80))
A new navigation system features distinct icons for each primary section, a highlight block to showcase key pages or events, and animated tags for new or beta releases, all within a flexible layout that adapts to Unity's growth.
:quality(80))
A global search was added to navigation, covering the site.
The highlight block and animated tags fit within the navigation without disrupting its hierarchy. A product or event gains visibility where the user is looking.
Sprint by sprint
Every component raised the bar for the one before it
With the navigation and header hierarchy in place, the program shifted into a sustained delivery rhythm. Each sprint targeted a specific set of components and fed back into what already existed. That compounding logic is what kept the system honest over time, and how the Gaming Report, designed years earlier, ended up being revisited with navigation patterns aligned with current DS standards.
What three years on one project taught me
Building a design system with Unity was a long process of mutual adaptation. Aligning ways of working, maturing the design on both sides, and earning the trust that makes a system actually get adopted took time. Working closely with developers taught me as much as the design work itself — the technical constraints of a site this size, the complexity of components that need to hold across languages and edge cases. Looking back, AI tooling would have accelerated parts of it. But the slower pace forced a rigor that made Mango last.