Cisco UX Experience 2022-2026

These case studies can help understand the context and background of my latest work.

one

Magnetic to Splunk Design System, translations for integrated micro apps

Context

As my company adopted another company, there was a need to integrate one companies products into a bunch of micro apps within the other’s design system. This would create a more seamless transition for both customer bases.

Problem

While one system had over 500 components, the other only had about 50. This created a complex design challenge where many components had to be simplified, functionalities had to be interacted with differently, and some functions had been intentionally decided to be left out.

Process

For almost two years now, I have been working with both internal and external stakeholders to identify the users needs from the product to be in the app, and identify any constraints.
Research asks and any limitations to see if the user’s experience will be hindered or enhanced by them.
Brainstorm and imagine various solutions prioritizing different needs to see which scenarios are the most feasible.
Plan to focus on one of the solutions and create a realistic prototype balancing both stakeholder and user needs.
Evaluate design with internal stakeholders and test with both internal and external stakeholders.
Reiterate design based on feedback for improvements.

Solution

Collaborated to create 13 working on 14 different apps for users to switch between and work on. As the past products have been seen as successful, more apps are being created and I am actively working on one right now.

Impact

Almost at 45,000 downloads, these apps have definitely gotten used since being shipped. I have also learned to adapt to not only different design systems, but also to working with different product teams for every single app. It has helped me refine my soft skills and learn the various working styles from team to team. Cross- collaboration, not 1:1 mapping or lift and shift, a complete merge and reintegration.

two

Context

Product was being moved into what was called the Breach Protection Suite, a collective of cybersecurity products. This in turn created a realization that there was no documentation or updates to the product. Therefore, many projects were instigated to organize and reinvent the product, but while going through the IA many design faux pas were flagged which resulted in a huge redesign of product alongside converting it from Atomic (old design system) to Magnetic (new design system)

Problem

SNA needed to be redesigned as many of the page designs were obsolete or did not make sense. The product’s design was also in an old system, so the redesign process happened simultaneously during the translation to the new design system. There was also no recorded IA or organized documentation for the product, so I initiated a project to create a site map for the entirety of SNA. We also made sure to include dark mode and empty state pages for the devs, so it would be easier for them to visualize this.

Process

A team was gathered and we began by creating an audit file mimicking the IA of the product already, using the navigation as separators for sections with each pages in them. We combed through every page flagging potential design changes and recording which new Magnetic components would be needed, then divided up the pages and started to translate every page in magnetic while addressing flagged design questions through reviews with stakeholders, and also made sure to include dark mode and empty state pages for the developers, so it would be easier for them to visualize this.

Solution

Once, this process was in motion, I started the site map project and within one year we had finished the entire redesign and mapping project for SNA at that current state. Many of the solutions were specific to the circumstance, but some examples were creating a custom report builder rather than having editable tables, creating drawers for host group trees, and helping to design a rule builder for configuration pages. Also, creating the site map helped devs and other internal stakeholders recognize that some of the pages in the information architecture are unnecessary or can be combined, which caused a couple of pages to be consolidated.

Impact

All of this work resulted in not only a more accessible, clear, and thorough documentation, understanding, and reiteration of SNA, but also instigated opportunities for the product to be integrated into future product plans and not just to be sunset. The work revamped SNA entirely in a way that was consistent enough that old users could transition without too much change, while still honoring the consistency of the Magnetic design system across products. SNA was then given a lot more visibility and is now being used to inspire designs in a new project, since all of the workflows, content, and design history are now recorded, documented, and synthesized into one place. The process of modernizing a legacy software allowed the product to have a whole new lifeline and provided it a space within a new suite of products where it wouldn’t have belonged prior.

three

Context

As SNA was being modernized and now joining the Breach Protection Suite of products, there was an increasing need to align language to maintain consistency of understanding and invariable vocabulary amongst all of the products in the Breach Protection Suite. While some products used the word “Alarm” others would use “Alert” for the exact same context, meaning, and function. This caused major confusion for users who would bounce from product to product. The outcome of this project is to identify and call attention to verbiage inconsistencies between products within the suites.

Problem

With many synonyms and polysemous (ambiguous or having multiple interpretations) words being used across the suite products, the users and internal stakeholders would always have to translate between the various language used within the product. Words such as “computers” would be used interchangeably with “devices” or “assets”. In older products, some pages would use the different synonyms on the same page. This would cause confusion sometimes between internal stakeholders and users working across the products, and even in customer user interviews, people would comment about the redundancy and vagueness in the verbiage. For clarity, finding and condensing the synonyms and polysemous words became pertinent.

Process

First, I conducted research by studying the National Institute of Standards and Technology (NIST), the European Cybersecurity Atlas – European Cybersecurity Taxonomy, and a version of the Cisco Security Glossary. After creating a general list of words to reference as a standard, I began to narrow down a to a specific scope to begin workshopping with. I chose navigation as the first aspect to search for ambiguity in because every product in the suite has one, and it is one of the first sections users will see outside of the login page

Solution:

I conducted a Navigation Workshop. I sent a Qualtrics survey out to different stakeholders from each product, and collected their roles and how they would define forty-three different words. I combed through all of the responses with 7 other colleagues and sorted them based off of these metrics:

Impact:

This project led to continued research of the products taxonomy by other teams who expanded past the navigation scope. Socialization of this product established bringing together stakeholders through the initiation of the Linguists & Pattern Makers Committee. The committee ended up having representation from each product in the suite.