magnetite: Design language system
G HUB, Logitech G’s hardware configuration software was launched February 2019. As the product grew through new features and product integrations, so did our team. This posed challenges to ensure consistency and knowledge alignment.
To solve this, we set out to create a living design language system that defines elements and usage rules. This DLS would inform system decisions and ensure consistency through detailed documentation and scalable components.
EXPERIENCE THEMES
Focused on reducing the complexity of setup and providing users with the confidence to unlock the potential of their devices through software.
FOUNDATIONS
After auditing the current designs and implementation, consistent patterns began to emerge immediately. These helped lay down the foundational elements of our system: Colors, Iconography and typography.
COMPONENTS
The foundational elements allowed for us to create components with ease as we were referring to the set of rules we had aligned on previously.
The definition of these components considered spacing and redlines as part of symbol creation in Sketch. This facilitated the development of templates and pages as we continued to build.
TEMPLATES
Using predefined components expedited the creation of templates and gave us the opportunity to focus on layout and composition. At this stage, we started seeing how our design language came together as a true expression of the experience we intended it to be.
INDIVIDUAL CONTRIBUTIONS
Audited current state of the system for visual and interaction design.
Identified system’s strengths and weaknesses
Defined guiding experience principles
Created foundational style guide
Documented and standardized components and templates