Fuse Design System
Extron has been constructing its initial design system from the ground up for over half a decade. In that time it has been pushed and pulled in various directions as organizational values and priorities changed. It was determined that the design system's look, feel, and architecture had an opportunity to be updated and revised in a holistic approach that better matched the brand's space in the industry and user's needs.
An early product mockup of the new design system.
I led the effort to audit the current system, gather designer feedback, coordinate with engineering on implementation strategies, and develop a fresh and effective UI for the system.
What is Working? What could be improved?
At the onset of this process we had members of the design team create moodboards for design elements and patterns that resonated with them and which they thought would be impactful to our system's look and feel. We then had a review session where we stepped through each board and captured what traits we were keying in on.
The list of values we discerned from our moodboards. Anytime an attribute was brought up again the font weight was increased such that the more people keyed in on a value the heavier the weight.
The levels of questioning we took to determine which of the values was most appropriate ti target.
After we had the list, we discussed each one to weigh its relative impact on our system, did it align well with our brand identity, and last how could we improve upon the idea to better fit our unique needs.
A Shared Direction
This process lead us to a concise list of ideals to guide our decision making. The key tenets were:
-
greater consistency
-
more maintainable components
-
have better attention to white space
-
restructure information architecture
To ensure these foundations are evident in every screen it was important to approach the system in a holistic atomic fashion. That is to say, keeping the whole in mind while ideating on individual elements to never lose sight of how everything is fitting together. Nothing lives in isolation in a unified system.
Crafting More Successful Approaches: Promote the work
A specific goal we wanted to achieve with the system values was to empower our users to be successful by "promoting the work" they're focusing on within the applications.
Keeping in mind the direction of future product offerings, along with the needs of current products, we reframed the page content container to feel more like a 'workspace.'
A side by side comparison between the original and updated styles.
Additionally, we restructured our approach to typography for better consistency and clearer page heirarchy.
A simplified type structure focused on the needs of the software offerings.
Letting color and shape define boundaries as opposed to stark lines allows the space to breathe. It also lets the eye travel from area to area without getting trapped. An awareness of how the eye moves guided many decisions regarding layout, such as the position of the navigation and the intentional rounding of the workspace.
A side by side comparison between the original and updated styles.
Better affordance was promoted to help reduce the amount of styles for touch oriented environments. Considerations across platforms and theme were present when constructing our approach.
Similar approaches between themes limits the amount of unique styles.
Elevating The Brand
The Fuse design system creates an environment for software to be accessible, usable, and beautiful across all platforms and will help Extron promote a unique voice in the landscape of A/V technology.