Unifying Design at Groove — From Startup  to Scalable Practice

Established design rituals, standards, and processes that scaled Groove’s design team from startup mode to a high-performing, globally aligned practice.

Product Design  Leadership
Scaling Teams
Implementing Design Ops
[background image] image of an open laptop in an office (for an ai healthcare company)

In the high-energy world of Groove, a fast-paced Series D startup revolutionizing sales engagement and productivity, the absence of a formal design team and senior design leadership presented unique challenges. My journey at Groove was about transforming this landscape, focusing on best practices in design operations, establishing a first-ever design team, and setting a precedent for innovative design processes. While there were many hurdles to overcome, I recognized an amazing opportunity to help push a company with such compelling products forward.

Executive Summary

  • Overhaul of User Research Process: Introduced structured methodologies and tools, enhancing the quality of insights and fostering a user-centric culture.
  • Creation of Design System: Audited existing designs and established a system focusing on core components like buttons and fields. The second version capitalized on Figma's advancements for improved component structures and color palette​​.
  • Revamped Design to Engineering Handoff: Implemented Zeplin for a standardized and clear platform, enhancing translation of design into code and reducing errors. Conducted comprehensive training for engineers on using Zeplin​​.
  • Design QA Process: Introduced a rigorous review procedure in pre-production environments to ensure design fidelity, focusing on typography, color, layout, interaction patterns, and system feedback​​.
  • Iterative Design: Fostered collaboration among designers, product managers, and engineers. Mandated research-driven preparation, facilitated brainstorming sessions, and ensured critical evaluation and iterative prototyping​​.
  • Streamlined workflows: Created automations for seamless communication between design and engineering teams, reducing bottlenecks and enhancing productivity​​. Utilized AI tools for brainstorming, solution validation, and UI text generation, compensating for constrained market conditions and enhancing design efficiency​​
  • Impact and Results: Improved product development cycle and overall business performance; standardized design process; ensured high fidelity of designs; fostered effective collaboration, innovation, and high-quality outcomes​​.
  • Challenges and Learnings: Navigated challenges in educating the team and managing stakeholder opinions, particularly in the Groove+ mobile app project. Demonstrated the value of user validation and research in guiding design decisions​​.

Background

About Groove

At Groove, a leading sales engagement platform renowned for optimizing sales processes and boosting productivity, the challenge was clear: the company lacked a structured design team and senior design leadership. Groove, serving over 75,000 Salesforce users, stands out for its seamless Salesforce integration, real-time data synchronization, and a strong emphasis on data security and compliance, aligning with global privacy standards like GDPR and CCPA. Groove’s lineup consists of several enterprise-class products, including a Chrome extension, dialer, mobile application, and desktop web application that provides multiple capabilities including analytics and conversational intelligence. The platform's distinct features, such as advanced campaign automation and comprehensive sales conversation insights, aim to significantly increase rep productivity and quota attainment. My role at Groove began with a vision to transform this environment by establishing the first-ever design team, embedding best practices in design operations, and setting new benchmarks for innovative design processes in a rapidly evolving sales engagement landscape.

A chart showing Groove products
Groove's products and features

Team building at Groove

Initial Assessment and Strategy

Upon joining Groove, I conducted a thorough analysis of the team’s structure, skill sets, and workflows. This involved closely observing the interactions among four product managers, numerous engineers, and the existing product designer across multiple product squad meetings and standups. The lack of structured design operations became apparent, marked by disorganized design management and informal handoff processes which hindered efficient product development and team cohesion. Tackling these foundational issues was the first step in setting a new direction for the design team.

Overcoming Challenges

Within the first few weeks, I noticed many challenges with the sole product designer in relation to understanding and completing necessary design work. I devised a performance improvement plan for them using multiple 1:1 conversations to provide mentorship as well as setting specific goals and targets for completion. I also worked to educate them on improving their design workflows to better adapt to the needs of the product team. However, the fast-paced environment of a startup like Groove demanded agility and rapid learning, which was unfortunately not achieved by the product designer. This necessitated swift and decisive action, and so I chose to strategically realign the team, which involved parting ways with the product designer who was not meeting the evolving requirements of the role.

Although this led to becoming the sole design team member for a short time, I continued my focus on building a team and implementing design processes while also acting as the sole product designer to meet the needs of the business objectives and product roadmap.

Recruitment and Team Dynamics

