Design System
Scaling with style: building a robust design system for a SaaS product
Project overview
Context: Tryon is a product-driven company that integrates artificial intelligence and augmented reality to transform online shopping, notably through its early adoption of virtual fitting experiences accessible on mobile devices. Tryon's product portfolio includes customer-facing mobile applications with AR-powered virtual fitting feature, a comprehensive SaaS dashboard called Store for business management, as well as corporate and intranet websites that support internal and marketing needs. In this innovative environment, I led the creation of the Sparkle Design System, which was adopted across all Tryon products to address challenges related to development efficiency, feature engineering, timelines, and visual consistency.
The problem: While designing and developing the client-facing B2B SaaS dashboard, we encountered significant challenges in maintaining consistency, scalability, and efficiency across Tryon’s diverse product offerings. The lack of a standardized design approach resulted in fragmented user experiences and prolonged development cycles for our web applications. This inconsistency not only compromised the cohesiveness of our brand but also impeded our ability to rapidly innovate and introduce new features. Recognizing these critical issues, I identified the urgent need for a comprehensive design system. Implementing this system would establish a unified design language and streamline our product development process, ensuring a cohesive and efficient workflow across all platforms.
The goal: The primary objective was to ensure a scalable and consistent user experience across all Tryon’s applications, thereby enhancing efficiency and minimizing errors. Through the implementation of the Sparkle Design System, I aimed to strengthen Tryon’s brand perception and build customer trust with a seamless and user-friendly interface.
My role: As Tryon's principal product designer, I not only designed but also strategically guided the entire product design process, from initial concept to final implementation. This holistic approach was essential for maintaining design and brand consistency across all platforms, crucial in a high-tech industry. Additionally, I spearheaded the design quality assurance efforts and conducted post-launch research to continuously refine our offerings, ensuring they met both user needs and business objectives.
Responsibilities: Research, wireframing, prototyping, visual design, usability testing, design quality assurance, post-launch research.
Duration: The project spanned 12 months. During this time, I led the project through its crucial phases: initial research and planning, where I defined the system's scope and strategy; the design and development phase, where I created the essential components and guidelines; and finally, the implementation and rollout phase, where the design system was integrated across Tryon's diverse product suite. Each phase was methodically executed to ensure a seamless transition and robust system adoption.
The team: The team structured around the Sparkle Design System project included five key members: myself as the Product Designer, a Software Engineer, a Product Manager, a QA Specialist, and the CTO.
Principles of the Sparkle Design System
When developing the Sparkle Design System, I established a set of core principles to guide its evolution and ensure it effectively addressed the needs of our products and users:
User-Centric Design: At the heart of Sparkle is a commitment to understanding and addressing user needs. Regular user testing and feedback loops are integral, driving the system's iterative updates and ensuring that designs remain focused on enhancing the user experience.
Reusability: Sparkle's components and guidelines are crafted for high reusability across different parts of our products. This not only accelerates development times but also reduces redundancy, ensuring that teams can focus more on innovation rather than re-creation.
Consistency: Consistency is a cornerstone of the Sparkle Design System. It ensures that all products maintain a coherent look and feel, which is vital for brand identity and user familiarity. This uniformity extends to colors, typography, spacing, and interactive elements across all platforms.
Scalability: As Tryon grows, so must our design system. Sparkle is designed with scalability in mind, accommodating future expansion with ease. Components and patterns are created to be flexible, allowing for easy adaptation as new features and product needs develop.
Accessibility: Ensuring accessibility is a fundamental aspect of Sparkle. The system adheres to global standards, such as the Web Content Accessibility Guidelines (WCAG), making our products usable for all customers, including those with disabilities.
Performance Optimization: Design decisions within Sparkle consider their impact on application performance. Efficient design not only improves load times but also enhances the overall user experience across various devices and networks.
Visual Hierarchy: Sparkle prioritizes clarity and ease of navigation through its visual design. Logical and intuitive content hierarchy ensures that information is presented clearly and users can navigate products effortlessly.
Comprehensive Documentation: To maintain the integrity and utility of the design system, comprehensive documentation is crucial. This includes detailed guidelines on component usage, best practices, design rationale, and implementation instructions to ensure consistent application across teams.
Innovation and Experimentation: While consistency is critical, Sparkle also provides opportunities for innovation and experimentation. This approach keeps the product fresh and engaging, encouraging creative solutions while adhering to a standardized framework.
These principles have not only shaped the development of Sparkle but have also laid the foundation for a dynamic, user-focused design culture at Tryon.
Approaching the design system
The creation of the Sparkle Design System started with establishing the basics—typography, colors, iconography, sizing, spacing, grid system and layouts. From there, I built the system from the ground up: starting with the smallest elements ('atoms'), combining them into functional groups ('molecules'), and then integrating these into larger, more complex components ('organisms'). This methodical approach ensured a robust, adaptable system that could grow with the company's evolving needs.
Showcasing the design system (samples)
To illustrate the effectiveness and versatility of the Sparkle Design System, let's look at some practical applications within Tryon's products.
Store Dashboard: This asset management platform for brands and retailers showcases Sparkle's capabilities in a complex environment. The dashboard includes sections for inventory, content moderation, organization settings, team management, subscriptions and billing, analytics, documentation, and a help center.
Store onboarding includes steps for creating an organization and then prompting users to publish their first experience listing.
The Inventory page is primarily used to manage experience listings and monitor their status. Its collaborative features enable multiple users to access and edit the same listings.
The Settings page allows users to add or edit the main organization settings and manage team members.
Corporate Websites and Intranets: Even in more static environments like corporate websites, Sparkle maintains brand consistency while allowing for flexibility in content presentation and layout.
These examples demonstrate how Sparkle integrates into various aspects of Tryon's product ecosystem, maintaining coherence and enhancing usability across the board.
Metrics and impact
The introduction of the Sparkle Design System has had a measurable impact on Tryon's operations and product quality:
Adoption Rate: Within six months of launch, 95% of our teams had integrated the design system, reflecting its effectiveness and ease of use.
Consistency: Audits revealed that 90% of UI elements across products adhere strictly to Sparkle's guidelines, significantly enhancing brand consistency.
Development Speed: The time required to move from design to production has decreased by 40%, illustrating the system's role in streamlining workflows.
Design and Development Collaboration: 85% of team members reported improved collaboration between designers and developers, fostering more efficient project completions.
Error Rate: The frequency of bugs or UI inconsistencies has been reduced by 50%, showcasing Sparkle's contribution to product stability.
User Satisfaction: Post-launch surveys indicated a 30% increase in user satisfaction, attributed to more coherent and user-friendly interfaces.
Cost Savings: Design phase costs were reduced by 55%, thanks to fewer revisions and a decrease in resources needed to address inconsistencies.
Scalability: All new projects incorporate Sparkle from their inception, proving its adaptability and effectiveness in scaling with Tryon’s growth.
These metrics not only highlight the benefits of implementing a design system like Sparkle but also underscore its critical role in enhancing the overall efficiency and quality of Tryon's digital product environment.
Takeaways
Implementing the Sparkle Design System at Tryon has been transformative, reshaping not just our products but our organizational culture as well. This experience underlined the importance of standardization and the benefits of a systematic, user-centered design approach. The adoption of Sparkle has streamlined our processes, improved consistency, fostered collaboration, and significantly boosted efficiency and product quality. It highlights how a robust design system can empower teams to innovate confidently while maintaining consistency and quality.
Next steps
Moving forward, the Sparkle Design System will continue to guide our evolving product strategy, ensuring scalability and flexibility in our design processes. As we expand our offerings, Sparkle's principles will remain integral, helping us uphold our commitment to quality and innovation. This case study not only documents my contributions but also serves as a motivating example for other organizations to embrace design systems, setting a foundation for ongoing innovation and excellence.
Next case study: