Design System
Empowering consistency and clarity in each pixel and interaction
Design System
A design system is a collection of reusable components, guidelines, and standards that define how a product or brand should look, feel, and function. It provides a shared language and visual vocabulary for designers, developers, and other stakeholders to use when creating new products, features, or updates.
About the product
The platform provides a game-based training platform for businesses. It allows companies to create and deploy customized training games for their employees, with the goal of improving engagement and knowledge retention. The platform also includes analytics tools that allow companies to track employee progress and identify areas where additional training may be needed.
Need for a design system
Many designers and developers have contributed to the platform's development during the course of its five to seven years on the market. As a result, the product had numerous discrepancies, and it was difficult to onboard new designers or developers because there was just a basic document outlining the design language of the product. As a result, there were several product inconsistencies and repeated conversations with the developers.
As a consequence, the design team decided to take the initiative and work on the platform's design system to speed up the process of designing.
My role
I contributed in the design system's planning, research, and documentation.
Research
Like starting any design task, we started with basic research on the anatomy of a design system and how to create one for an existing product.We referred to Goldman Sachs, Material UI and Carbon design systems.
Plan of action
After conducting in-depth study on design systems, we came up with a game plan. We discussed with our design team and the development team what would be the best course of action that would work for all the stakeholders of the product after noting the need to document the parts, patterns and colours, fonts, etc. in the player app and the manager app.Then, in XD, develop a style guide and component library that can be turned into a team-accessible website.
Documentation
The initial step in our plan of action was to record the various components that are used in the platforms (both on the administrative platform side and in the player application). By doing this, we were able to comprehend the various styles that the product currently offers. Following this exercise, we documented the various colours, fonts, and icon kinds that are now used in the product.
Style guide and component library
After identifying all the parts and inconsistencies in the product, we began working with our colleagues to choose the right colours, typefaces, and icon styles. After these were completed, we started creating the components and patterns. We created components for the player app, while the manager app's component library is still in progress.
Development strategy
We have an Adobe XD file generated for the player app, but in order to better communication between designers and developers, we hope to have a website with the development code detailed there as well.Additionally, we are at present discussing the plan for creating the updated designs and incorporating them into the agile process.
A system streamlining the designing process, ensuring consistency and enhancing user experience across all platforms.
Current status
The management application's component library is currently being created. Also, along with the development team, we are developing a plan to update the components and include their releases in the agile system.