Moving forward, the recruitment process was meticulous, focusing on attributes like collaborative spirit, storytelling ability and keen attention to detail in addition to a thorough understanding of user experience design methods, including research, ideation, design and testing. While the People team worked to find solid candidates, I also used my own network, ultimately recruiting a talented designer who worked for me in a prior role.

As the team began to expand over the next seven months, I implemented a design structure that I had worked to evolve in previous team leadership roles, based on the concept of ‘Total Football’. This innovative approach, synonymous with versatility and fluidity in the soccer field,  revolutionized the traditional team dynamics, emphasizing flexibility and adaptability in design roles and responsibilities.

Just as Total Football players are adept at assuming multiple positions on the field, design team members at Groove were encouraged to develop a broad skill set, enabling them to seamlessly transition between different aspects of the design process as well as different products and features. This structure fostered a dynamic and collaborative environment where creativity and innovation thrived while breaking traditional silos. Team members were not confined to rigid roles but were empowered to contribute across various domains, from user research to UI design, ensuring a comprehensive understanding of the product suite.

This fluid team organization not only enhanced the agility of the design process but also cultivated a deeper sense of ownership and collective responsibility for the final product. For example, during hectic periods with multiple deadlines or unexpected absences due to illness, different team members stepped in, already with a knowledge and understanding of both the challenge area and work done to date, to ultimately complete the goal.

A chart showing the structure of Groove's design team
The structure of Groove's design team

Implementing design processes

Structured User Research Process

In my tenure at Groove, I undertook a significant overhaul of the user research process, recognizing the need for a more structured and rigorous approach. This revamp involved the integration of a suite of structured methodologies and advanced tools designed to conduct unbiased and comprehensive research. Key elements included the development of detailed research plans and interview guides, ensuring a systematic and standardized approach to gathering user insights. This involved adopting a variety of research methods, including heuristic analysis, cognitive walkthroughs, competitive analysis, each carefully chosen to align with specific project objectives.

A pivotal aspect of this new approach was the incorporation of remote and structured user interviews, allowing us to tap into a diverse range of user experiences and perspectives. To manage and analyze the data effectively, we utilized Airtable for data organization, which was then imported into Mural for in-depth analysis using techniques like affinity mapping, user flow mapping, and customer journey creation.

This revamped process was intricately woven into the existing product development cycle. By integrating user research into every stage of product development, from ideation to final implementation, we ensured that user insights directly informed design decisions. This alignment not only enhanced the relevance and quality of our product features but also fostered a more user-centric culture within the team.

After implementing these processes, we observed a marked improvement in the depth and accuracy of the insights gathered, which in turn led to more informed and effective design solutions. By embedding this structured user research process into our workflow, we set a new standard for product development at Groove, one that prioritized a deep understanding of user needs and behaviors.

Creation of the Design System

Next, I began to focus on building a design system starting with an initial review of the entire product suite. This comprehensive audit of Groove's existing design work marked the genesis of the first design system, a foundational step in standardizing and streamlining our design process. This initial system concentrated on the standardization of core components such as buttons and fields, which are crucial in creating a consistent and intuitive user interface. By establishing guidelines for these fundamental elements, we achieved a uniform look and feel across our product suite, significantly enhancing user experience and design cohesion as we expanded the system further.

A year into the implementation of our inaugural design system, we began developing its second version, aiming to capitalize on the latest advancements in Figma. This update was not merely an iteration but a strategic enhancement to align with evolving design needs and future technology integrations. We focused on refining the structure of components, making them more modular and versatile. This allowed for greater flexibility and efficiency in the design process, as designers could now assemble complex interfaces more rapidly using these improved building blocks.

Moreover, the color palette underwent a significant transformation. We moved away from a traditional linear color scale to a more sophisticated logarithmic scale. This nuanced approach to color grading enabled us to create a palette that was both aesthetically pleasing and functionally versatile, allowing for better visual hierarchy and emphasis within the user interface. The new color scheme was meticulously crafted to ensure accessibility and visual clarity, catering to a diverse range of users.

The culmination of these enhancements in our second design system version was a testament to our commitment to continuous improvement and innovation. By harnessing the power of Figma's latest features and rethinking our approach to component structure and color usage, we laid a robust foundation for future technology integrations. This forward-thinking strategy ensured that our design system remained agile and adaptable, ready to embrace new trends and technologies in the evolving landscape of product design.

Design to Engineering Handoff

