CRM: Design System
Overview
I played a pivotal role in establishing the iOS CRM design system team, leading its expansion to Android and web platforms. This involved creating foundational libraries of colors, typography, and icons, establishing design principles and practices, overseeing daily stand-ups, implementing atomic design methodologies, and developing a comprehensive component library and documentation site.
The groundwork for the component libraries was laid by personally executing the majority of the design in Sketch and Figma, including building components, and writing usage guidelines. This foundation enabled the creation of libraries and processes that facilitated the entire team's contribution to the design system. Recurring design system meetings, a quarterly newsletter, and weekly Slack and stakeholder updates were also implemented to foster collaboration and ensure ongoing alignment.
My Role
Branding, Design System Leadership, Component Library Design, Documentation, Cross-Platform Implementation, Team Management
Results
• Achieved 100% adoption of Android components
• Increased integrated iOS components by 85%
• Grew PM involvement from 10% to 90%
• Reduced palette colors by 70% (from 200+ to 60)
• Converted 100% of PNG & JPG icons to vector icons
The effort distribution across the system's four phases, as visually represented, reflects significant effort in Adoption (building components and audits) and Execution (optimizing components, training, and complex integrations), combining design execution with team leadership, ensuring alignment through meetings and goal setting.
For the Veeva Aurora Design System's naming and logo creation, I designed a logo symbolizing guidance, convergence, and scalability through interlocking 'V' and 'A' forms, creating a dynamic funnel metaphor. Additionally, I designed distinct app icons for the Design System Platform Apps, Dev Apps, and Slack Bot, ensuring visual consistency and clarity across all touchpoints.
A look into the UX design effort behind creating a functional design system, including audits, migrating to Figma, and organizing components for team use.
Building and implementing design system components involves close collaboration between design and development, using demo apps for feedback and refining components together.