Design System Modernization
Leading the modernization of a unified design language, with design tokens and a component library, across the product ecosystem.
Client:
Tom Sawyer Software
Scope:
Design Systems Leadership
Year:
2024-Present
OVERVIEW
I led the design side of a UI redesign and design system for the Classic Web Preview of Tom Sawyer Perspectives, working closely with product managers, developers, QA, and documentation teams. The original enterprise interface had no consistent design language: cluttered layouts, low-quality generic icons, unintuitive navigation, and an outdated look that put the product behind more modern competitors.
Using a design thinking approach, I built a scalable design system with reusable UI components, a custom icon library, design tokens, and consistent interaction patterns. I continue to maintain and extend it as the product evolves. The result, the Modern Web Preview, improved usability and visual consistency across the framework and strengthened client-facing demos, proofs of concept, and custom applications.
THE CHALLENGE
Cognitive Overload. A cluttered interface with weak visual hierarchy hindered focus and task completion.
Visual Inconsistency. Low-resolution, generic iconography lacked context and lowered perceived product quality.
Navigational Friction. Fragmented user workflows across drawing, table, timeline, and tree views complicated cross-module navigation.
Competitive Disadvantage. An outdated aesthetic pushed prospective clients toward more modern, user-centered competitors.
MY PROCESS
Empathize & Research
Led UX research, including competitive benchmarking, cross-functional stakeholder interviews, and a UX audit of six complex interface views, to align user goals with technical constraints.
Define
Turned documented usability gaps (visual clutter, navigation hurdles) into requirements for a scalable design system, including a foundation of design tokens for color, typography, and spacing.
Ideate & Prototype
Partnered with Product Development to launch the Modern Web Preview across all live demos, proofs of concept, and the product roadmap. Documented components and design tokens for developer handoff, and keep them updated as the system grows.
Test & Refine
Validated designs through prototyping and design reviews with Product, Layout, QA, and Documentation teams to confirm technical feasibility and resolve inconsistencies.
Implementation
Partnered with Product Development to launch the Modern Web Preview across all live demos, proofs of concept, and the product roadmap.
Design process for an enterprise UI redesign: interface audit, layout, icon system, and design tokens. Process artifacts shown here are recreated to protect confidential project materials.
OUTCOME
Better user experience. Modernized the interface and reduced cognitive load for complex, data-heavy tasks.
Unified visual language. A custom icon library clarified features and streamlined navigation.
Scalable design standards. A robust design system with a design token foundation and component library improved consistency, sped up design-to-development handoff, and strengthened client confidence in the platform.
Cross-functional adoption. Raised trust and satisfaction among engineers, analysts, and product managers.
SKILLS
Design Systems · Design Tokens · Component Library · UI Design · UX Research · Interaction Design · Information Architecture · Wireframing · Prototyping · Iconography · Design-to-Development Handoff · Enterprise SaaS · Cross-Functional Collaboration