The introduction of Zeplin at Groove marked a pivotal shift in our design to engineering handoff process. Prior to this, the handoff had been characterized by informal and ad-hoc methods, often leading to misinterpretations and errors in design implementation. The adoption of Zeplin, a tool specifically designed to bridge the gap between designers and engineers, was a strategic move to standardize and simplify this crucial phase of product development.

Zeplin provided a shared, clear, and concise platform where design specifications and assets could be accurately and easily accessed by the engineering team. This tool allowed for the exportation of design elements from Figma into a format that was readily interpretable by engineers, complete with precise measurements, color codes, and assets. It facilitated a more efficient and error-free translation of design into code, ensuring that the final product closely aligned with the intended design.

A view of Zeplin.
Numerous projects are handed off via Zeplin

However, integrating Zeplin into our workflow was not without its challenges. The engineering team at Groove had been accustomed to more informal handoff processes, typically involving screenshots of designs in Jira tickets or direct access to Figma links. Transitioning to Zeplin required a significant shift in their approach. To address this, I initiated a comprehensive education program. This program included detailed training sessions on how to use Zeplin effectively, alongside demonstrations of the tool’s benefits in reducing ambiguities and errors commonly encountered in the handoff process.

In addition to training, I also established clear guidelines and documentation on how to use Zeplin within our specific workflow at Groove. This resource served as a reference point for engineers, ensuring consistency and understanding across the team.

The introduction of Zeplin as part of our design handoff process led to a significant reduction in design implementation errors, as the platform ensured that engineers had access to the most accurate and up-to-date design specifications. This efficiency not only streamlined the handoff process but also fostered a stronger collaboration between the design and engineering teams, as both groups now had a common language and platform for discussing and executing design elements.

Design QA

Recognizing the critical importance of design fidelity in the product development lifecycle, I spearheaded the implementation of a new process that served as an additional 'gate.' This process was meticulously designed to ensure that the final output by engineers closely mirrored the intended design, addressing a gap often overlooked in traditional development workflows.

The concept was akin to a traditional Quality Assurance (QA) process, but with a specific focus on design elements. We established a systematic review procedure, where the design team carefully evaluated the applications in pre-production environments. This review was not just a cursory glance; it involved an in-depth analysis of various design aspects to ensure absolute fidelity to the original designs.

Key areas of focus in this process included:

  1. Typography and Color: The team carefully checked for consistency in font styles, sizes, weights, and colors. Given the nuanced nature of these elements, even slight deviations could significantly impact the user experience and brand perception.
  2. Layout and Spacing: Ensuring that the layout and spacing in the application matched the designs was crucial. This involved verifying alignments, margins, paddings, and the overall spatial distribution to ensure visual harmony and usability.
  3. Patterns of Interaction: Beyond static elements, we also reviewed interactive components. This included button behaviors, transition effects, and other dynamic elements, ensuring they functioned as envisioned in the design phase.
  4. System Feedback: We paid close attention to how the system communicated with users. This encompassed everything from error messages to confirmation dialogs, ensuring they were presented in a clear, helpful, and user-friendly manner.

To facilitate this process, we developed a checklist and guidelines that detailed the key design aspects to be reviewed. This ensured a consistent approach across all projects and allowed for efficient tracking of review outcomes. Regular meetings were held post-review to discuss findings with the engineering team, fostering a collaborative environment for addressing any discrepancies.

Implementing the 'design QA' process brought about significant changes. It led to a dramatic reduction in discrepancies between the developed application and the original design, enhancing the overall quality and user experience of our products. This process not only ensured design integrity but also served as a platform for continuous learning and improvement, as both designers and engineers gained deeper insights into each other's work and challenges.

Streamlining workflows

Iterative Design Workflow

In my role at Groove, I initiated and led a transformative ideation process that fostered a collaborative environment among designers, product managers, and engineers. My aim was to blend technical expertise with creative problem-solving, all underpinned by solid, research-driven insights.

I first focused on harnessing the unique strengths and perspectives of different team members. I encouraged designers to bring their creative solutions and user-centric design principles to the forefront, ensuring our ideas were not only innovative but also practical and resonant with user needs. Product managers were integral to this process; they were actively involved to align our brainstorming efforts with business objectives and user insights, bridging the gap between creative ideation and practical application. Engineers, with their technical expertise, were also brought into the early stages of discussion. I valued their input in assessing the feasibility of ideas, ensuring that our creative solutions were grounded in technical reality. This collaborative approach aimed to create a synergistic environment where creativity, practicality, and technical feasibility coalesced to foster innovative product development.

