Company:
SquadStack is an innovative tech-driven platform revolutionizing sales and operations for large businesses. Leveraging a unique blend of technology and AI, SquadStack optimizes the entire call center flow: from hiring the ideal talent to streamlining processes and enhancing lead conversion.
My Role:
As a Product Designer at SquadStack, I spearheaded a comprehensive design system revamp to address the growing complexity of the platform and improve user experiences.
Project:
Recognizing the need for a scalable, consistent, and user-centric design foundation, I initiated a 6-month (ongoing) design system revamp. This initiative aims to establish a robust design system that streamlines workflows for both design and engineering teams.
SquadStack's rapid expansion and increasing product complexity brought several challenges to the forefront, impacting overall experience and development efficiency:
Visual Inconsistency:
Misalignment in the use of basic design elements, like color and component styles, resulted in a fragmented and potentially confusing user experience. This inconsistency also made it difficult to maintain a cohesive brand identity.
Scalability limitations:
The existing design system lacked clear structure and guidelines for component usage, making it challenging to adapt to the evolving needs of new features. This hindered both design and development workflows, slowing down the product development process.
Accessibility Concerns:
Inadequate attention to accessibility standards, including color contrast and text sizing, created obstacles for users with disabilities, limiting SquadStack's reach and inclusivity.
Design-Development Friction:
The lack of a well-defined design system led to friction during the handoff process. Developers faced ambiguity about component usage and design specifications, resulting in increased development time and potential inconsistencies between design intent and final implementation.
Establish Unwavering Consistency:
Create a streamlined and visually cohesive user experience across all product touchpoints, solidifying SquadStack's brand identity and enhancing ease of use.
Accelerate Development:
Provide a robust library of well-defined components and clear usage guidelines, empowering developers to build new features efficiently and accurately, thus shortening development cycles and time-to-market.
Champion Accessibility:
Prioritize inclusive design by adhering to WCAG 2.1 AA standards, ensuring SquadStack's platform is accessible to all users, regardless of ability.
Streamline Design-Development Collaboration:
Foster seamless communication and collaboration between designers and engineers by establishing a shared visual language and a structured workflow.
Recognizing the need for a more efficient and scalable design process, I initiated a comprehensive design system revamp, carefully mapping out a detailed project plan. Here's an overview of my approach and the progress to date:
1. Laying the Foundation:
I established a robust foundation with the creation of a comprehensive design token system (primitive, alias, semantic, component) covering color, typography, spacing, and more. This ensures consistency in future design iterations and streamlines decision-making.
2. Iterative Component Creation:
Building upon the design token foundation, I'm actively redesigning and developing a robust library of reusable and accessible components. Prioritizing major components first, I'm ensuring thorough documentation and continuous testing with designers for seamless usability.
3. Future Focus: Documentation & Workflows:
Once the core component library is established, my focus will shift to detailed documentation of tokens, components, usage guidelines, and best practices. I'll then work closely with the development team to optimize workflows, implement version control, and provide clear resources for integration.
While the design system revamp is still ongoing, the work completed to date has already yielded significant improvements and set the stage for a more efficient, consistent future for SquadStack's products:
Establishing Consistency Through Design Tokens:
After overcoming initial challenges through meticulous research and collaborative iterations with developers, we successfully established a comprehensive design token system. This system ensures a consistent visual language across the platform, streamlining design decisions and development efforts.
Design Tokens walkthrough:
Clarity and Purpose: Component & Theming Revamp:
Redesigning major components and defining clear theming rules has dramatically improved the user experience. The distinction between customer-facing areas and agent interfaces now promotes intuitive navigation and understanding. This focused use of color and components has enhanced the overall product cohesiveness.
Strengthening Design-Development Collaboration:
The process of revamping the design system has fostered stronger collaboration across the team. Engaging developers and arriving at a token system that was both robust and easy to implement required ongoing refinement and open communication, ultimately improving the design system and the working relationship between design and engineering.
The successful establishment of a comprehensive design token system and Component library will have a far-reaching impact on SquadStack's products. This foundational work empowers scalable design and reduces friction throughout the design-development handoff, ultimately improving user experiences. While the journey has not been without its challenges, the collaborative efforts have laid the groundwork for a more efficient, consistent, and user-centric future for SquadStack.
