3 ways Grommet.io changed the game at Hewlett Packard Design

A long, long time ago—okay, maybe closer to 2 years ago—Hewlett Packard Enterprise needed to form a unified front for our web presence and to promote brand recognition. Divided viewpoints made it difficult to influence new ideas and experiences across products. Our design teams were distributed throughout HPE, with their own style guides, page templates, patterns, and even color palettes.

Each team had the same goal in mind—style, brand, and experience uniformity. But too often that goal was never accomplished. With each team attempting to influence and embed past their own products, a singular vision was lacking. Without that vision, the stage was set for political clashes about what was the “right” or “wrong” design standard. Which, as you could probably guess, made for lots of design chaos.

To create the singular vision we were missing, we brought together a few brilliant minds who specialized in product design, user experience, development efficiencies, and technology trends to really break down these tensions.

This team realized we needed a single design system that answered some of HPE’s largest design problems in the enterprise space. This system would help all HPE products have the same look and feel, but also enable us to tackle major corporate BFHAGs (Big Freakin’ Hairy Audacious Goals).

The goals were to:

• Save organizational design time
• Increase revenue
• Speed up time to market for products
• Decrease development time
• Smooth the design-to-development handoff
• Maintain a living style guide, and
• Make users happier!

So we created the Grommet.io design system. We learned a lot along the way, including 3 major lessons.

Lesson #1: Create one toolkit as a packaged deal

What is considered a successful UI framework or visual design language?

If you look at some of the most accessed UI frameworks, they advertise responsiveness, mobile-first design, and modular components.

If you look at some of the most referenced design languages, you’ll find consistent look and feel, predefined color schemes, an embedded typographic style, an assortment of design elements (styled shapes and containers), and some basic patterns and layouts to get you started.

But why settle for choosing one over the other when the ideal state is to have both?

“Create your design system for the modern designer-developer relationship.”

With the increase in different types, shapes, styles of form factors and devices, we cannot rely on the existing habits of previous design systems. The concepts and principles that once set design systems apart from each other—responsiveness, mobile friendly, accessible, localized, modular—are no longer competitive advantages.

So what can make your system future-facing and work the way designers and developers work in modern teams?

When we created Grommet.io, we recognized this shift in the designer-developer relationship and made a single source for the entire product team. Grommet is a complete toolkit for both the designer and the developer—the visual design language and the UI framework, packaged into one do-it-all UX platform.

Lesson #2: Take the open-door policy to the extreme

While Grommet was originally created for HPE, we realized that our problems were not unique. Grommet needed to be organic if it was to be a truly living design system that scaled to meet future product demands, expansions, and quality improvements.

So we took a page from the values of our founders Bill Hewlett and Dave Packard, and we shared Grommet with the open source community, opening our source code and design language to the public.

We knew we couldn’t do it by ourselves. Most importantly, we had to tear down inter-company, industry, and interpersonal boundaries. The good, the bad, and the ugly—we shared it all and welcomed feedback and contributions to the platform from across the community.

Lesson #3: Restructuring can help influence an established org

We didn’t want to stop at creating a fully packaged UX framework and making it open source—it wasn’t enough. HPE, with more than 50,000 employees and more than 100 different products, needed a tight partnership with the Grommet team.

Selling design integration is never easy in a long-standing institution with established ways of functioning. Fortunately, though, as luck would have it, organizational changes combined all the UX teams from across the entire company to create one centralized UX team. From this central hub, we’ve used Grommet to proliferate the design culture and principles to all HPE designers over the past 2 years.

With these designers still embedded in their product lifecycle and daily activities throughout the company, this organizational structure enabled a tight partnership between designers, developers, and product owners—continuously and without downtime. Also, by not damaging that connection, Grommet could also be absorbed and taught across the company to influence the value of design and spread the benefits of the Grommet UX framework.

Everyone’s time is finite. By streamlining the design-to-development handoff, the scaling of design across the company will continue to enable Grommet to enhance our toolset and make it easier to create the best experiences possible for our products.

What’s next?

Within HPE, we’re seeing major changes in the way teams are building products after being exposed to Grommet. We have a dynamic library of components that allow Grommet to be one of the leading React UI frameworks anywhere. We plan to keep enhancing Grommet so it can continue to be a leading set of innovative UX/UI tools, helping teams everywhere improve customer experiences.

It’s an exciting time to be building design orgs and design systems in the enterprise space. Through Grommet and other efforts, we’re excited to be part of the evolving conversation about the future of enterprise design.

Interested in learning more about HPE Design, Grommet.io, and how to tackle challenges of scaling design in the enterprise? HPE UX Design Lead Tracy Barmore is a featured panelist at InVision’s Design+ Scale event. Catch the livestream on June 6th at 6:30 p.m. PT!