How the new Data visualization library increased adoption of our Design system
Honeywell Forge UI Design system
1.
Overview
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.
Duration
May 2022 - November 2022
7 months
My role
UX Research
UX Design
Stakeholders
Product Owners | Product Managers |
UX Researchers | UX Designers
2.
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 -
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
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.
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.
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.
Scalable
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
Full page
Accessible
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.
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
Implemented multiple best practices for accessible data visualization. Various considerations were addressed to cater to different user needs enhancing a11y of library.
Interactive
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
Line graphs
Configurable
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 -
Invidual Bar component variants -
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.
