Context
the ability to measure a system's current state
As many businesses offer their products and services via the internet, outages or glitches have become increasingly risky to their commercial operations. On-premises or cloud IT has developed into complex systems, so the causes for slowdowns or disruptions are more challenging to identify. Observability software tools help DevOps, SREs, or Developers find the root cause of the problem quickly so that crucial online services can get back online as fast as possible.
3 Pillars of Observability
Challenge
gain new CLIENTS & Catch up to the competition
Gartner magic quadrant for observability
Cisco is growing its software portfolio and acquired AppDynamics a few years ago. Its software product is a tool for SREs, DevOps, or developers to monitor and troubleshoot their IT systems. Facing stiff competition in this market from rivals like Datadog, Splunk, or Dynatrace, Cisco needed an innovative update to its observability software. The goal was to gain new customers, increase revenue, and improve AppDynamic’s position in Gardner’s magic quadrant.
Background
A business decision
Cisco decided to transform AppDynamics from a stand-alone product into an anchor app of a platform. Third-party developers could extend the software and contribute apps and extensions to a dynamically growing, highly customizable ecosystem as part of a platform. Thus, the full-stack observability platform (FSO) spearheaded this new product strategy.
Discovery & Research
Leveraging divers knowledge sources
-
I reached out to product managers of other Cisco products like Thousand Eyes and Intersight to look at their platform products
-
I asked our UX researchers for any relevant studies or materials
-
Our sales personnel helped me with the competitive analysis, and our Product Managers shared their research.
-
I conducted several sessions with our system architects to understand the key technical components forming the FSO platform user experience.
-
I interviewed SREs to understand each step in the troubleshooting process.
conducted competitive analysis of other platform products
created a user journey map of a standard root cause analysis conducted by an SRE
Process
Developing a 0-1 product, A Collaborative Effort
INFORMATION ARCHITECTURE
Compared to a stand-alone software tool, a platform is a more complex product. A platform is a foundational software-based product or service that allows external parties to develop complementary products or services. It serves as a core system with shared functionality and interfaces with apps to which it can interact. (sciencedirect.com). Cisco had hired a system architect who designed the technical groundwork for all foundational platform features. To create a user experience that adequately represented the capabilities of this new product, it was important for me to collaborate closely with his team so I could properly understand the main conceptual ideas. My goal as a Sr. Product Designer was to translate the technical concept into a comprehensive information architecture. As a first step, I created a diagram that outlined the basic building blocks that constitute the foundational elements of the platform's user experience. The main building blocks are:
-
AppDynamics as the main anchor app
-
individual applications either developed by Cisco or by 3rd party developers
-
extensions to applications
-
system applications
-
developer tools
I translated the vision and technical concept of the new platform into an experience information architecture
NAVIGATION
The site map diagram revealed the need to design for many applications on a platform. Therefore, the navigation design needed to communicate the system-wide vs. the app menus. A common practice is the definition of the top bar as a dedicated platform space with an always visible application switcher. Once an application is opened, its specific menu is anchored to the left side as a vertical expandable and collapsable bar. Vertical space is much more scalable, making it flexible for custom applications with many menu items. The space to the right, below the top bar, constitutes the actual app content space. A third-party developer could also add a secondary navigation to this space (e.g., tab navigations) if needed.
a platform site map outlines the navigation hierarchy
layout for the platform navigation
My Role
WORKING WITH CROSS FUNCTIONAL TEAMS
As a Sr. Product Designer, I joined a team of 25 designers, researchers, and content writers. Due to the complexity of the software, smaller groups were formed to focus on the design of specific features. My task was to work out the user experience for AppDynamic, which became an anchor app for the FSO platform. The goal was to provide the team with a strategy and guidelines that allowed for an iterative re-design. The technical concept for the platform was driven by a team of system architects and supported by several members of the product managers. Front-end developers implemented incremental changes into production, and the executive staff reviewed the progress.
Product Managers
System Architects
Executive Staff
Front End Developers
Feature Designers
PERSONAS
Several categories were identified for personas:
-
Primary End User:
DevOps, Developer and Site Reliability Engineer (SRE)
Their primary goal is to use the platform for monitoring, troubleshooting and optimizing their IT system. -
Secondary End User:
Administrator, Business Manager
Their primary goal is to set up the system or get a quick summary of the system status. -
Contributor:
Cisco Developer, 3rd party Developer
Their primary goal is to customize the platform by developing new apps or extensions for existing applications.
USER JOURNEYS ACROSS PLATFORM APPS
The user journey significantly differed between AppDynamics as a self-contained product and the full-stack observability platform. AppDynamics represented a single app environment where a user navigated between software features. On the FSO platform, a user might have to pass through several system apps and third-party applications to accomplish a particular goal. Given the platform's navigation structure, I explored some basic use cases with fellow designers, like subscribing to a new extension (aka plug-in for an app). This solution revealed the need for additional messaging and guidance.
Next Steps
A MARKET PLACE FOR PLATFORM EXTENSIBILITY
The prototype revealed that the design of a marketplace was a top priority. This concept would be the first true native system application of the FSO platform that had to be designed from scratch. 3rd party developers needed a place to list their solutions for end users. After all, extensibility and customizability drive the actual value of a platform over a self contained software product. I created the initial wireframes reflecting the vision of the system architects. They featured elaborate filtering tools to find specific solutions among various applications or enrichment categories. This solution quickly proved to be a long-term goal as, at that moment, only a few extensions to the AppDynamics anchor app were available. Thus, an MVP had to be extrapolated to fit the product manager's short-term goals better.
initial wireframes were to complex, thus served as a "north star" to convey the long term goal of the market place
a high fidelity mock representing the MVP of the market place was made production ready for the first release
PROTOTYPE
I assembled a prototype for the initial platform experience to simulate key use cases. Collaborating with the feature designers and product managers, we created mocks to show click-through sequences for data transformation, troubleshooting, health rule creation, dashboard customization, etc. For most of the system applications, it was only necessary to map existing key features of AppDynamics onto the platform information architecture and fit them within the navigation layout.
We walked through these various use cases in an all-hands meeting with stakeholders to give everyone a visual impression of the new FSO platform experience. The prototype was very well received, validating many of our assumptions and generating feedback that led to further improvements.
IMPACT
The prototype enabled the product management team to formulate specific milestones for the next few quarters. This solution also allowed us to speed up the transition from AppDynamics as a stand-alone product to an anchor app on the platform. We defined various deadlines for the roadmap. Sales used the prototype to demonstrate a preview of the upcoming platform to interested clients. We took this opportunity to gather further user data whenever a client was available for feedback. Most importantly, the prototype drove alignment across all teams, resulting in a faster turnaround time for subsequent feature development.
Next Steps
Adopting CIsco's Design system
Another challenge revealed by the prototype was a mix of legacy and newer design styles throughout various screens. This design resulted in an inconsistent look and feel. At the time, Cisco had just introduced its new company-wide design system called "Magnetic." All designers were asked to adopt these new elements in their mocks and to ensure they complied with the Magnetic style guides. In a subsequent iteration of the platform's prototype, the consistent look and feel of the Magnetic design system were applied throughout each system application and platform-wide elements like navigation.
Cisco's Magnetic design system was applied in later iterations of the platform prototype to ensure consistency
Outcomes
Gaining a major new client
Three business quarters later, we were able to measure the platform's objectives to increase customer numbers through extensibility and customization:
-
Cisco was able to onboard 12 companies as 3rd party developers
-
As a result, 30 applications and extensions were added to the platform's market place
-
Sales was able to increase the number of perspective clients
-
Cisco gained with T Mobile a major contract for the new FSO platform
Learnings
Keeping a proactive outreach to the team
It is essential to align and coordinate in a cross-functional team with many PMs and designers working on the same product. Guidelines for the new platform had to be continuously presented and evangelized to all feature designers. Therefore, I adopted a proactive approach by presenting at the weekly design roundtable meetings and documenting my materials on Confluence and Figma. I further provided hands-on collaboration on various projects to ensure alignment and timely deliveries of designs ready for production.
