design systems & team processes
Summary
I have conceptualized and maintained three distinct design systems across two diverse products. Additionally, I have established and enforced various processes and guidelines, ensuring unwavering consistency within these systems for seamless expansion. I've played a key role in creating design department processes, defining role expectations, organizing recurring meetings, and implementing skill matrices to foster a collaborative team culture.
Challenges
As the first UX designer in the young tech department, tasked with expanding the design team, I had to implement processes to address current issues and prepare for future expansion.
Little to no guidance on how to establish processes and streamline the department.
Outcomes
Implemented processes and meetings including but not limited to:
Documentation tools and expectations of quality for design department.
Implemented streamlined processes that significantly expedited project timelines and design-to-dev handoff efficiency.
Development of skill matrix for self and manager assessment purposes, to better navigate career advancement conversations
Standup
“Watercooler chats” to foster team culture
Versioning history files, for internal tracking of work and overall organizational purposes.
“Welcomer’s guide to the design team”, outlining design team members expectations, our culture and values, career ladders, and knowledge / technical resources.
Instillation of “design syncs” to foster team collaboration and communication
Implementation of design team processes resulted in a remarkable 95% reduction in questions from QA and engineers, optimizing collaboration and saving substantial resources in design, QA, and engineering efforts.
Improved internal and external team communication and collaboration through recurring meetings, versioning history files, and clear documentation.
Challenges
The design system posed a significant challenge, having been created by multiple agencies and contributors without a proper understanding of system and component creation—a classic case of "too many cooks in the kitchen".
Extensive cleaning, organizing, and restructuring were required at a near-molecular level in the existing design system.
Issues included deep-level disorganization, a lack of consistency in base units and naming conventions, technically unsound components, and the inclusion of inappropriate elements in the system, all contributing to clutter and disarray.
All components were custom, leading to meticulous consideration for every component due to widespread inconsistencies in the site. For instance, it was not uncommon to find several primary buttons with varying padding sizes all within one page.
Over the span of one month, I undertook the task of singlehandedly rebuilding every component, implementing naming and organizational structures, defining responsive breakpoints, and creating clear instructional guidelines for designers, developers and QA to reference.
Outcomes
Successful creation and implementation of the updated design system.
Establishment of crucial systems, including base unit systems, typography, color palettes, button hierarchy, modal standards, and organizational structure of components, and technical building of components for scalability and logical variants.
Resolution of inconsistencies in components and designs.
cosmos: design system
Challenges
Crafting a design system for a Greenfield product necessitated meticulous attention to all component interactions and states.
All components were custom, requiring clear documentation and organization for effective communication across designers, engineers, and QA.
The design system needed to be adaptive to both desktop and mobile platforms while adhering to accessibility guidelines.
As the lead designer, I had to uphold brand and technical standards as the system evolved.
Outcomes
Successful creation and implementation of the CRM design system.
Adoption of the design system base by another Greenfield product within our product suite (Atlas).
Challenges
One year following the successful redesign of the Credit Repair Cloud design system, the decision was made to transition from custom components to MUI (Material-UI). Spearheading this design system transition, I simplified the existing design system to ensure a smooth and efficient transition.
The team faced a tight deadline of 6 weeks for the entire system transition, which included the learning curve associated with the new MUI environment and ensuring the proper migration of existing components.
A meticulous review of the existing components was imperative, aiming to minimize the creation of custom components and maximize the utilization of native MUI components.
Implementing a strategic process was essential to successfully convert existing designs and upcoming features from our current components to the updated MUI components.
Outcomes
Figma library transition was successfully completed within 6 weeks.
While adhering to the majority of the MUI UI, I infused enough customization to maintain the distinctive look of our product.
Although ongoing, current production transition efforts have been successful.
Full MUI rollout estimated in April 2024.
