Discovery & Emphasize

Friction in the design process

We've observed and received feedback from designers about the insufficiency of design tools that slow down our design process and content. The current design system guidelines and the way our designers consume these guidelines are unnatural and unnecessarily cumbersome, reducing their effectiveness.

🔎 Research

Understand designer’s pain points and existing challenges

To better understand the issue, we begin by gathering information and talking to designers on the GLCP team. We delve into their design process, identify common obstacles, examine their approach to support and troubleshooting, and uncover the challenges they face when seeking guidance.

Take away

We notice several common obstacles throughout the design process and how their feelings about the current workflow.

Designer's Pain Points:‍

Finding design resources:

Inconsistent availability and terminology in Figma and Grommet library (UI library).
Time-consuming search process across Design system library, website, Grommet and product files.
Difficulty locating relevant assets (components, icons, variants, templates).

Execution:

Search results don't clarify if components are up-to-date or vetted.
Designers may inherit poor usability patterns from outdated designs.
Challenges in identifying component updates and auditing designs in the product.
Components or variants may not function as expected due to irrelevance or being one release away from enhancement.

Assistance:

Seeking help from various sources can be overwhelming.
Difficulty in getting the intended audience to provide necessary answers.
Difficulty locating relevant assets (components, icons, variants, templates).

↓ User flow

Highlight user stories

“As a designer, I want to quickly access design assets that efficiently kickstart my projects and align with most GLCP standards.”

“As a designer, I want to concentrate on addressing UX challenges, free from the need to search through previous files or make minor visual decisions.”

“As a designer, I want to feel assured when tweaking components to match my design need. I don't want to sidestep or disrespect design standards. Most importantly, I just want to focus on my work without any unnecessary stress.”

Define problem

Too many variations, missing product specific guidelines, and a blur development process for design components.

The product team and the design system team struggle to collaborate, which slows down integration and optimization. This lack of understanding causes frustration among product designers. If communication fails, it makes it even harder for the design system team to create useful tools.

🔎 Research

Collecting problematic pattern and component

Tracking debt is crucial for accountability and progress. We need a plan to address the debt and standardize the process as our product grows. This proactive approach will help us manage issues and keep our product quality high.

↓ Conducting research in our platform to identify redundant designs and problematic patterns.

Design

Establishing a scalable design pipeline integrating the product library into the development process.

Consider the button as an example. The design system is responsible for ensuring that the button is well-built, integrated with code, and available in valid variations. As the product team uses the button, more questions will arise, such as: How to write a Call To Action (CTA)? How many buttons can be displayed on a page? How to apply a button in a modal? What should be the gap between two buttons?

Therefore, the layers we aim to address are:

Layout
Pattern (end-to-end experience)
Repetitive messages (consistent icons and CTAs, errors, deletions, etc.)

We aim to collaboratively solve these challenges and find the best ways to strengthen and scale this pipeline for both the product team and the design system.

✍️ Planning

Collaborate with the design system and UI team to prioritize our design needs and socialize the model.

We began with an audit and submitted the faulty component for the design system. Then, we proposed how the PAL component's lifecycle could contribute to it.
Our goal was to help build a scalable design system by being active contributors. We made sure all dependencies were included in the feedback loop to keep us on the right track and address issues within the larger HPE design ecosystem.

↓ I compiled a list of high-demand components from our product that require availability or bug fixes, prioritizing and color-coding each section. We then presented the file to the design system team to align solutions and create a plan.

Implementation

The library and tools that cater to our GLCP product designers

This library aims to improve the process of finding product-specific guidelines and designing standardized complex patterns in GLCP. It enhances design components through advanced iterations while maintaining a feedback loop for continuous improvement of the design system.

Figma Component Architecture

Develop an intuitive UI kit for designing to facilitate quick and straightforward design decisions, offering pre-set design options to expedite mockup creation.