Cisco’s QBR

As a UX/UI designer at Cisco, I led the design of the QBR (Quarterly Business Report) web app with a strong focus on empathetic research. I broke down complex user data, into user stories and prototypes. Working closely with project managers and developers, I made sure the design felt intuitive and user-friendly throughout the app, resulting in a smooth and optimized experience for delivery engineers.

Cisco’s QBR web application

The Cisco QBR is designed to gather customer data from different sources and the company’s network. It uses advanced algorithms to identify potential issues before they escalate into problems. With features that enable you to assign customer activities and project plans, the QBR helps customers achieve their desired outcomes. It has been optimized to make it easier for delivery managers and engineers provide detailed and comprehensive quarterly reports to their clients.

Cisco’s QBR  Case Study

Resources

A ten-member team a UX designer, multiple project managers, developers, and delivery engineers.

Duration

Two years. Development continues.

Engagement Type

B2B web application.

The Problem

The main issue with the QBR process is that it is inefficient, with customer executives only being able to engage for the initial 30 minutes due to time constraints. Additionally, the manual importation of activities and deliverables is tedious, requiring data collection from various sources.

“Some people use Jira, Excel, HublSoft, TowerPoint, Word. Which system do we use for the data?”

The Challenge

The challenge is to improve the QBR data’s focus on providing customer value, even though the business value varies among clients. Currently, there is a need to address the limitations of expensive software solutions, which provides limited year-over-year trending data, while simplifying the manual process of importing activities and deliverables that are often from multiple tools and platforms.

We want something that we can share with the customers.

The Solution

Research told us that users want a product that is: 

  • Easier to use
  • Is more accurate
  • Is customizable
  • More automated
  • Adds more customer value
  • Promotes better customer engagement

Opportunities

  • Users find this approach more interactive and dashboard-like than static reports offering greater customer engagement.
  • This will align customer priorities making what Cisco delivers more valuable to the customer.
  • Customers will feel more comfortable renewing contracts due to the increased value this system provides.

The Mothodology

UX Research

Phase 1: Empathize

• User research
• User interviews
• User observations
• Explore user needs

Phase 2: Define

• User persona
• Define user pain points
• Define user gaines
• Affinity diagram
• Empathy map

UI Design

Phase 3: Ideate

• User story
• User flow
• Potential solutions
• Feature prioritization
• Define MVP
• Wireframes
• Test wireframes

 

UI Design

Phase 4: Prototype

• Design screens
• Design single page layouts
• Work with design systems
• Work with existing components
• Build custom components
• Work with style guides
• Incorporate branding
• Build prototypes

UI Design

Phase 5: Testing

• Test prototype
• User testing
• Prioritize feedback
• Reiterations

Phase 1: Empathize with the user

Conducting user research

  1. A research plan was created for the team to follow when testing.
  2. Interviews were conducted with participants to define what users want, do, and think.

Below are the results of the user interviews and visual samples of what the users liked. 

QBR Objectives

Who is the end-user?

Project managers and delivery engineers engaging with customers.

Why will the user use the app?

Because it will be an automated system that is simpler and more accurate.

What will be the user’s end goal?

Bring Cisco’s clients more value while maintaining their network and components.

When will the user use the app?

The app will be used when engineers are building QBR reports or presenting QBRs to their clients.

Where will the user use the app?

The app will be used in office and on site.

How will the user accomplish their goal?

By focusing on outcomes and automating parts of the QBR process, improving efficiency while maintaining client networks.

Some of what we learned

What they do
  1. It takes over a week to get data, make, and finalize decks.
  2. Manually collect data from across several platforms.
  3. They conduct presentations with slide decks.
  4. Some people use Jira, Excel, HublSoft, TowerPoint, Word.
What they say
  1. They’re challenged with inconsistencies.
  2. They want more customization.
  3. It would be good to have dashboard that can also be edited.
  4. Customers would like to see data everyday.
What they think
  1. We need better interactions with customers.
  2. Only show if we are 100% confident about it.
  3. We need to align on customer priorities.
  4. Is what we deliver relevant to our customers?
  5. Cost savings is risky to talk about with customer.

Phase 2: Define the problem

How we defined the problems

  1. The initial UX research provided insights into user needs, pain points, and behaviors. It helped identify what users value most, how they interact with a product, and what features should be focused on.
  2. Using affinity diagrams and empathy maps, we learned users’ likes, dislikes, frustrations, pain points, and wants.

