DSP Configurator Software is the user interface for full control and management of an Extron DSP product and all of its audio functions. Sync brought a dated look into a more current aesthetic.
Product Configuration Software combines many standalone product configuration modules, allowing technicians to configure multiple Extron products simultaneously from the one application. This one was fun to redesign.
The goal of GVE software was to simplify the management of AV (Audio-Visual) resources by offering an intuitive interface. Using Sync we were able to achieve this goal.
The decoder can be configured and controlled using embedded web pages. After implementing Sync, the screen became much cleaner and more intuitive.
Extron, a global frontrunner in the audio/video sector, manages over 200 applications that power a wide array of audio and video hardware. These applications can be subdivided into eight unique category clusters. My role in the company was to enhance the visual appeal of their user interface designs. My immediate observation was the necessity for consistency in terms of the overall aesthetics and patterns.
I proposed developing a design system as a project with inherent value to the company's senior Vice Presidents. After gaining approval and a designated budget, I led a team of four developers, two UX designers, and one visual designer. Our mission was to create, promote, and facilitate the adoption of this design system.
We were successful in our endeavors, effectively establishing a design system, a pattern library, and an Angular component repository. This achievement standardized the interface designs and enabled a smoother user experience across all the applications.
Consistency
Ensuring that all visual elements and branding are clearly and consistently applied across all Extron products makes sense. A strong consistent look and feel reinforces our identity and drives positive sentiment and trust.
Organization
Collaboration and handoff between teams are vital in an agile production environment. Making sure we have a well thought-out structure and approach is important.
Maintainability
Over time, there are going to be new designers and developers jumping in to fix bugs and add features. We needed to have proper guidelines and conventions to make it easy for people to do things correctly.
Responsiveness
With so many products and a steady rise in mobile/tablet usage, it is important to make the experience platform-agnostic.
Scalability
The company will grow in the future, and so should its products.Creating new product pages should not be a difficult and inefficient task.
Simplicity
Strive for simplicity by removing unnecessary things. Reduce visual design,workflow, and text down to their simplest forms so that users can focus on that which matters most—thereby making the purpose clear. When the purpose is clear, people can use our products with confidence.
Consistency
Strive for consistency by removing variation. Employ uniform visual design,persistent layouts, parallel grammar, and similar workflows to decrease the effort spent learning. This increases familiarity and comfort, which fosters trust in our products.
Efficiency
Strive for efficiency by streamlining processes. Provide a reliable collection of robust resources enabling teams to build, measure and learn faster—focusing on their products as a whole, rather than on the pieces therein. This enables more frequent delivery of solutions.
Our approach to building the Metry design system involved employing the Atomic design methodology, which emphasizes the meticulous description and organization of every component within the system. By implementing this approach, we were able to effectively categorize our design components into five distinct levels, each serving a specific purpose in the design ecosystem.
Basics
At the foundational level, we have the Basics category, encompassing the smallest building blocks of the project. These elements, such as text styles, buttons, icons, and input fields, cannot be further divided without compromising their functionality.
Elements
Moving up to the Elements level, we encounter more complex entities comprised of multiple atoms. These include notification toasts, data values, and input fields with buttons. While some molecules within this level can function independently on any page, they often find greater value when integrated into larger organisms.
Components
Components represent the next level, serving as truly functional parts of a page. These components are assembled from groups of atoms and molecules and can include significant elements like navigation menus, sidebars, forms, and data-rich pop-ups. Organisms within this level can become intricate and may even contain smaller organisms, mimicking the natural world's complexity.
Templates
At the penultimate level, templates constitute pages without real content. These layouts bring together various organisms to form a cohesive website structure. They provide a standardized arrangement that can be utilized for multiple pages.
Pages/Features
Finally, at the highest level, we have Pages/Features. By incorporating content into templates, we can generate specific pages. For example, a Wikipedia article can be based on a template consisting of organisms like a menu sidebar, header, footer, and article body. Each real-content Wikipedia article utilizes the same template structure.
A system is not a finite project; it's the inception of a continually developing product designed to underpin other products.
Consequently, delivering a style guide should be seen as something other than the pinnacle of achievement.
This perception shifts when we regard the system as a product; the emphasis is now on servicing our customers rather than just satisfying our needs. So how can we achieve this? Initiating with proven product management and marketing strategies lays a solid foundation.
Acknowledging this, the system team can incorporate commonly used, predictable tools and language. This approach not only aids their success but also ensures the system they create is robust, adaptive, and customer-centric.
I proposed developing a design system as a project with inherent value to the company's senior Vice Presidents. After gaining approval and a designated budget, I led a team of four developers, two UX designers, and one visual designer. Our mission was to create, promote, and facilitate the adoption of this design system.
We were successful in our endeavors, effectively establishing a design system, a pattern library, and an Angular component repository. This achievement standardized the interface designs and enabled a smoother user experience across all the applications.
Extron will realize actual business value — real cohesive experiences, realized efficiencies in development — when other teams pick up the system and ship it in their product.
What products use or may use Sync?
We need to know our target market. We need a strong sense of who we serve,their relative priority in influencing our work, and where each is headed. This begins with Product Owners and the market users they intend to serve.
When will they ship using the system?
We should not expect teams to pause individual work in order to launch together using a system. Instead, discussing how a design system fits is a product-by product endeavor that seeps into their roadmaps, sprint planning, and story requirements.
How will we align with them?
Product Owners and Managers are tremendous assets to building velocity in propagating our design system. Sync’s product manager (by name or responsibility) should be knowledgeable of or even participates in strategic activities like release planning meetings. That said, effective alignment with product managers usually results in “alignment” meetings that lead to successful relationships.
How do we promote and sell to them?
Using internal marketing, which will involve compelling demos and presentations,compelling documentation, regular communications (such as email updates and blogs), onboarding activity, and training, we’ll get buy-in from the top down.
What will each type of customer need from our design system?
There’s a way to disarm the tension adopters feel when intimidated by thesystem’s vast scale or imperfect goodness-of-fit. Sync will contain subsystemslike color palettes, icons sets, certain UI components and patterns that aren’tuniversally relevant. Everything isn’t always meant for everybody. We must bediligent and succinctly tell each what’s most helpful for them?
Style imparts a unique aesthetic— it shapes our products' visual and tactile perception at Extron. It comprises fundamental elements like color, typography, tone, spacing, and iconography. My objective was to enhance the user experience of Extron's products. The interfaces should minimize user frustrations and intuitively deliver information.
We also set out to augment the readability of our products: the interfaces of Extron's offerings should be simple to comprehend, engage with, and take action on. Style isn't just about appearance; it also plays a significant role in our products' overall functionality and user experience.
Color serves multiple functions within our products at Extron. Not only is it a reflection of our brand identity, lending consistency across all our offerings, but it also acts as a valuable tool, guiding users through the interface with ease.
We opted for Open Sans, a humanist sans serif typeface characterized by its vertical stress, open shapes, and a neutral but welcoming aesthetic. It is specifically optimized for diverse platforms, including print, web, and mobile interfaces. Furthermore, Open Sans boasts superior legibility features in its letterforms, ensuring ease of reading and comprehension.
Space is a universal aspect, competing with color for dominance in screen-based design. It serves a dual purpose, functioning as a divider and a connector within the design framework. Broad spaces segregate elements, establishing distinct identities, while narrower spaces amalgamate components, shedding light on their interconnections.
Moreover, we construct rhythm, direction, and movement by strategically manipulating space in our designs. The thoughtful application of space also cultivates design flow, guiding the viewer's journey through the composition. Therefore, space isn't just an empty void but a powerful tool in the hands of a designer.
UI Components and UI Patterns are both crucial aspects of designing user interfaces, but they serve different purposes and operate at different levels of the design system.
UI Components are the building blocks or elements used to construct a user interface. Examples of UI components include buttons, checkboxes, sliders, text fields, dropdown menus, icons, and more. Each component has a specific function and can be used individually or combined with other components to form more complex interactions.
UI Patterns refer to reusable solutions to common design problems or tasks. A UI pattern typically involves a combination of UI components arranged in a specific way to accomplish a particular task. For example, a login form (which is a typical UI pattern) might consist of text fields (for username and password), a checkbox (for 'Remember me'), and a button (for 'Submit').
In essence, UI Components are the individual elements that make up an interface, while UI Patterns are the standard ways those elements are combined to enable specific user interactions. Both are essential for creating consistent, intuitive, and effective user interfaces.
Our approach to building a component and pattern library for a UI system was driven by ten principles:
1. Start Small and Expand
We began with the most frequently used and simple components such as buttons, checkboxes, and text fields. Once these basics were established, we progressively moved to more complex components and patterns.
2. Design with Reusability in Mind
Our aim was to create components that are versatile and can be reused in a variety of contexts. This maximized the utility of our library.
3. Use Real Content
We avoided using placeholder content when designing components. Real content helped us understand the constraints and opportunities of the components we created.
4. Document Everything
For each component and pattern, we documented its purpose, when and how to use it, and any variations it may have. Good documentation is key to ensuring the library is usable and effective.
5. Make It Accessible
We ensured all components and patterns meet accessibility standards. This not only helps users with disabilities but also improves usability for everyone.
6. Use Version Control
This allowed us to keep track of changes and updates to the library. We used GitHub to help with this.
7. Consistent Naming
We maintained a clear and consistent naming convention for all components and patterns. This made it easier for the team to find and use them.
8. Involve Your Team
The library should be a collaborative effort. We regularly sought feedback from the entire product and design teams, and involved them in the creation and review processes.
9. Iterate and Improve
A design library is a living document. It should continually evolve and improve based on feedback, testing, and the changing needs of our products.
10. Use a Design System Manager
We leveraged Sketch and Confluence to help us organize and manage your design system effectively.