The iterative workflow I implemented included four key functions:

  1. Research-Driven Preparation: I mandated thorough research as a precursor to our ideation sessions. This research encompassed user insights, market trends, and emerging technologies, laying a solid foundation for informed brainstorming.
  2. Facilitating Brainstorming Sessions: I led sessions employing various creative techniques like design thinking workshops and mind mapping. My focus was on fostering an environment where every team member felt empowered to contribute freely and creatively.
  3. Critical Evaluation: Post-brainstorming, I steered the team to critically evaluate each idea against crucial criteria like user value, technical feasibility, and business alignment. This phase was marked by rich discussions, with each discipline providing their unique perspectives.
  4. Iterative Prototyping: I championed the development of basic prototypes for promising ideas, using them to solicit early feedback from stakeholders, including users. This iterative approach allowed us to refine our concepts based on tangible feedback.

This ideation process yielded a diverse array of innovative features and solutions that balanced creativity with practicality and user-centricity. The collaborative approach not only enhanced the innovation culture within Groove but also ensured our products consistently met high standards of quality and user satisfaction that resonated with both our business objectives and our users' needs.

Jira automation for design team board
Jira automation for design team board

Process Automation

Recognizing communication gaps between the design and engineering teams at Groove, which often resulted in design inadvertently blocking engineering progress, I set up two critical automations in Jira, our project management tool. The first automation was strategically designed to create a seamless connection between engineering and design right from the start of a project. Whenever an engineering ticket was generated that was identified with a design component, this automation simultaneously created a corresponding design ticket, automatically transferring essential details such as the product epic and specific details. This link ensured that the design team was immediately aware of and aligned with the engineering requirements, including the core initiative for each quarter, thereby maintaining consistency with our broader strategic goals.

The second automation I introduced was focused on enhancing the workflow efficiency for upcoming sprints. It was triggered when an engineering ticket, already linked to a design ticket, was moved into the prioritized backlog for the next sprint. This triggered a notification to the design team, alerting them that the feature area or improvement associated with the ticket was about to commence development. This advance notification system was instrumental in keeping the design team informed and prepared, enabling them to prioritize and finalize any pending design tasks related to the ticket in a timely manner.

By ensuring automatic creation of linked design tickets, we established a continuous and seamless information flow between the engineering and design teams from the onset of a project. The proactive notification system for prioritized backlog items kept the design team well-prepared and in sync with the engineering team’s schedule. These measures effectively reduced bottlenecks and fostered a culture of proactive communication and collaboration, resulting in a smoother, more streamlined product development process that resonated with Groove's commitment to innovation and operational efficiency.

Incorporating Generative AI

During my first year at Groove, facing the challenges imposed by shifting market conditions, I adopted the use of generative AI technologies to optimize our design processes. This was not merely embracing emerging technologies but a functional need driven by the hiring plan being dramatically reduced by the senior leadership team.

This strategic move involved leveraging advanced AI-centric tools such as ChatGPT (and its API), Voiceflow, and Zapier's beta ChatGPT integration and integrations, which played a pivotal role in enhancing our team's efficiency and creativity.

I initiated the use of ChatGPT for AI-assisted brainstorming sessions. This approach involved feeding the AI tool with specific problem statements or design challenges, and then analyzing the generated ideas for their novelty and applicability. This method provided us with a diverse array of creative solutions, often sparking further innovation and discussion among the team.

In addition to idea generation, I employed these AI tools for solution validation. This process entailed running proposed design solutions through the AI to assess their effectiveness and feasibility. By simulating various user scenarios and analyzing the AI’s feedback, we were able to refine our designs and ensure they met the required standards before moving into the development phase. With the introduction of ChatGPT 4, we began to further experiment with evaluating completed designs through AI-driven heuristic evaluations.

Another significant aspect of this AI integration in our process was its role in generating user interface text. Using Voiceflow and the GPT 3.5 Turbo API, I specifically focused on aligning this text generation with Salesforce’s voice and tone guidelines, considering our platform’s close integration with Salesforce. This alignment was crucial in maintaining consistency in our user interfaces, ensuring that the generated text was not only contextually relevant but also resonated with our target audience’s expectations.

