MANAGERIAL CASE STUDY

Juniper Networks – Design System

This is the story of how I saved a failing design system project, fostered collaboration between design and development, and led the creation of a new design system that is modular, scalable, packed with features, and established governance for ongoing success.

Scaling a Design System for Enterprise Platforms

Problem Statement

As the newly appointed Director of User Experience at Juniper Networks, I found conducting a comprehensive evaluation of the existing design system essential. The goal was to identify critical issues that hinder our product’s usability, aesthetic appeal, and overall efficiency.

The design system had great potential but was missing key features, which slowed development cycles by months and degraded user experience across Juniper’s enterprise platforms, leading to increased support costs, inconsistent branding, and lower user adoption.

After a thorough analysis, I identified six fundamental problems that required immediate attention to enhance our design system and user experience.

Challenges

The evaluation revealed significant issues in the following areas:

  1. Components — Inconsistent look & feel and takes too long to create & updateThe existing component library used an open-source component library as a base, then changed the look and feel of each component to the design specifications created by in-house designers. Before my arrival, it took a small team of UI engineers two years to update 30% of the components in the open-source library to the new look and feel. To make matters worse, each time the open-source library had an update, the UI engineers spent months updating the latest code with their existing changes before they could continue updating new components.
  2. Color Palette — Unattractive interface, inconsistent color usage, and doesn’t support brandingThe palette is minimal, making it challenging to create engaging designs and restricting the ability to create visual hierarchies, differentiate elements, and guide users across interfaces and platforms. There is only a light mode palette, and no palette exists for a dark mode. The number of color variations, brightness, and saturation levels are inconsistent across the colors, creating a disjointed visual experience that lacks cohesion. The company’s branding guidelines weren’t considered during the palette’s creation, causing a disconnect from the brand identity, which can confuse users and weaken brand loyalty and recognition. Dozens of employees told me privately they felt the color palette made our software products unattractive and asked me to fix the palette.
  3. Navigation — Limited visibility, interaction inefficiencies, and poor information architecture representationThe navigation was a vertically expanding tree structure within a narrow panel on the left side of the screen. As the depth of the navigation tree increases, scrolling and navigating through multiple levels becomes cumbersome, increasing the users' time on task and cognitive load. Users must frequently collapse and expand sections to navigate through different parts of the site. This constant toggling is tedious and time-consuming, leading to frustration. Since a limited number of items are in view at one time, higher levels of navigation would often get pushed out of view when scrolling, causing users to lose track of their location in the site architecture, leading to confusion and disorientation. In addition, the fixed width of the navigation pane limited the number of levels the navigation tree could allow.
  4. Data Visualization — Inconsistency in design, lack of standardization, and inappropriate chart selectionDespite the existence of some design documentation, engineers usually worked on data visualization without designers' input to complete their work faster. Engineers selected charts and graphs they thought were appealing and made their own color choices. Inconsistent colors and styles created a cluttered, unprofessional appearance, making it harder for users to understand and compare data. Varying chart types for similar data sets also increases cognitive load and the possibility of users misinterpreting data, leading to incorrect conclusions.
  5. Accessibility — Exclusion of users with disabilities and non-compliance with WCAG and legal standardsThere was no accessibility compliance in the open-source component library used for the existing design system and limited compliance in the design specifications created by the in-house designers. This creates a barrier for users with disabilities, preventing them from effectively interacting with the software products. Failing to meet WCAG guidelines exposes the organization to potential legal action under accessibility laws such as the Americans with Disabilities Act (ADA) and similar regulations globally. Non-compliance can result in fines, lawsuits, and mandated remediation. For the company, this can cause a negative brand perception, loss of market share, and increased development costs for retroactive fixes.
  6. Grid Layouts & Responsive Design — No established layout patterns and only one breakpointWhile the specifications created by the in-house designers included some rudimentary grid layouts specified for different breakpoints, the design group wasn’t using the grid system for their layouts, and the software products were only designed and built for one breakpoint - laptops. Interfaces can appear cluttered and chaotic without grid layouts, and elements may not be aligned or spaced consistently. Misaligned text and elements can disrupt the visual flow, making it harder for users to read and comprehend the content. This inconsistency makes it difficult for users to scan and understand the interface quickly. In addition, interfaces designed without responsive principles are often fixed in size, leading to issues when viewed on different devices or screen sizes. Users on mobile devices or large screens may experience poor usability due to inappropriate scaling.
Actions

