Buliding an HPE design system
Hewlett Packard Enterprise’s Machine Learning Development Experience (HPE MLDx) was a new platform being developed that combined two acquisitions — Determined AI, and Pachyderm Inc. HPE had its own design system. However, our user needs and our goals necessitated the creation of a branch of the design system that could meet requirements.
The ProblemTimeframeRoleSolo designer
6 weeks (2024)
Conflicts and Outcomes
Solo Designer on a Highly Aggressive Deadlines
Building entire design systems is typically done with a dedicated team over a long period of time. In this situation, both Design and Development needed to have a MVP ready to show to the public for a general announcement at the end of the fiscal quarter. The UX for the new product needed to be phenomenal so 2 of the 3 designers worked on the UX, which left me as the solo designer responsible for creating the design system.
OutcomeI worked with the developers to find an open source library that would provide the base for the design system. This library needed to be development ready, so that we could focus on minor styling changes and complex UI components. This expedited process let us meet the deadline with time to spare.
Accessibility / Aesthetics / Brand Identity
The primary business goal of the project was to build a design system that read as an HPE product, but was able to meet the practical needs of our users. In addition, the product needed to be perceived as cutting edge. The base HPE design system was not able to meet those goals (more on this further in the case study). The conflicts between these stated goals — accessibility, aesthetics, and brand identity — contributed heavily to the challenges of this project.
OutcomeThe design system mixed compliance requirements with text, and interactable UI elements meeting current WCAG guidelines. Non-interactable UI elements met WCAG 3 draft guidelines. The exception was given to the primary brand color. The brand font was retained for headers, while body text was changed to a more legible font.
Solo Designer on a Highly Aggressive Deadline
Summary: Compromise and negotiation was needed to be able to hit the deadlines for both Design and Development. We expedited the process by using an open source UI component library as a base. I deferred the decision on which open source library to use to the developers, to allow them to pick a library that they could easily work with.
With limited design capacity, I needed to be strategic with how to approach the project. The impulsive decision would have been to build the design system from scratch or to use the existing design system from HPE, but both decisions would have overloaded the development team and risk missing our deadline. That was not an option since the deadline coincided with a general announcement of a new product at HPE’s convention.
This first phase of the project took these steps.
Determine our success criteria.
Research open source libraries.
Enumerate needed UX/UI and development work.
Pick a library.
Success Criteria:
UI library contains all the necessary UI primitives.
UI components would require minimal work to change into a HPE UI style.
UI components are coded, and code is performant.
The library supports light and dark mode, with options to add new themes.
Over the course of 2 weeks. I met with the responsible developer, and our leadership team to assess the options. We eventually settled on Radix because it met our success criteria. Additional UX/UI was needed to fully convert the styling and address accessibility issues, but the library was in the ball park for what we needed. For the developers, additional work needed to be done to address common UI patterns that were missing from the library, but the library covered their needs.
Radix was our final choice. It offered everything in our criteria list, but presented a frustration for developer with some awkwardly coded elements that required them to do some additional development work for some UI components.
Shadcn was our runner up. It offered more than Radix by solving many of the frustrating UI issues, and had more components. But, it required our developers to be beholden to Tailwind which was not an option.
Accessibility / Aesthetics / Brand Identity
Summary: The main source of conflict for this phase of the project was striking the balance of accessibility, aesthetics, and brand identity. I iterated the designs several times to create options with clear pros and cons, and solicited feedback from the entire team to see where our comfort level was with competing goals.
I started this phase of the project working with the HPE design system out of the box. You might think that because there is an established design system that the mandate would be to follow it strictly, but that is not the case. The culture at HPE was to allow for branches of the design system to be create as long as the design system team was consulted so that they can provide input and integrate new UI design system into the main branch. The main source of external inspiration for our modified designs came from Github and Linear as these products share our developer persona. I determined the direction of the design system by first going to research and requirement gathering.
HPE’s current design language emphasizes the brand values of boldness and vibrancy. However, it skews towards dashboard experiences. AI workloads require users to be deep in spreadsheet, photos, and data visualizations. Our branch of the design system needed to emphasize legibility when there is high information density.
User Needs:
High information density - users need to be able consume a lot of information simultaneously.
Clear affordances - GUIs for AI are relatively new, so the interaction design is new to users across the board.
Takeaways from the HPE design system heuristic evaluation:
Need readable text at 12pt font.
Need body font family with baseline alignment and lower weight.
Rework status and accent colors for accessibility compliance.
Overhaul grid and spacing to allow for more compact UI components.
Refactor UI states — active, inactive, hover — for clearer affordances.
Brand mandates:
Retain the brand font for display and h1 headers.
Retain the brand icons.
Retain the primary brand color unaltered.
Because of the tight deadline I had to be selective about the work that I was doing. Staying in tight communication with the developers and the UX team allowed me to determine the priority work. For the general announcement at the end of our deadline, I focused on the following work.
GA work:
I created a color palette in LCH instead of HSL. LCH is perpetually uniform which means any color with the same lightness value will look similarly light to the human eye. This helps with accessibility work to create visual hierarchy. But, since we are still using WCAG 2.2 guidelines for accessibility, contrast ratios still needed to be checked. I followed these current guidelines for text to ensure readability according to those standards. However for non-text UI elements, I used the draft guidelines for WCAG 3.0. WCAG 3.0 is based on LCH instead of a luminance contrast ratio which can mathematically pass the guideline, but fail in real world human perception.
I changed the grid system used by HPE (but, not followed by designers). The grid uses a 24px base with other sizes determined by multiplying or dividing by 2 (3, 6, 12, 24, 48, 96…). This grid system was too restrictive because of large jumps in between sizes. We needed smaller increments in size jumps. I used the more conventional 2px grid system as it provides the level of flexibility and developers are used to 16px equaling 1rem. Changing to this system helped simplify work by using a convention that everyone was used to. Although there were more options, it was easy for everyone to agree on padding sizes, and we codified these sizes as tokens.
For the most part, UI components were what we needed them to be out of the box with Radix. There were a few components that needed to be styled differently. The more complex work was in building custom components unique to our product. I worked with the UX designers to figure out what these components were, and I designed them and placed them in the design system for them as a reusable component.
The process of color accessibility involved checking your intended background, text, border, and icon colors against each other to see if their contrast ratio meets WCAG 2.2 guidelines.
Once a suitable color palette was created, colors were given a token alias. This would allow developers and designers to enable light and dark modes. The same palette could accommodate more color themes for the future.
Dark mode - A selection of components
Light mode - A selection of components
Dark mode - File upload modal
Light mode - File upload modal
Dark mode - Loading state for AI chat interface
Light mode - Loading state for AI chat interface
Dark mode - complex modal
Light mode - complex modal
Explorations on the brand gradient