The integration of generative AI into our workflow brought about a significant enhancement in our design output. It allowed us to rapidly iterate and validate ideas, streamline our creative process, and maintain a high standard of textual content in our UI designs. This adoption of AI not only compensated for the constraints imposed by market conditions but also positioned Groove at the forefront of design innovation, leveraging cutting-edge technology to drive efficiency and enhance the overall quality of our product suite.

Impact and results

In my leadership role at Groove, I initiated key transformations in design team structure and design operations that significantly enhanced our product development cycle and overall business performance. By implementing a structured user research process, I ensured our design decisions were informed by accurate and comprehensive user insights, leading to more relevant and high-quality product features. This approach nurtured a user-centric culture within our team, directly contributing to the improvement of our products.

The development of our design system under my guidance standardized the design process, with the initial system focusing on core components for a consistent user interface. The second version, leveraging Figma's advancements, further refined our component structures and color palette, ensuring the system's adaptability for future technological integration. This not only streamlined our design workflow but also enhanced the aesthetic and functional coherence of our product suite.

Introducing Zeplin to streamline the design-to-engineering handoff process was a strategic decision that significantly reduced design implementation errors. This improved the accuracy and efficiency of translating design into code, directly impacting the quality of the final product.

The design QA process I implemented ensured a high fidelity of designs in the product development lifecycle, leading to products that closely matched the original vision and design intent. The iterative design workflow I established fostered effective collaboration among designers, product managers, and engineers, enhancing innovation and ensuring high-quality outcomes.

Automations implemented in Jira bridged communication gaps between design and engineering, effectively reducing workflow bottlenecks and enhancing overall productivity. This led to a more streamlined product development process and timely delivery of features.

Finally, embracing generative AI tools under constrained market conditions not only enhanced our team's efficiency but also positioned Groove at the forefront of design innovation. This strategic integration significantly contributed to the evolution of our product offerings, ensuring they remained competitive and aligned with user needs.

Overall, my leadership and strategic initiatives at Groove resulted in a transformative impact on our design operations that were not only viewed favorably by the senior leadership team but led to improved product quality that positively influenced the business as a whole.

Challenges and learnings

Educating the team on best practices in design and research at Groove was a substantial and intricate task. While there was rarely disagreement with any processes I implemented, there were often setbacks when product managers or engineers fell back to older methods that they were habituated to when faced with high stress deadlines.

One particularly challenging instance occurred during the development of our inaugural Groove+ mobile app. In this project, I faced diverging opinions from stakeholders and product management about key features and user interface elements. This situation demanded not only diplomacy and strategic management but also a firm commitment to user-centered design principles.

To navigate through these differing stakeholder opinions, I initiated a series of additional user validation studies. These studies were meticulously designed to objectively assess user preferences and expectations regarding the disputed features. I organized user interviews and usability testing sessions, gathering direct feedback from potential users of the Groove+ mobile app. This process was crucial in providing empirical data to support design decisions, moving the discussion from subjective opinions to user-driven insights.

Furthermore, I facilitated several workshops with stakeholders to review and discuss the findings from these user studies. During these sessions, I emphasized the importance of aligning the product with user needs and expectations. I presented the research data in a clear and compelling manner, highlighting how specific user preferences and behaviors should influence our design choices.

This approach of combining additional user validation with strategic stakeholder management proved effective. It helped in reconciling the differing opinions and realigning the project focus towards a user-centric approach. As a result, we were able to make informed decisions that enhanced the usability and appeal of the Groove+ mobile app, ensuring it resonated well with our target audience.

The process also served as an educational experience for the team, demonstrating the value of thorough research and user validation in guiding design decisions. It reinforced the importance of grounding our design process in solid user research, thereby improving our overall approach to product development at Groove. This experience not only strengthened the final product but also fostered a deeper understanding and appreciation of user-centered design principles among the stakeholders.

Closing Thoughts

The first year or so at Groove ranks as one of the most challenging and exciting of my design leadership career. The constant design challenges, shifting deadlines, and occasional frantic pace always kept me thinking strategically and further refined my ability to telescope in and out of problem areas. This allowed me to focus on details while always keeping the "big picture" in mind, always pushing forward to achieve my goals. This experience not only propelled Groove's product development forward but also set a benchmark for my future design leadership endeavors. Drawing on my transformative experience at Groove, I look forward to continuing my journey in design leadership, applying the lessons learned and strategies developed to drive innovation and excellence in future roles.