Hubb Design Systems

What is a design system?

A design system is an evolving collection of every resource, asset, and component of a brand, along with clear guidelines for how they are each to be used. This powerful component system can be assembled to build any number of applications—it’s a collaborative tool for your design product. And just like your product, a design system continues to grow and adapt over time.

For Hubb, we took the start of an existing brand and adapted it to an entire system which we continue to build on as their needs grow. Piecing together elements from the existing brand, we took what was working and incorporated it into the new elements we created to suit their branding.

Managing product consistency.

Creating design consistency across multiple large-scale digital products is critical. Implementing a design system creates a unified visual language across the entire digital product which also builds trust and recognition with your audience. Every design detail matters when shaping the look and feel of your brand—from the button style to the placement of headlines. The experience should feel familiar to your audience across platforms. The Hubb product design system not only creates a consistent look and feel for marketing efforts, but also provides the same experience for those customers who use the platform every single day to do their jobs. A design system also helps provide a seamless user experience as the product grows and evolves over time. For any digital product, having a design system of common elements, patterns, colors, components, and language ensures a consistent user experience.

Design for scalability and growth.

A good design system is not simply created and then complete—It is designed to evolve and grow over time. Whether it’s different iterations of a component or an entirely new theme for a digital product, the design system should scale as the product evolves. As Hubb continues to add new features and functionality, we adapted its design system to evolve with their needs. One of those adaptations included modifying the design system to support customizable themes and still retain consistent elements for a unique user experience that fits within the Hubb universe.

Keeping it agile and flexible.

While it may seem that having every asset and component outlined with their rules and uses makes for a rigid and stagnant system, it’s quite the opposite. The system thrives on its agility and ability to evolve. While some common traits may be static, others have flexibility built into them. This flexibility allows fresh ideas to bring innovation to a product while still maintaining consistency with the visual language system. We utilized this flexibility to create themes within the platform so events can have a more custom look and feel, but still feel like Hubb.