.png)
APIC Connectivity Workflow
Interaction Design
Why the effort?
At Cisco live, a user research was conducted to asses the user's impression on the APIC GUI. Following were some of the user quotes related to provisioning and object creation.
The endless clicking and switching between menus
Jumping around tabs for all the configuration
So much clicking for creating objects
Provisioning is complex
Very complex to set up
A lot of GUI windows for a task (for example port config and EPG bindings)
Users
Network Operators, Engineers and IT professionals managing data center operations
Details
3 months | team of two
Contribution
User and product research, Task flows, Prototyping, User Testing
The Goal
How can we simplify switch and interface connectivity while providing ACI benefits, regardless of users' networking backgrounds?
The Impact
Currently, users must navigate multiple sections of the UI to attach different types of objects to ports, which is cumbersome and inefficient. The new design will consolidate these steps into a single, easy-to-find workflow, allowing users to configure ports more efficiently while maintaining the flexibility of APIC through automated background configurations.
Add numbers
Research and discovery
Preliminary reserach
APIC is a complex technical product, and as a product designer, it's crucial to understand it well. My initial research focused on understanding the key objects and relationships in networking.
Current UI review
Analyzing what steps users need to take in the current UI to establish configuration and connectivity of the switches and interfaces and all the flows and clusters of information they have to interact with.
Stakeholder Interviews/System of objects
Subject matter expert interviews were done in parallel with UI review to shine light on the current behaviors of the user and points in the journey that causes frustration .
-
When do users usually configure switches and interfaces?
-
How often do users configure switches and interfaces?
-
What is the natural steps user would take to configure switches and interfaces.
User pain points
Excessive flows and steps
There are nearly 35 flows users must navigate to establish connectivity, each containing multiple sub-steps.
Confusing configuration order
Traditionally, users configure physical ports before logical settings. In ACI, this process is reversed, leading to confusion and requiring additional explanation to set up the network.
Too many unnecessary fields
Many fields and advanced settings are not essential for establishing a connection, distracting users and wasting time as they try to understand unnecessary options during the initial setup.
Repetitive process
Users must repeat the entire configuration process multiple times when onboarding the fabric, making it an inconvenient and cumbersome task.
Concepts and designs
Brainstorming
Visual treatment of a single flow
'Magnetic' is the design system used cisco-wide for networking. Leveraging the design system I explored visual treatments and experiences that will best eliminate user pain points.
A single 5 step workflow that replaces the >35 flows discovered in current UI.
A single start point to anything the user wants to connect
Help text on hover to guide user selection
Advanced setting for any details that is not required but neeeded to manage by expert users
Automatic creation of logical xonstructs in this step, so user does not have to learn them immediately and don;t have to plan for them before interacting with physocal constructs
Advanced users can still modify logical constructs
Visual representation of what type of connection users want. Reduces time and improves easy decision making
In this example policy group is a concept unique to Cisco ACI. Having a help drawer here avoids confusion of what this is and gives information on demand.
Testing
We recruited five participants aged 23-27 for in-person or remote testing. Beforehand, we developed a testing protocol. To streamline feedback management, we utilized Miro to organize and prioritize test comments for implementation in the next iteration.
Testing Insights
-
Updating quantity is time consuming.
-
People wanted to have a view of all inventory items rather than in only specific 'ingredient houses'.
-
The 'more details' on the houses didn't seem to give users the expected insights.
-
Users expected 'challenges' to be a main feature in the home page.
-
Users wanted to know exactly when in the game they can score points.
Reflections
Leaf emerged as the culmination of our interactive products studio class. In our dynamic duo, we complemented each other's strengths, spanning interests across the design process. By challenging ourselves in less familiar areas, I honed my skills in structuring and conducting research.
The unique interaction method of our solution posed a challenge in crafting the information architecture and wireframes, but collaborative efforts propelled us forward. Developing visuals and the product video demanded time and dedication, with valuable insights gained from testing underscoring the importance of iterations.
Positive feedback on our final deliverables brought a sense of accomplishment. This project significantly improved my proficiency in Adobe Illustrator, Figma, information architecture design, video production, and user research and testing.
Previous
NexT