The evaluation revealed significant issues in the following areas:

  1. Components — Implement an open-source component library for scalable, consistent, and efficient product developmentFaced with three options—continuing with the existing library, building a new one, or choosing an open-source library—we opted for the latter due to resource constraints and past inefficiencies. We evaluated 90+ libraries based on four criteria: 1) customization flexibility, 2) accessibility compliance, 3) long-term maintainability, 4) alignment with our tech stack, and 5) documentation for developers and designers. After rigorous testing, we narrowed it down to two choices, which our design and engineering teams tested, and ultimately selected one clear winner. We centralized design and development collaboration in Figma and Storybook, established strict design tokens for consistency, and utilized our framework to encapsulate the library in a modular architecture. Automation through CI/CD pipelines streamlined testing and deployment while governance ensured design integrity, scalability, and backward compatibility. Comprehensive documentation and training will ensure long-term system maintenance and evolution, providing a consistent product user experience.
  2. Color Palettes — Design accessible light and dark mode palettes with seamless brandingAfter reviewing the company’s branding guidelines, I selected Juniper’s leaf green as the base color and developed twelve core colors, adjusting for balance and harmony. Each core color was further refined into twelve variations in brightness and saturation for diverse use cases and data visualization. Primary, secondary, and accent colors were chosen for consistent use across the product suite, with extensive testing to ensure accessibility, readability, and WCAG compliance. The same process was applied to create a dark mode palette. Comprehensive documentation and workshops were provided to train designers and developers on implementing the new palettes effectively.
  3. Navigation — Create seamless mega menu flyouts for enhanced user experience and efficiencyWe created a mega menu with flyouts to solve the issues of limited visibility, interaction inefficiencies, and poor information architecture in the current vertical tree navigation. This solution enhances visibility by allowing more items to be displayed simultaneously in a horizontal layout, reducing the need for excessive scrolling. Flyout panels provide a clear, structured view of subcategories, minimizing clicks and navigation time. The mega menu reflects the site’s architecture more effectively, helping users avoid disorientation. Additionally, the design adapts to different screen sizes, ensuring a seamless experience across devices. The mega menu delivers a more streamlined and intuitive navigation experience by lowering cognitive load and improving interaction efficiency.
  4. Data Visualization — Create a unified system for clear, consistent, and impactful charts and graphsWe designed and built all new charts and graphs to create a unified, professional data visualization system that leverages the new design system and color palette to ensure clarity and consistency. Key elements include integrating a standardized color scheme, typography, and layout across all charts, supported by a chart selection tool that guides teams in choosing the most appropriate visual format for their data. A collaborative workflow between designers and developers, alongside pre-approved chart templates, will further ensure adherence to design standards while reducing development time.

    Feedback loops will continuously refine the system based on input from designers and developers. Training sessions and onboarding materials will familiarize team members with the new standards. This approach ensures that all data visualizations are clear, accurate, and easy to interpret, empowering customers to make better informed, data-driven decisions.
  5. Accessibility — Create a strategic roadmap to achieve WCAG compliance and build inclusive digital interfacesI created a UX Accessibility and WCAG Compliance Strategy Plan that outlines a comprehensive approach to ensure that all digital products and component libraries achieve WCAG 2.1 (and future 2.2) compliance, improving the user experience for individuals with disabilities while mitigating legal risks. The plan began with thoroughly auditing existing components and identifying non-compliance areas such as color contrast and keyboard accessibility. It then lays out a phased roadmap prioritizing short-term fixes and long-term integration of accessibility into design and development processes.

    Key initiatives included:
    • Building a WCAG-compliant component library.
    • Creating developer guidelines focusing on:
      • Semantic HTML elements.
      • ARIA roles and landmarks.
      • Keyboard focus management.
      • Descriptive error messages.
      • Dynamic content that can be read by screen readers.
    • Embedding accessibility into company culture through training.

    The strategy concludes with continuous monitoring and compliance tracking, ensuring adherence to global accessibility laws. By following this plan, the company can enhance brand perception, reduce legal risks, and create a more inclusive user experience.
  6. Grid Layouts & Responsive Design — A strategy for visual consistency and scalability across all devicesI developed a strategy to enhance visual consistency and introduce responsiveness and scalability across all devices. The plan started with in-depth research involving stakeholder interviews, user testing, and competitive analysis to identify pain points caused by cluttered interfaces and misaligned elements. The primary goal was to implement a 12-column grid system and responsive breakpoints, ensuring the layout adapts smoothly to different screen sizes while maintaining a clean, organized design. The strategy focuses on fluid layouts and establishing spacing and alignment guidelines for a unified user experience.

    The design system will ensure all UI elements adhere to the grid system and scale appropriately across devices. Prototyping, usability testing, and iterative refinement will ensure continuous improvement, with collaboration between UX and development teams. Post-launch monitoring will track user satisfaction and drive ongoing enhancements, resulting in a visually consistent and scalable software suite that performs well on all devices.
Results

Significant improvements for the customers and the company.

  1. Developer and Designer Efficiency (Productivity Gains)A consistent component library, streamlined design-developer collaboration, and training resulted in 27% faster development cycles.
  2. User Interface Quality and ConsistencyBrand-consistent color palettes, components, and a robust governance model yielded a 92% improvement in UI consistency across software products with a significant impact on customer trust and usability.
  3. WCAG Compliance (Accessibility Improvements) Adding WCAG-compliant color palettes, data visualization, and interactive elements enhanced the product experience for users with disabilities and improved accessibility scores by 78%.
  4. User Satisfaction & EngagementImproved navigation, responsive design, and reduced cognitive load made the software more straightforward and intuitive, reducing friction and frustration and contributing to 26% higher user satisfaction scores and a 12% improvement in user engagement.
  5. Cognitive Load ReductionEffective site architecture and clear navigation menus reduced the mental effort needed for users to find information, decreased errors and task abandonment rates, and reduced time-on-task by 24%.
  6. Data Visualization Usability & InterpretationAccessible and clear data visualizations enhance user understanding and decision-making. New, consistent, WCAG-compliant visualizations improved data interpretation and usability by 59%.
  7. Training & DocumentationGood documentation reduces dependency on tribal knowledge, making onboarding easier and enhancing self-sufficiency among teams. A comprehensive documentation system and proper training, improved knowledge retention and sped up problem-solving by 31%.
  8. Governance Model (Long-term Sustainability and System Adherence)Ongoing governance ensures changes to the design system are deliberate, minimizing drift and inconsistency that plagued the previous system. With governance in place, we anticipated 95% adherence to the new design system within the first 12 months.
Previous Project Case Study – Scholastic
Next Project Design Thinking – Vanguard