Topology use case
Gigamon’s interactive topology screen had limited functionality and was fraught with usability and cognitive issues. Features were scattered around the site disparately not easily discoverable through the navigation or search. The current use of Cytoscape was also limiting the feature customization necessary to realize our goals.
Centralizing all features within a topology centric environment would contextualize disparate activities more closely aligned to the users’ mental models around systems design based on user interviews and evaluations.
Mockups and D3 prototypes used for discovery and validation cognitive evaluations. Remote treejack tests were used for information architecture validation. Job stories were used to qualitate user needs and to create a holistic narrative across our product(s).
Interation - Created physical topology-centric configuration system to satisfy wire/configure and configure/wire scenarios, based on needs analysis conducted early on, with logical topologies for traffic flow configurations.
Converted previous form based UI to a canvas workspace where actions were performed in situ in order to better highlight intent over configuration. Drag and drop / point and click interaction model was favored by the users in order to conform with currennt diagramming workflows in place.
Recommended and presented D3 for customizability and Angular Material to standardize common patterns in line with our branding and interaction model.
Users will be able to perform all configuration actions contextually in line with their intent as opposed to a series of disparate steps requiring primary memory retrieval across functional feature areas.
GV’s Heart framework and job stories are used to determine the signals and metrics needed for evaluatinng and exiting sprints by addressing goals in a quantitative manner through the use of prototypes in interviews.
Users performed all configuration actions contextually in line with their intent as opposed to a series of disparate steps across functional feature areas which required extensive domain and application knowledge. Logical diagrams and a darker theme to satisfy NetOps as well as SecOps environments.
Contextual popups and modals resolved non linear and conditional flows previously scattered throughout the site.
Contextually relevant, proximate popups and procedurally driven multi modal patterns would allow users to remain in place while setting up a diverse set of operations in as linea as manner as possible without needing extensive domain or app knowledge in an expedited manner.
Cognitive and usability evaluations via InVision and alpha prototypes. Open and closed remote card sorting and treejacking used for navigational validation.
The need for a logical representation of the traffic across the system topology became a critical view more in line with the users’ intents. Visual distinction amongst panels and canvas needed to be more obvious and in line with our brand.
Clearer visual distinction and contrast around panels and canvas elements more closely aligned with our brand colors.
Users’ cognitive load is decreased substantially due to clear delineations around UI components. Color contrast analysis is vastly improved.
Cognitive and usability evaluations via InVision and html prototypes.
Task success and time to completion improved.
Added a flowmaps section for logical flows configured in the system topology.
Separating physical topologies and logical flow maps allowed our users’ mental models to better match their roles, task divisions, and their usage frequency by having all the operations contextual.
Cognitive and usability evaluations via D3 / Angular prototype.
Users can now complete their role based tasks in a manner that fits their intent instead of having to worry about the underlying system structure.