Skip to content

Nicholas Pappas, MSc

Product Designer

Seattle, WA

E-Mail

LinkedIn

Please excuse the mess while I move stories to my new host and webpage format. Content first; format second.

Fleet Design System

Back to Projects

Helping VMware Tanzu achieve design consistency through a unified design system.

Summary

I spearheaded the development of Fleet, VMware Tanzu's comprehensive design system, to unify a rapidly unified product portfolio under a consistent visual language. By establishing operational processes and leading the implementation, I helped drive successful adoption across the organization, setting the stage for sustained growth and improved user experience.

Fleet's Design Guidelines cover page

Problem Framing

The Tanzu product umbrella expanded quickly, bringing in new products that lacked a shared visual language. This resulted in several key issues:

  • Product teams using different frontend technologies, causing duplication of functionality across frameworks.
  • No centralized source of truth for engineering, leading to developers unnecessarily duplicating solutions.
  • Lack of centralized design guidelines, making it difficult for designers to maintain visual consistency.
  • Gaps in accessibility compliance between products.

These inconsistencies compounded, creating a fragmented user experience and significant barriers to entry for customers.

Screenshot of Tanzu Cloud Health Screenshot of Tanzu Greenplum Screenshot of Aria Hub Screenshot of Tanzu Application Portal Screenshot of RabbitMQ Screenshot of Tanzu Mission Control Screenshot of Tanzu Observability Screenshot of Tanzu Observability Screenshot of Tanzu Service Mesh
Examples of the fragmentation within the Tanzu product line.

Role and Team

As the lead, I was responsible for developing and executing the plan to create Tanzu's design system. I established operational processes, drove implementation and adoption, and advocated for the system during design and development reviews. I collaborated with designers and developers to identify and address new component and pattern needs.

Approach

To overcome the challenges of unifying multiple products, I focused on:

Establishing a clear process and cadence, emphasizing responsibility, accountability, and streamlining collaboration.

The Fleet feature process, showing clear tracks for the discovery, design, coding, and documentation of features

Process

Performing a GUI audit to understand the degree of divergence in common patterns.

Screenshot of visual audit, showing a lack of consistency across the Tanzu portfolio

Visual audit

Our efforts creating a product-agnostic Tanzu customer journey map enabled me to better scope GUI needs. By understanding the workflows, and user expectations, I was able to better focus priorities and conversations around design system components and patterns.

The Tanzu Customer Journey, showing a gap analysis, pain points, outcomes expectations, and more in multiple swimlanes

Tanzu E2E journey

By providing a clear visual representation of entities, attributes, and relationships during early component design, entity diagrams establish a shared understanding and covabulary that facilitates effective collaboration. This common language enables designers and developers to work together closely from the outset, ensuring that the design system's structure and organization are well-defined and understood by all stakeholders.

An example entity diagram, enabling design and development teams to share a common language

Entity diagram exmaple

Challenges

Without a dedicated design system team, product teams worked on elements as needed to support their feature requirements. This drove a deep need to ensure all voices were heard throughout the design process.

Solution

Screenshot of the Fleet Design Guildelines 'Help and Instructions' Pattern page

The Fleet Design Guidelines Figma file provided a one-stop shop for components, patterns, guidelines, accessibility, and all aspects designers needed to move quickly while maintaining consistency. It included:

  • Robust, reusable components with clear usage guidelines.
  • Purpose built reusable pattern guildelines.
  • Accessibility quick reference and annotations to guide development.
  • Visual regression tests to reduce unintended changes.
Screenshot of the Fleet Design Guidelines Datagrid components
Screenshot of the Page Header design guidelines from the Fleet documentation
A desinger's reference sheet for accessibility, from the Fleet Design Guidelines
Screenshot showing accessibility annotations for an Accordion widget, from the Fleet Design Guidelines
Screenshot of a visual regression test page, from the Fleet Design Guidelines

Results and Impact

By the time I stepped away from the project, we had seen:

  • 86% increase in design consistency
  • 65% reduction in UI engineering time
  • 87% accessibility compliance score

Fleet's unified visual language led to a more cohesive user experience across Tanzu's products.

Screenshot from the unified Tanzu look-and-feel, using the Fleet design system (1 of 4) Screenshot from the unified Tanzu look-and-feel, using the Fleet design system (2 of 4) Screenshot from the unified Tanzu look-and-feel, using the Fleet design system (3 of 4) Screenshot from the unified Tanzu look-and-feel, using the Fleet design system (4 of 4)
Examples of Fleet's unified visual language.

Next Steps

The process and deliverables are living entities that continue to evolve. Next steps would be to further integrate the design system into the development workflow, such as successfully implementing Storybook to provide a single source of truth for developers.