Below are the affinity diagrams used to synthesize the information received from the interviews.

Pains

  1. Everyone’s data does not exist in one space.
  2. Data collection is tedious, it’s not focused on delivering value.
  3. Importing activity and deliverable data is manual.
  4. What value is delivered to support customer renewal.
  5. Larger customers require more customization.

Gains

  1. We could track business value better.
  2. Walk through specific data easier.
  3. Align to customer priorities.
  4. Make data more relevant.
  5. Build a standard solution to meet the majority of needs.

User-Persona

Based on our research, we developed personas to pair with user stories, helping us pinpoint the issues, wants, and needs of our users.

Meet Keep-His-Cool Kumar
Network Engineer Specialist

Kumar is a Network Engineer and Security Specialist at a Cisco-certified reseller. He performs many activities and works closely with the reseller’s Systems Engineer. He has developed many tools and templates to help him be more efficient and effective.

User-Persona

Customer-Personas

Phase 3: Ideate

Develop ideas to solve problems

User Stories

When developing the user stories, as a team we created them around the persona; we set the scene around a busy network engineer. The stories helped drive our ideation process by describing the functions and features the app would require.

User Flows

15 user flows were crafted to identify friction points and guide the design approach. Mapping different user flows provided insights into interactions and pain points, enabling us to enhance the user experience.

Information Architecture

I provided information architecture to organize and structure content in a logical and intuitive manner, creating an efficient navigation system and enhancing the overall user experience.

Define MVP

The QBR is currently in its Minimum Viable Product (MVP) stage. Data is collected and delivered to the QBR platform, where delivery engineers select a customer, assess their network health, and collaborate with their team to create project plans based on recommended activities and customer objectives. Upon completion, the QBR is presented to the customer, who then implements the suggested activities to achieve desired customer outcomes.

Wireframes

Traditional wireframes were bypassed due to Cisco’s comprehensive design system available in Figma. It was a faster and more efficient transition to high-fidelity designs. This approach streamlined the design process, enabling a more direct path to creating polished and detailed user interfaces compared to traditional wireframing process.

Phase 4: Build prototypes

Build high-fidelity prototype screens for user testing

Building these prototypes involved creating simplified, interactive versions of the QBR to test functionality, design, and user flow. Key considerations were simplicity, intuitive navigation, and scalability. After developing the prototypes, additional user testing was done to guided further iterations.

The size of this web application was substantial; 124 screens were built to create this prototype. These screens represent a few of the key features.

Landing Page

Dashboard

Standard KPIs

Create a custom KPI

QBR reports

Define the QBR

Create an activity

Create a project plan

General settings

Edit custom KPI settings

Standard KPI settings

Customer settings

Phase 5: Test prototypes

User testing and iterations

In the final phase of the project, we conducted user testing and recorded the results for each feature in a spreadsheet. If a request was valuable and within scope, changes were made. Then, it would be tested again, iterating until users were happy with the outcome.

Some of the user Insights

“I wish it was more customizable so that we only show data to the customer what they care about, especially for higher tier customers.”

“I would love the ability to benchmark and set targets/baselines based on industry peers, to see how we’re trending against them” 

“The data needs to tie back to customers desired outcomes and priorities”

“The QBR needs to show what value Cisco has delivered.”​ ​

Design Review

After launching the beta QBR platform, we noticed some UI issues with padding, margins, and structure. To fix this, we used redlining to give clear guidance to developers, ensuring a pixel-perfect design and a smoother user experience.

Key takeaways

  1. Collaboration within a cross-functional team made this project a success.
  2. Stay flexible in your UI design to adapt to changes as needed.
  3. UX research was essential to developing this web app.
  4. Interviews revealed key insights into users’ needs and challenges.
  5. Affinity diagrams and empathy maps were needed to understand our users’.
  6. An intuitive app comes from ongoing iterations and user testing.

Moving forward

  1. Being flexible and listening to our users is key.
  2. Testing and iterations of the platform will need to continue.
  3. More beta testing with boots on the ground will need to be done.
  4. Additional features such as possible A.I.
  5. Be focused enough to stay within scope, be flexible enough to build the features that add value.
  6. Stay alert and attentive to ensure the design deployed is accurate, protecting the company’s brand.
  7. Be ready to open the backlog and begin v2.0

Other Projects

Xprecipe

Work for hire

Solid# Express Pay

Work for hire

ControlPad Website

Work for hire