Building a Scalable Design System and Advancing Product Thinking
The Request was for the team to outline the Minimum Viable Product (MVP) for two unique offerings: Text2Park, a solution based in Europe, and a customized SMS Valet for DFW Airport. Enhance the organization's capabilities with a Product-Thinking mindset, guiding the client team in product-focused strategies and methodologies. Create, design, and implement a scalable user experience that adapts easily to various brands.
My Role: Halfway through the project, the lead designer left, creating a need for a swift transition and additional support. My responsibility was to step in and fill this gap quickly. Over two weeks, I worked on finalizing and delivering a comprehensive design system based on the existing framework, successfully overcoming the challenges posed by the previous designer's departure and tight deadlines.
The Team’s Obstacles
Cross-Team Collaboration: Working with multiple teams brought about process disparities, compounded by TEZ’s limited familiarity with product design.
White-Labeled Design: Nearly all customer-facing work must be adaptable across various brands.
Limited Timeline: The original 10-week project timeline was extended to 21 weeks as scope adjustments were made.
Designer Transition: Midway through, the lead designer departed, requiring a quick transition and additional support. My role was to fill this gap quickly.
Solutions and Process
User Flows and Prioritization: To align all teams, the team introduced clear user flows, prioritization guidelines, and defined expectations.
New Handoff Process: I implemented a streamlined process supplemented by thorough documentation.
Regular Check-ins: Frequent check-ins kept everyone aligned and ensured smooth inter-team communication.
Branding Alignment: The team facilitated a branding workshop and developed mood boards to establish a consistent look for TEZ, ensuring cohesion across future projects.
The Design System Solution: During a two-week onboarding period, I focused on finalizing and delivering a comprehensive design system using a base system, overcoming the previous designer's departure and tight deadlines.
Design System Expansion
I developed a comprehensive and well-documented system of core styles and components optimized for scalability, utilizing the base Moja UI system. This included creating seven new components, each with detailed states, sizes, and variants, resulting in over 37 pages of components designed to meet white-labeling requirements and branding and accessibility standards.
In collaboration with the other designers on the team, we tested the components for quality assurance and accessibility compliance. We tracked and resolved design and development bugs, and I also included annotations for complex interactions.
AI for Documentation
I leveraged GenAI, saving 20 hours on documentation and generating descriptions, usage guidelines, and component examples to include in the design system.
Efficient Handoffs
I prepared the applied designs for development with updated screens and onboarded the Client’s partner team to ensure the smooth adoption of the new artifacts.
Developer Handoff included:
Comprehensive Visuals: Provided clear component details for functionality and design understanding.
Detailed Annotations: Explained complex interactions and requirements.
Reusable Components: Delivered clean, well-organized Figma components optimized for dev mode.
Design System Walkthrough: Guided developers through the system, addressing questions and clarifying details.
Onboarding Documentation: Delivered visual instructions and documented design system details for easy understanding.
Design System Walkthrough: Presented the system and addressed complex interactions and requirements.
Results: The design system brought immediate consistency across TEZ’s products, setting a foundation for scalable, efficient, and branded experiences.
By the project’s end, we had…
Upskilled the Client’s partner team with resources for continued product-driven development.
Delivered…
Comprehensive Design System
Expanded the Moja UI system with fully documented, scalable, and maintainable core styles and components.
Applied Design Screens
We utilized the design system to create development-ready components integrated into applied design screens.
Versatile Components
We developed 7 new components with complete states, sizes, and variants, ensuring QA testing and accessibility compliance.
Collaborative Sessions
We developed 7 new components with complete states, sizes, and variants, ensuring QA testing and accessibility compliance.
Final Words.
Seek opportunities to streamline and support your team. Understanding when and where to apply AI can significantly reduce repetitive tasks. Also, stay in close communication with teammates and lead to identify ways to enhance team efficiency and quality.