design system
Reverse Engineering: New Design System
When I joined the company, there was no design system in place. The games in production were created by a previous team that left us without an organised system. Few source files we managed to recover were made in Sketch, others in Figma, and distributed across multiple cloud directories. This posed a serious obstacle for the entire company, as it hindered any progress on new products and improvements to existing ones.
Timeline
2 months
Background
We agreed with the stakeholders to build the brand new design system. To minimise the risk of possible future discrepancies between design and implementation, we decided to follow the atomic design methodology. This approach would help us create a well-organised system.
My personal contribution to the project was taking on a major part of the reverse engineering and then presenting my work to the design team, guiding everyone through Figma files and explaining the functionality of the new design system.
Documenting everything
I started by benchmarking everything that was in production including the lobby and each stage of all games - Baccarat, Roulette, Sic Bo. This part of the job was done for all viewports.
Atomic Design System
Not only is it the way to keep the design system clean and organised, but it also improves collaboration between designers and developers by adopting the same principles. Disclaimer: we used a simplified version of the traditional atomic design system where Templates also substitute Pages.
Single Source of Truth
The time spent breaking every UI element into atoms, molecules and organisms, was an investment in our future. Any changes, any new product coming our way would now be easily handled by designers and developers.
Scalable UI Components
Each component was designed to be independent and reusable in other areas of the product suite without reinventing the wheel each time. Moreover, developers could easily find individual components and integrate them in Storybook.js.
Design team received an efficient system that was easy to maintain. Everything was in one place. Development team got coherent scalable files which spoke the language they understood. The obstacle was removed, and the company could finally start working on the new projects.
Consistency
We got 10+ connected Figma files with shared libraries: GUI Kits and storyboards for all games and viewports. The consistent design system now contained reusable and scalable components. In the future, it would save us a lot of time reskinning old games or creating new ones.
Simplified Design Handoff
The atomic design system simplified the maintenance of the files and the process of handing it over to the developers. Each game was documented, each step was explained in the storyboards.
