Managed Service Experience

Cisco's managed service experience provides customers with premium support through partnerships with Managed Service Providers (MSPs). MSPs work with Cisco to monitor hardware, manage service offerings, and handle alarm tickets, delivering a seamless, reliable experience for each customer.

Role

Visual Designer

Industry

Networking SaaS

Duration

6 months, 2024

  1. Solution Preview

The Managed Service Experience (MSE) for PX Cloud is equipped with powerful tools for Managed Service Providers (MSPs) to better support their clients. This all-in-one platform delivers valuable insights into clients' network health and offers proactive tools for issue prevention and resolution.

  1. The Potential

PX Cloud, Cisco's partner experience portal, is tailored specifically for Cisco's partner companies, who help deliver products and services to customers. Unlike end customers, partners have distinct needs, which this portal addresses.


Managed Service Providers (MSPs) are a unique type of partner with untapped potential, actively helping customers manage their networks. Our aim was to resolve MSPs' pain points while creating opportunities for collaboration, positioning MSPs as a premium service tier for customers needing network management support, benefiting both customers and Cisco.

PX Cloud, Cisco's partner experience portal, is tailored specifically for Cisco's partner companies, who help deliver products and services to customers. Unlike end customers, partners have distinct needs, which this portal addresses.

Managed Service Providers (MSPs) are a unique type of partner with untapped potential, actively helping customers manage their networks. Our aim was to resolve MSP pain points while creating opportunities for collaboration, positioning MSPs as a premium service tier for customers needing network management support, benefiting both customers and Cisco.

  1. Why MSPs?

In designing the architecture for Cisco's customer portal, CX Cloud, our UX team planned for multiple service tiers, each with varying products and levels of support. At the highest tier, customers can have a fully managed, hands-off experience provided by an expert, like an MSP.


To support this model, PX Cloud was built to accommodate all service tiers, including the Managed Service Experience (MSE) specifically for MSPs. Given MSPs' limited resources, we saw clear value in creating a dedicated experience to support their needs.

Although a UX design had already been established for this project, I created a persona to gain deeper insights into the user base and ensure the design truly addressed their needs.


Gaining a deeper understanding of the MSP user was instrumental in shaping the direction of the visual design and defining the project goals

In designing the architecture for Cisco's customer portal, CX Cloud, our UX team planned for multiple service tiers, each with varying products and levels of support. At the highest tier, customers can have a fully managed, hands-off experience provided by an expert, like an MSP.


To support this model, PX Cloud was built to accommodate all service tiers, including the Managed Service Experience (MSE) specifically for MSPs. Given MSPs' limited resources, we saw clear value in creating a dedicated experience to support their needs.

  1. The MSP Persona

Although a UX design had already been established for this project, I created a persona to gain deeper insights into the user base and ensure the design truly addressed their needs.

Gaining a deeper understanding of the MSP user was instrumental in shaping the direction of the visual design and defining the project goals

  1. Goals

Create a visual design that elevates the user experience by aligning with user needs and expectations.

Requirements
  • Highlight Key Information: PX Cloud is a data-intensive platform, so it's essential to display the most critical information in a prominent and easily accessible way for MSPs to act quickly.

  • Defined Information Hierarchy: With a wealth of data on each screen, establishing a clear information hierarchy is crucial to improve scannability and reduce clutter.

  • Clear Signposting: Given the multi-layered nature of users' workflows, pages should include clear signposting to help users easily understand their current location within the system.

  1. Aligning with the UX

To gain a clearer understanding of the existing UX, I translated the wireframes into a simplified user flow.

  1. Creating a Hi-Fi Mockup

When I receive a wireframe or mockup, I review the page contents and identify areas that need updates.

When I develop visual solutions in hi-fi work, I ask myself the following questions to ensure the best user experience:

  • Does it fulfill users' needs and desires?

  • Is key information presented clearly and effectively?

  • Is it accessible to all users?

  • Does it meet users' expectations?

  • Does it align with project goals, or is it simply decorative?

With these items considered, I then refer to our design system, style guides, and other finalized high-fidelity mockups to transform low- or medium-fidelity wireframes into polished high-fidelity designs. When needed, I also create custom component designs.

  1. The Final Designs

Here are several high-fidelity mockups I created for PX Cloud's Managed Service Experience.

  1. Reflection

This project was one of the most challenging I’ve worked on at Cisco. One of the biggest hurdles was designing the information hierarchy for each page, as each one was packed with unique data. Additionally, creating a cohesive design across all screens while ensuring that each page’s individual data stood out was a complex task. Despite strict requirements from PMs, layout constraints, and shifting to a new design system mid-project, I’m proud of the final outcome of these high-fidelity mockups.

The Managed Service Experience (MSE) for PX Cloud is equipped with powerful tools for Managed Service Providers (MSPs) to better support their clients. This all-in-one platform delivers valuable insights into clients' network health and offers proactive tools for issue prevention and resolution.

Copyright © 2025 by Chris Bui

Copyright © 2025 by Chris Bui

Copyright © 2025 by Chris Bui