.png){kind=small}
Enterprise UX
Cisco APIC Connectivity
Why the effort?
At Cisco live, event conducted for the cisco community, user research was conducted to assess the user's impression on the APIC user interface. Following were some of the user feedback 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
A lot of GUI windows for a task (for example port config and EPG bindings)
Based on feedback, a strategic direction was taken to revamp the entire product UI and UX. One of the higher priority experieence to re-visit was how users provision switch and port connectivity.
Users
Network Operators, Engineers and IT professionals managing data center operations
Details
3 months | team of two
Contribution
User and product research, Task flows, High fidelity prototyping, User Testing
The goal
How can we simplify provisioning switch and interface connectivity while providing ACI (Cisco's groundbreaking network model solution) benefits, regardless of users' networking backgrounds?
The Impact
- Condensed close 35 workflows into a single a choose your journey workflow
-
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
Stakeholder Interviews/System of objects
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.
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 steps with multiple start points
There are nearly 35 flows users must navigate to in different parts of the UI to establish connectivity, each containing several 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. Talk about magnetic
Final design example - Connecting an external router
Reduced number of flows
Condensing multi-workflows
A single 5 step workflow that reduces over 35 flows discovered in the current UI
Single start point
Automatic object creation
Centralize start for all possible flows required to connect a device to the fabric
Expert users only
Advanced settings
Advanced setting for any details that is not required but needed to manage by expert users
Expert users only
Automatic object creation
Logical constructs are auto-created, removing the need for prior planning and learning. Advanced users can modify them in the drawer.
A guided experience
Help drawers
A policy group is a unique concept to Cisco APIC. A help drawer here provides on-demand information, preventing confusion.
Simplify decision-making
Visuals
The visual representation clearly shows the type of connection, simplifying decision-making.
Expert user only
Automatic policy creation
User simply selects switch and port. Policies are created automatically to avoid need for users to do this additional configuration.
Enhancing experience
A summary
The summary manually and automatically created objects allows user to verify before establishing the connection.
Enhancing experience
Post workflow
Once the user completes creating a connection they most probably would want to repeat the flow to configure other connections or move on the the next step of setting up their fabric.
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
