Topology Builder
Desktop diagramming app for designing and creating functional cloud hosted Cisco network maps and solutions
Watch the Presentation
Desktop diagramming app for designing and creating functional cloud hosted Cisco network maps and solutions
Watch the PresentationThe current version of Topology Builder was built ad hoc by Programmers and Demo Developers with no UX or further use cases involved. As such, the goal was to make a tool for Demo Developers, but the rapid move towards remote work and the increasing reliance on remotely designed solutions meant we had to quickly redesign Topology builder and include new features for new types of users.
Design and build computer topologies, networks, solutions and showcase them to customers
Role
Lead UX Designer - logical diagram/drawing view
Delivery
Remote
Team
Antony - Lead UX Design - Table config view
Fadzie - Product Mangement
Barry - Project Mangement
Tools
Figma - Wireframe + UI Design
Miro - User flows, Requirements Analysis
Ipad Adobe Sketch - Rapid Prototyping
Daily UX check-ins - Reviewing previous days’ work, giving and receiving feedback, discussing problems and working on insights.
Bi-weekly project check-ins- Product Owner, Software Engineers, Software Team Lead, Project Manager and UX Designers. Presenting work in progress, asking tough questions and getting approval of designed solutions.
Kick off meetings - All stakeholders working remotely, Product Managers, Project Managers, Demo Developers, Programme Leads, Software Engineers, Multi-Disciplinary teams consisting of Tech Leads, UX designers.
To design a system for future users without access to them.
A huge project with a small budget (two Designers).
Constantly and rapidly changing requirements
Having gained a background understanding of networking and the current app, we interviewed the users to find out pain points and potential new features.
Organised calls for 5 different users to walk us through how they used the app and to discuss their job role, why and how they used topology builder, what pain points they had, and any features that would make things easier for them.
Carried out a two-question survey. Kept it brief to maximise participation, and open-ended to avoid pushing participants into thought corners.
A small selection of findings
Assessed the business requirements, listed user problems and proposed solutions.
Hard to find items
Some kind of map search
Can't see how things connect
Make lines clearer
Screen too cluttered for complex topologies
Pan + Zoom, Navigator
Can't display external entities for a full diagram
Find way to show external entities
Diagram requires non-functioning items
Enable drawing and adding images
In order to keep track and have a reference whilst prototyping, the flow diagram was redrawn with changes in place. After analysing user movement through the app, I redrew the flow diagram with improvements to the flow of forms/tasks.
The flow diagrams adapted as the design and information architecture changed through prototyping.
Used iPad and Adobe Sketch to mock-up and draw some areas. Helped visualise ideas on hard sections and make easy to wireframe prototype later.
Some ideas so the diagram can be as large as required whilst having complete control of position.
User types in term, result is highlighted and zoomed in on the diagram with the setting open
Like above but highlights all potential results with settings opened on side panel with each device on a tab
Fades incorrect results and leaves the matches normal. Added a clear button to remove search state.
Search model which shows results with info > user selects a single result which is highlighted and setting opened
Wireframes being discussed include UI parts from above pen prototypes.
Putting it all together
Layout with fixed left full menu, search on page, curvy connections
Used floating pill menu nav with search and zoom panel to give more space to the diagram
Side panel shows multiple opened items as tabs
When presenting the search ideas, we decided as a team the modal search was probably the most effective. Search is opened by clicking the search icon on the pill menu.
Mocked up flow diagram for how search would work
Matched items show up with detailed info to help user make right choice
Some problems needed to be solved using UI design
On complex diagrams it was hard to tell which device connected to which VLAN as they were all the same
After some discussion we were inspired by the London Tube map and its use of colour and pattern to clearly present the different tube lines. Adopting a similar approach vis-à-vis the diagram led to improved distinctions between connections.
By alternating line colours there is clarity of how devices and VLANS connect.For line types dashes and dots were introduced:
Device icons have different visual states for errors, connections, configuration types etc. I developed several types of states that can be used.
Visuals designed in Figma using Cisco UI design language as a base
A selection of various UI interactions.
This project was very complex and required many cycles of iterations, feedback and user testing. The end result was a well thought out and designed product.
The team worked well together in designing this remotely. The collaboration cycles and daily UX discussions provided a great deal of value. Users were very happy with our design which was very rewarding for the team.
Given more time and better circumstances (this project took place during Covid 19 lockdown), it would have been useful to see the topology configurations work in real life. Had this been the case, the team would have better understood how such a product translates into real world use.
As this product is released to new user groups, we will process the user feedback and add new designs and features accordingly.
Overall, I am very excited to launch this.