Overview
Yield Guild Games brings together web3 gaming guilds, players, and developers on one united platform.
DS ecosystem
YGG head of product Jen Yu, hired me to lead their design systems initiative to add structure for both the design and engineering teams. Over the next two years, we created a set of design systems (evolved over time) for the team to use. This includes a foundation master design system along with components for design. We also created a storybook for the engineering team to pull from. This helped create a fluid family for the brand to pull from, eliminating time so the team can work on upcoming features. Less time worrying about buttons, type, components, and more time on features for the business. Let’s dive into it.
DS (phase 1)
When I arrived, the team had no DS. Each designer was creating separate components, and there was no uniform conformity. Additionally, each developer was hard-coding each component, resulting in inconsistencies across the board. This equaled lost time and a lot of money for the business.
My first pass was to audit and organize, then create a master V1 for the design team to pull from.
On top of this, I started to work with the engineering team to deep dive into the framework to audit and see how we can cut the fat. This overhaul brought in a stew of fun on both ends of the organization for us to update.
The result was foundations. Lets just get the grid, type, color, and buttons in order. Then work with engineering to create a system in Storybook for the devs to use.
DS (phase 2)
Along with the foundational elements, we started to create quest blocks for each game. This added a new set of complexity as each card utlized multiple components, along with a library of logos and images that swap out per game.
DS (phase 3)
While managing the team assets, components, and design systems, I was working directly with the engineering team to build out our Storybook. This way, everything is documented both in Figma and in Storybook for the organzation. This also helps streamline creating features with set rules and removing hard coding simple things like buttons.
DS (phase 4)
During the whole rebuild, our designs evolved as well. By leveraging both Figma components and Storybook, this updated iteration saved the company an incredible amount of effort on dev side, which resulted in saving money for the business. Now, anytime folks want to update, they update globally.
Continued…
While this is just an overview of this rebuild, this ever-growing ecosystem has undergone two years of constant iteration, building the entire ecosystem from scratch and is still be built today. Please reach out for any more questions or touchpoints.