Alto

A design system for SageSure

Skills

UX design, UI design, mentorship, AI strategy

Tooling

Figma, Storybook, Cursor, zeroheight, Slack, Ballpark (for surveys)

Deliverables

Components, patterns, templates, documentation, metrics deck, and quarterly + annual planning

Tech

React Native, Web components

Team

1 design lead (myself),1 senior designer and 3 devs supporting a design team of 12 and 20+ devs

Statistics

Based on 21 months of implementation

320% increase in inserts, <.2% detach rate

From ~2k inserts up to ~11k, year-over-year

SUS score of 82 (A-)

100% participation + 75% positive sentiment

233% increase in contributions

From both engineers and designers

How this was accomplished:

  • Mentoring: mentor designers in systematic thinking, accessibility, relationship building and design/engineering best practices

  • Prioritization: balance and address the needs and priorities of various system consumers, fostering community at every opportunity

Context

2022 – 2023: A System is Born. Before I arrived, a small team laid the groundwork — a Figma library, Storybook repository, and ZeroHeight documentation. The foundation was set.

2024: Growing the System. I joined to take the system further. That meant refactoring low-usage components, establishing qualitative and quantitative metrics, defining team processes, and building community around the system. I also saw a rebrand implementation through to completion — and gave the system its own identity: Alto.

2025: Fix the Foundations. With Alto named and stable, Team Alto turned its attention inward. We examined everything from color tokens to basic cards, rebuilding from the ground up to prepare for the demands of AI-assisted design and development.

2026: Automation & Intelligence. Team Alto is paving the road for company-wide adoption of emerging tools — including a new content plugin in Figma and an AI Playground in Storybook, giving designers and developers room to build consistently and experiment freely.

AI tooling

Alto Playground

Off-the-shelf AI tools like Figma Make and Cursor lower the bar for prototyping — but the output is verbose, ungoverned, and disconnected from the actual component library. As a deliverable to engineering, cleaning it up often costs more than building from scratch.

The Alto Playground is the fix. Built on top of our component library inside Storybook, it's an AI-driven sandbox where anyone — designers, engineers, PMs, leadership — can create coded proof-of-concepts, prototypes for user studies, and UX mock-ups using real components. No translation layer, no missing guardrails. I'm leading the UX and UI design, alongside the foundational work that makes it possible: token cleanup, template creation, and compound component patterns.

Sage: Content Assistant

When content guidelines live outside the design workflow, they get ignored — not out of carelessness, but convenience. Designers rely on memory, make ad hoc calls, and move on. The result is copy drift: inconsistent tone, terminology, and microcopy that accumulates quietly until it shows up as rework in review.

Sage is the fix. A Claude-powered Figma plugin, Sage embeds content guidance directly where designers work — providing real-time linting and scanning so inconsistencies get caught before they compound. Next up: integrating Sage as an API into the Alto Playground, putting content intelligence in the hands of engineering, leadership, and marketing too.

AI Presence

How AI expresses itself across SageSure's products

Problem Without a shared framework, AI was arriving across SageSure's 5 products inconsistently — purple sparkles here, bare labels there, altered components, and mounting debt. Every team was making independent visual and interaction decisions, and time that could have gone toward meaningful AI experimentation was being lost to problems a good system could solve.

Process Several months were spent auditing existing implementations, gathering use cases, and collaborating directly with the design team. Experimentations covered how to mark AI content, communicate uncertainty, handle beta states, support chatbot experiences, and manage disclaimers by audience type. Everything is documented in ZeroHeight as a living resource.

Outcome A singular, shared language for how AI expresses itself across all 5 products. Two new components are in launch, with more planned. The system gives FTE designers and design contractors a clear reference — reducing debt and freeing teams to focus on meaningful AI innovation. Here’s the documentation and code.

What else do I do?

  • Architected a semantic token pipeline and refactored component foundations — including deprecation and migration — resulting in a 63% YoY increase in Figma insertions and a .14% detachment rate.

  • Guiding the transition to AI-native workflows, including a Figma plugin that embeds content guidelines directly into design workflows and a pathway for AI-led prototyping with coded components.

  • Shifting focus from components to foundations and templates, aligning with high-priority business needs and AI workflow support.

  • Establishing contribution standards and community programs that drove a 233% increase in system contributions within 18 months.

  • Leading and mentoring a design systems team including a full-time contract direct report and intern program, with a focus on systems thinking, accessibility, and cross-functional relationship building.