Design System for Healthy Gamer
Healthy Gamer provides mental health support for the internet generation through coaching, content, and community engagement.
In order to enhance their coaching platform, I created a design system to assist both designers and developers.
Tasks
Research | UI Design | Documentation
Timeline
2021 - current
“Hey, we need a designer to step in and help organize, as well as clean up all the various design pieces we have accumulated and dispatched over the years.”
“We need an effective tool to make communication between designers and devs easier as well as onboard new designers.”
“We currently lack consistency across the design of all our products. Each one has been designed individually by developers as they build them, resulting in a fragmented and disjointed UX/UI“
Context & Problem
Healthy Gamer had not yet established a coherent design system, which has resulted in the current designs being predominantly driven by the development team. Most of the design created was not centralized and didn’t follow any clear guidelines and process.
This situation has led to various inconsistencies in the visual and functional aspects of the designs, ultimately making maintenance and updates a much more challenging and time-consuming process but also impact directly the user experience Healthy Gamer offered to their clients.
Solution & Role
My first mission was to successfully migrate all of the various existing designs from a multitude of sources into Figma. After completing this task, I then had to identify, index, and redesign all existing components, as well as those that were missing, in order to establish a comprehensive and solid design system for the production team to effectively use.
Another side of this project was to help built clear and effective processes and onboard the production team, as well as other department, into Figma by hosting workshops and creating didactic documentations.
This design system is now continuously evolving alongside the different Healthy Gamer products, their new features, and the overarching vision of the brand.
Key takeaway
This project provided me with a valuable opportunity to build a comprehensive design system, with the responsibility to carefully analyze, deeply understand, and effectively make the most out of an existing design. Due to technical restriction and budget, I couldn’t simply discard the entire existing design; instead, I had to thoughtfully grasp its core essence, the true spirit of the brand, and align closely with the team’s vision and goals.
It was a work of patience as I needed update pieces by pieces keeping in mind a global vision of what the entire platform. But the most important thing was to allow other to improved efficiency, consistency, and collaboration, while also reducing technical debt and enhancing the UX and UI quality.