Web Design System
Led the design team, inspiring a new approach to web design at Square Enix. Based loosely on atomic design principles, this design system improved consistency, speed, and collaboration across multiple teams and products.
Overview
I initiated the creation of a Web Design System that had three main goals:
- To support a more atomic structure, so that shared components could be designed, developed and tested once, and then deployed to any website necessary.
- To instill consistency across branding, user experience, and other creative areas in the business.
- To make delivery timeline and effort estimates more predictable.
The Challenge
Early on, during my tenure at Square Enix, there was a fractured approach to web design that made consistency a challenge, which often led to the team building many bespoke components for each new website. When trying to build 20+ new product websites a year, each with 4-5 marketing beats throughout their lifecycles, this was not a process that scaled well.
The Approach
I tasked our design team to create a Web Design System based on the principles of atomic design. I took the initial steps to run a 4-week discovery process to collaborate closely with teams in Creative, Marketing and Sales, to understand their core marketing needs on each website. This was then fed into a design feedback loop to flesh out components, colour schemes, page structures, and more. Formalising it all to ensure broad alignment on the direction.
The Outcome
Scope creep was reduced by roughly 30% on new projects. Consistency and reusable standards rose by 56%, with delivery speed initially improving by 15% within the first 2 months. Team "crunch" was also reduced by 50% because of the reusable nature of what was built, freeing up development and design time for more innovation and stability work.