Design System for Product

Case Study

ZS was at risk of losing client relationships due to the visual inconsistency of its solutions. The CTO’s first request upon hiring the UX leader was to make products look cohesive. The legacy tech stack made a centralized solution structurally impossible — requiring a decade of iterative progress across three design system generations.

Information graphic summarizing the 2020 overhaul of ZSUI, featuring sections on color palette, typography, and iconography.

Company & Position

ZS Associates, Associate Partner & later Partner (2011-2024)

Details

ZS competed against Salesforce, Veeva, and Axtria — companies that had invested in polished, cohesive interfaces. A suite of 40+ products had accumulated years of inconsistent UIs built on different stacks. The inconsistency was affecting UX throughput, appearing in satisfaction surveys, and surfacing in renewal conversations.

Actions

  • Version 1 (2012–2015): Audited all solutions for common interface elements; standardized interaction patterns and code where the stack allowed. Conducted competitive analysis; presented risk to the Shareholder Council and secured investment.
  • Version 2 (2015–2018): Used company rebranding as a catalyst — extended scope to digital asset guidelines, separated front- and back-end code, and established a centralized component repository. Conducted a new competitive assessment.
  • Version 3 (2018–2020): Established a dedicated product group function with UX designers, front-end developers, and a fractional product manager; defined governance and cross-functional processes for design and engineering collaboration.

Outcome & Impact

  • Three successive design system generations delivered over ten years.
  • Client and sales team feedback on solution appearance dropped significantly as products began to look and behave like a cohesive suite.
  • UX delivery throughput increased; visual consistency across all licensable software established and maintained.

Work Samples

Version 1. Standardization of ad hoc design components.

Version 2. Homegrown Design Standards, no central repository.

Screenshot displaying moderate visual design improvements made to the Javelin software, featuring lists of names, specialties, and a tablet view showing detailed information and data analysis.
Screenshot of the Javelin Compensation Engine interface, displaying various components and settings for a Territory Bonus plan, highlighting fields for inputs, outputs, and block data filters.

Version 3. Professional Design System with integrated code, governance, etc.

Infographic detailing the 2020 overhaul of ZSUI, highlighting improvements in color palette, typography, and iconography to enhance visual appeal and reflect the brand's personality.
Side-by-side comparison of two map interfaces showing a 'JAMS Before' view on the left with numerous red markers and an 'Alignment After' view on the right featuring a more organized color-coded map layout.
Comparison of the 'Roster Before' interface showing a list of notifications in a tabular format on the left, and the 'Roster After' interface displaying a detailed hierarchical view with employee assignments on the right.
Screenshot comparing RDM Before and RDM After interfaces, showcasing UI updates and data management improvements.

© 2026 Natalie Hanson

Discover more from Natalie Hanson, Ph.D.

Subscribe now to keep reading and get access to the full archive.

Continue reading