American Family Insurance
Building an Enterprise-wide UX Design System
Summary
Design teams and partners once struggled with fragmented user experiences and inefficiency, so we built a unified UX design system in Figma grounded in Material Design 3, atomic design, React, WCAG, and UX best practices. Structured from simple elements to modular components, it improved consistency, reusability, and scalability while streamlining collaboration and onboarding.
The system enhances workflows, reduces errors, and fosters collaboration, remaining scalable with growth to maintain brand consistency and provide a lasting foundation for design excellence.
Retention UX design system components
Leveraging insights from the enterprise-wide UX design system, components were tailored to Retention team workflows with scalability in mind, replacing duplicate parts that had previously made updates difficult.
A previously designed component, the Accounts-to-pay card
The same card is now easier to modify
Designers spent too much time duplicating work because hidden component options caused confusion. By restructuring the component to show all properties and variants upfront, designers could quickly toggle options they didn’t need, streamlining workflows and reducing wasted effort. Because no single option was used most frequently, this approach proved the most efficient.
The Accounts to pay card
The Accounts to pay card component controls in the right sidebar
Ricoh
UX/UI Pattern Library
Summary
Lacking a UI pattern library to solve common design challenges and maintain consistency across digital products, I designed and implemented tailored libraries. Each solution was crafted with an understanding of goals, technologies, structures, and user needs, ensuring scalable, reusable components that supported cohesive, high-quality experiences.
Wireframe Standards Guide
Summary
Each Each product team worked with a dedicated designer and architect, but inconsistent wireframing styles caused confusion and slowed production—especially when architects rotated teams or new ones were hired. To solve this, I created a company-wide wireframe standards guide with clear conventions optimized for Axure. Shared with teams through a short orientation, it streamlined collaboration, reduced friction, and made onboarding faster, leading to more consistent, efficient design output.
