Building an Enterprise UX Design System
Summary
At the start of the project, design teams and brand partners across the organization had incomplete or no design systems, leading to fragmented user experiences and inefficient collaboration. Our team was tasked with creating a unified UX design system to support company segments and external partners.
We based the system on trusted sources including Material Design 3, atomic design methodology, React, WCAG standards, and current UX best practices. Figma was chosen as the platform due to its widespread use across teams. Components were structured and tagged to ensure consistency and long-term maintainability.
Building the system required careful planning, scalable design patterns, and collaboration across design, development, and business teams. We started with simple elements and scaled to modular components, improving consistency and reusability.
Globally updatable components helped maintain standards and streamline collaboration. Managing flexibility, variants, and diverse use cases was challenging but essential to creating a scalable, reusable system.
Conclusion
We delivered a structured, component-based UX design system in Figma that improves workflows, reduces errors, and supports collaboration. It scales with product growth, maintains brand consistency, and continues to serve as a foundation for design excellence across the organization.
UX/UI Pattern Library
Summary
Ricoh-USA lacked a user interface pattern library to address common design challenges and ensure consistency, maintainability, and reusability across its websites and applications. My role was to create tailored pattern libraries that aligned with each corporation’s unique needs and goals.
The solutions presented were designed specifically for these organizations, taking into account their existing corporate structures, available technologies, internal capabilities, and user needs
.
Conclusion
By developing customized pattern libraries, I helped these companies establish a foundation for scalable, user-centered design. The resulting systems improved efficiency, reduced design inconsistencies, and supported long-term growth across digital products.
Sample pages
Wireframe Standards Guide
Summary
Each product team had a dedicated UX/UI designer who collaborated closely with an assigned architect. While teams learned to interpret their architect’s wireframes, challenges emerged when architects changed teams, were newly hired, or had to build upon another architect’s work. Inconsistent wireframing styles made it difficult for teams to interpret designs, slowing down production and creating unnecessary friction.
To address this, I created a company-wide wireframe standards guide aimed at bringing consistency to how architects produced wireframes. The guide outlined clear visual and structural conventions, optimized for use with Axure, the company’s chosen prototyping tool. Everyone involved in reviewing wireframes received the guide and a brief orientation, ensuring alignment across teams.
Conclusion
The wireframe standards guide significantly improved communication, reduced confusion, and increased design efficiency across teams. It also streamlined onboarding for new architects and team members, enabling faster integration and more consistent design output throughout the organization.
Sample pages