Designing Sidebar at ServiceNow: A product for seamless agent collaboration

 

TL;DR:

I led the design and delivery of Sidebar, a new product at ServiceNow aimed at increasing agent productivity and improving customer satisfaction. In nine months, we delivered a net-new product while successfully navigating 2 significant pivots, delivering all design specifications on time, and fostering cross-functional collaboration. I also spearheaded efforts to define a 3-5 year vision for Sidebar to ensure strategic growth.

Agent collaboration chat tool: Sidebar

Background & challenge

When I joined ServiceNow, I took ownership of Sidebar, a product designed to help agents collaborate more efficiently across multiple customer requests. The initial design supported only single conversations, but we were quickly tasked with pivoting to allow numerous simultaneous discussions.

The goal was clear: improve agent productivity by enabling agents to manage multiple cases simultaneously while reducing anxiety and increasing efficiency. Tight deadlines and limited user research compounded the challenge, requiring us to iterate quickly and get creative with available resources.


Key challenges

  1. Inheriting an existing design: I had to adapt quickly to the product's initial concepts while addressing new requirements and ensuring continuity.

  2. Tight deadlines: With a compressed timeline, I led the team in implementing weekly design sprints to keep the project on track. We went from being at risk of missing deadlines to delivering the specifications on time without sacrificing quality.

  3. Limited user research: Due to restricted customer access, I used guerrilla testing with internal agents to gather insights and validate designs quickly.


Tackling a pivot: From one to many conversations

I gathered the design team for a collaborative brainstorming session using Zoom and Miro to address the new design requirements. The first step was to identify the core problems agents were facing:

  • Problem 1: "I need help from a teammate but can't ask questions easily, which makes me anxious."

  • Problem 2: "I can only discuss one case at a time, and switching between them is inefficient."

We used a Crazy 8’s exercise to generate design ideas quickly and a dot-voting session to narrow down concepts. After testing and iterating on the concepts, we finalized a solution allowing collapsible discussion windows.

This solution helped agents manage multiple cases, reducing response times and improving agent productivity and customer satisfaction.

The solution: collapsible discussion windows

Impact

I led the design team through a critical pivot, enabling agents to manage multiple conversations simultaneously. By fostering a collaborative brainstorming environment and utilizing rapid prototyping, we quickly iterated on the design to meet user needs.


Lesson Learned

I learned to adapt quickly to shifting project requirements while focusing on the user’s core pain points. Collaboration and flexibility were key to turning this challenge into a successful outcome.


On-time delivery with design sprints

With just two months to finalize the design, I implemented weekly design sprints to manage the project’s tight timeline. Each Monday, the team reviewed progress and set clear objectives for the week. Using Figma to track progress, we ensured alignment and avoided costly delays.

Despite the fast-paced environment, our detailed specs provided the development team with clear guidance on all conversational interactions and features, preventing rework and ensuring a smooth product launch.

Sample of design spec

Impact

I implemented weekly design sprints to ensure the project stayed on track, delivering comprehensive specifications within two months. This approach helped avoid delays and ensured a smooth handoff to development.


Lesson learned

I learned the importance of structured planning and how setting clear milestones can drive efficiency and alignment across teams, especially under tight deadlines.


The second pivot: addressing UI clutter

Once development began, we encountered another challenge: discussion windows covered essential page elements like pagination controls. We couldn’t move the covered elements, so we developed a solution allowing users to hide the discussion windows when unnecessary.

Working closely with development and conducting guerrilla usability testing, we implemented this solution quickly and made it ready for the MVP release.

Impact

I addressed unexpected UI issues by working closely with the development team to create a solution that allowed users to hide discussion windows, improving usability without compromising functionality.


Lesson learned

Flexibility and quick iteration are crucial when dealing with unforeseen challenges. Close collaboration with dev teams and user testing allowed us to refine the solution and deliver an effective outcome quickly.


Building collaborative relationships

Throughout the process, I adhered to three guiding principles that ensured our team’s success:

  1. Transparency: I shared progress regularly and kept everyone updated on key decisions, ensuring alignment.

  2. Inclusion: I made sure all team members, including PMs, developers, and stakeholders, had a voice in shaping the product.

  3. Receptivity: I welcomed feedback and continuously checked that the designs made sense to both the team and end users.

This collaborative approach helped build a positive, transparent environment, which was recognized by leadership, and we were invited to showcase our process at the annual design summit.

Impact

By prioritizing transparency, inclusion, and receptivity, I helped create a collaborative environment where all team members felt heard, contributing to the smooth delivery of the product.


Lesson learned

I realized that fostering a culture of open communication and inclusivity not only strengthens team cohesion but also leads to better product outcomes, especially when working with cross-functional teams.


Looking ahead: defining Sidebar's 3-5 year vision

Recognizing the need for a long-term strategic vision, I led the initiative to define Sidebar’s 3-5 year roadmap through a series of workshops with design, PM, and engineering teams. These workshops helped us:

  1. Align on the initial product strategy.

  2. Brainstorm and identify potential value propositions.

  3. Develop and validate themes for future product iterations.

By the end of the workshops, we had a clearer vision for Sidebar’s future and a foundation for continued growth.

Impact

I initiated and led a series of workshops to define a strategic vision for Sidebar, aligning the product’s long-term development with business goals and user needs.


Lesson learned

I learned that having a clear long-term vision is essential for guiding product development. It helps teams make strategic decisions that align with both user needs and business objectives, ensuring sustainable growth.


Key takeaway: my impact & key learnings

By leading the design and delivery of Sidebar, I played a pivotal role in ensuring that the product met both business goals and user needs. My impact included:

  • Driving product delivery: I successfully navigated two major pivots and ensured all design specifications were delivered on time. This helped keep the project on track and contributed to its success.

  • Fostering cross-functional collaboration: By creating a transparent, inclusive, and receptive environment, I helped bridge gaps between design, product management, and engineering, ensuring alignment and smooth execution.

  • Championing long-term vision: I took the initiative to define a 3-5 year vision for Sidebar, ensuring the product’s evolution aligned with long-term business goals and user needs.

Through this experience, I learned how to lead a product design initiative under tight deadlines while balancing the need for speed and the importance of collaboration. I also saw firsthand how creating a shared strategic vision and maintaining alignment across teams is critical to delivering long-term value.