LoanStreet Design System: Building a Foundation for Scalable Growth
Challenge
LoanStreet's rapidly expanding product portfolio demanded consistent and reusable design components. The existing system, with just 6 undocumented and feature-specific elements, lacked scalability and flexibility. This resulted in inconsistencies and limitations that hampered product development and user experience.
Project Details
Company: LoanStreet
Team: Design Lead - Nikki Plyem / Engineer Lead - Matt Brazza
Solution
Over 8 months, I led the design system team to build a comprehensive design system, focusing on:
Foundational Components: We established 20 essential atomic and molecular components (buttons, fields, data tables) meticulously designed and documented for accessibility and consistency.
Scalability & Flexibility: Modular, adaptable components cater to diverse product needs and future evolution, enabling efficient development and easy iteration.
Documentation & Collaboration: Comprehensive documentation (guidelines, code snippets, usage examples) facilitate collaboration and ensure consistent implementation.
Roadmap for Iterations: We identified additional components and enhancements for future phases, ensuring continued system growth and adaptability.
Results:
Increased Efficiency: Readily available components significantly reduced design and development time, freeing teams for core product features.
Improved Consistency: A unified visual language across all products strengthens brand recognition and enhances user experience.
Enhanced Scalability: The modular design allows for seamless adaptation to new features and future growth, ensuring long-term sustainability.
Key Learnings:
Collaboration is Crucial: Working closely with engineering throughout the process was essential for creating a system that was both functional and maintainable.
Prioritization Matters: Focusing on high-impact components maximizes early wins and user impact.
Documentation is Key: Clear documentation facilitates collaboration and ensures consistent implementation.
Planning for the Future: A roadmap for ongoing iterations anticipates future needs and ensures continuous system evolution. This also allows better buy-in from product.
Allowing for Trade-offs: Recognizing that there is no perfect solution and making informed decisions to balance competing priorities.
Process
Mapping the Landscape
Audit & Inventory: Documented existing UI elements, identified inconsistencies, and analyzed user pain points.
Understanding the Ecosystem: Workshops with engineers explored technical challenges and constraints of existing components. This crucial step fostered a shared understanding of the problem space from both design and engineering perspectives.
Whiteboarding process from the Data Table Thunder-dome workshop
2. Laying the Foundation
Defining the Core: Established core design principles and atomic design pillars for consistent, adaptable components.
Prioritization & Roadmap: Analyzed user flows and component usage to identify high-impact elements for initial focus.
Jira roadmap for the upcoming components
3. Collaborative Design & Development
Paired Design & Dev: Adopted a paired design and development approach, where designers and engineers worked side-by-side. This fostered open communication and seamless integration of technical feasibility and design intent.
Artefact from a workshop about he system’s responsive capabilities
Iterative Design Stages: Rapid prototyping and component research followed by refinement and finalization ensured user-friendly and functionally sound components.
Comprehensive Documentation: Detailed documentation with visual elements, code snippets, usage guidelines, and accessibility considerations.
Example of the component documentation
4. Seamless Rollout & Beyond
Phased Implementation: Phased rollouts minimized disruption and allowed engineers to adapt gradually. This enabled us to gather feedback and refine the system based on real-world usage.
The implementation dashboard gives cross-functional teams a high level glance of the work being done
Continuous Improvement: Established a governance process for ongoing maintenance, updates, and component additions for future relevance and adaptability.
A flow chart to help others add to the design system