Hubb Design Systems

Hubb design system components
Hubb design system components
Hubb design system components
Design systems create brand consistency
The Hubb platform was a large-scale white-label SaaS product that provided a unique opportunity to create a design system that could provide consistency and flexibility at scale. The platform's features included extensive customization of the user interface to align with a company's brand. Our goal was to create a design system for the product that could meet these needs and provide consistent user interaction patterns and experiences.
Deliverables
Component Library
Component Reference Guides
Custom Iconography
SaaS Product Design
Scalable Design System
UI/UX
WCAG & ADA Compliance
Awards
Forrester Audience Engagement and Interaction Award

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.

image of Hubb Component Library
Hubb design system - component library

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.

Hubb Logo
Image of Hubb design system - compound component states and iterations
Hubb design system - compound component states and iterations
Image of Hubb design system - Figma component states
Hubb design system - Figma component States
Hubb Design System Input Samples

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.

Image of Hubb design system - components reference & guidelines
Hubb design system - components reference & guidelines
Image of Hubb design system - prototyping and user flow
Hubb design system - prototyping and user flow

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.

Hubb Design System - Theme Style Guide Samples
The Hubb design system supported multiple themes for the product user interface, creating additional flexibility while maintaining consistent structure and patterns for user interaction.
Image of Hubb design system - theme system flexibility
Hubb design system - theme system flexibility