top of page

How the new Data visualization library increased adoption of our Design system

Honeywell Forge UI Design system

Group 23278.png


Forge UI Design Systems supports 6+ SaaS product teams within Honeywell, spanning industrial applications such as workforce management, cybersecurity, and warehouse management.

As a member of the Design System team, my responsibility was to modernize the outdated Data Visualization library and offer support to design teams utilizing the current library.


May 2022 - November 2022

7 months

My role

UX Research
UX Design


Product Owners | Product Managers |

UX Researchers | UX Designers

Group 23284.png

Project goal

The Forge UI Design System was missing the Data visualization library used by multiple product teams and designers.

The SaaS products teams relied heavily on Data visualization charts for showcasing status, health, and progress of different indicators. 

The existing data viz. was present in Sketch and designers referenced the library and modified the components based on the requirements. Reducing the consistency of designs within products.

Project scope -

Frame 2325520.png
Frame 2325525.png
3. Discover & Define

How collaborating with the team helped explore the scope of work


1. Conducting a heuristic evaluation of the existing library


2. Meeting product owners and designers from different teams to address new use-cases.


3. Collaborating with researchers to synthesize research findings.


4. An accessibility audit of the data visualization library.

4. Challenge

A lot of insights were gathered, and thus comes the difficult part!!

To meet business timelines, and deliver the data viz. library made us refine the scope of the project and prioritize the component list.

Prioritization matrix

Following Agile sprint methodologies and having close discussions with different Product owners, I created a detailed prioritization matrix with T-shirt sizing of involved work with each component.

The final list was made based on the number of times the chart is being used in the product and identified components.


Finalised components to work on -

5. Designing the system

Establishing foundational framework and guidelines for the new Data viz. library

Group 23281.png

Color-blind friendly color palette

The task of crafting a color-blind friendly color palette for data visualization was a first and most important aspect of developing accessible data visualization library. It began with a deep dive into established design systems, where I sifted through multiple established color palettes from enterprise design systems.

My primary focus was to ensure compliance with the Web Content Accessibility Guidelines (WCAG). Collaborated with a low-vision user to create multiple iterations of color options ensuring clear differentiation of colors among different visual spectrum. 

Group 1.png

Starting with the basic elements (Nested components)

After crafting designs for various chart types, the next phase  involved breaking down these designs into smaller, reusable nested components. These components formed the backbone of the data visualization library, facilitating the creation of final chart components with ease and consistency. Each chart type was deconstructed into its fundamental elements, such as bars, labels, legends, and line plots.


By adopting a component-based approach and applying atomic design principles, I aimed to enhance scalability and maintainability within the data visualization library, empowering both designers and developers to create dynamic and interactive charts efficiently. 

Frame 2325527.png
6. Design & Iterate

Validating designs and iterating based on feedback from stakeholders.

Regular feedback and recommendations from stakeholders played a pivotal role in refining and iterating my designs for the data visualization components. By prioritizing their input, I was able to make informed modifications that better addressed the needs and requirements of our project. 

Modifying color pallet based on User testing


During user testing with the low-vision user even if the color scheme satisfied the 3:1 contrast ratio, the patterns on the bar component were not visible to the user.


This led to complete modification of the color pallet used for data visualization library. The modified color scheme are now more accessible and compliant to WCAG AA standards.

Exploring edge cases of components with engineers


During a design review with engineers, we encountered an edge case with single stacked bar components where nearby bar values could intersect, posing both design and development challenges.

To address this, engineers proposed a solution based on relative value logic: displaying values of smaller bars only upon user hover. This implementation would feature tooltips showcasing the value and title of the bar upon hovering, mitigating potential overlap issues while maintaining data visibility.

Choosing between value above bars (vs) values inside bars


For the column graph variant with values, we considered two options: placing the values inside the bars or on top of them. To streamline the user experience and design process, we conducted unmoderated user testing to determine the preferred variant.


The results significantly favored placing values on top of the bars. Users found this placement to be more readable, aiding in better differentiation of bar levels. Additionally, this variant performed better when truncating larger values above the bars, further solidifying its selection as the final design option.

7. Final designs

How did the established library fit into our Forge UI Design system

The established data visualization library seamlessly aligned with the requirements of the Forge UI design system, ensuring consistency and scalability for enterprise-level products within Honeywell Connected Enterprise. Its modular structure and comprehensive documentation facilitated easy customization and adoption, enhancing collaboration and productivity across teams.


The developed compponents were scalable across platforms to satisfy different use-cases and requirements. For example - the line chart component was used cards and also as a full scale graph to visualize data for users.

Small Card

Frame 2325514.png

Full page

Global Ops Trends Default Screen - From Event Details.png


Accessibility was a major consideration during the development of the library. WCAG accessibility guidelines and best practices were implemented along with recommendations for designers and developers to use efficiently.

Frame 2325526.png

The design system library included detailed specification for each color shade used. It included details such as color variants satisfying AA and AAA WCAG standards

Frame 2325521.png

Implemented multiple best practices for accessible data visualization. Various considerations were addressed to cater to different user needs enhancing a11y of library.


Every esablished component included visually different states for data visualization charts. Default state, Hover state, Selected state were the primary states of the compnents. 
Guidelines were establisehed and prototypes provided to the engineers to cater to different interactions.

Column and Bar graphs

Frame 2325524.png

Line graphs

Frame 23190.png


Designing a design system component, primary objective is to make designers work easier and customize efficiently. Clear naming structure and functionality for the users to modify the variants of the components plays an important role for the library.

Bar graph variants -

Frame 24390.png

Invidual Bar component variants -

Frame 24391.png

Usage guidelines

Guidelines plays an important role to ensure consistency of usage of eastablished designs across products. Including Do's & Don'ts, when to use & when not to use of each components. 

The documentation also includes specifications, different variants, states and examples of scenarios about how components can be used based on context.

Screenshot 2024-02-22 154441.png
Screenshot 2024-02-22 161212.png
Screenshot 2024-02-22 161445.png
Screenshot 2024-02-22 161614.png
# Result

What was accomplished

The new available data viz. library Increased adoption among new product teams

Updated accessibility considerations increased usage of the Forge UI Design system.

Best practices and documentation gave guidelines to designers to address different use-cases and ensure consistency.

bottom of page