Topology Builder Genesis
Configurable computer network topology mapper with static diagramming support.
Watch the Presentation
Configurable computer network topology mapper with static diagramming support.
Watch the PresentationAfter the success of Topology builder version 2, more users adopting it, with a plan to release the tool outside of Cisco sellers, additional features were required to cater to user goals.
According to internal user signup tools, the number of new users went from 10,422 to 31,867. The number of topology projects created increased from 21,316 to 56,863, and with that we had a lot of user feedback on what features were missing.
A version 3 of Topology builder with many additional features acquired through consulting with new user types. These included, but was not limited to:
Inventing a new type of diagramming tool that has static and functioning items at the same time, proposes usability challenges and learnability for the users.
Without existing platforms to measure up against, it's unclear how such a solution will be received.
Using Topology Builder feature request forms, users gave insights to what they wanted. The feature request UI had a voting system, so we could determine the most upvoted requests. This made it easy to prioritise.
Most upvoted features looked as follows:
Contacted some of the users who left their emails and invited them to interviews to deeper understand the requirements and include them in the iteration section of the design cycle.
Motivations
Frustrations
Design and build computer topologies, networks, solutions and showcase them to customers, make a sale
• Add images, labels, and other items to show a complete solution to clients.
• Adding non-configurable boxes and lines
• Labelling certain elements would make diagrams more clear.
• Users want to be able to draw boxes and lines to make the picture richer.
• Adding images and icons is desired.
Differentiate what is configurable and non configurable
Assessed the business requirements, listed user problems and proposed solutions.
Add Labels
Text tool
Draw boxes
Box tool
Add static images
Upload and insert images
Need to see difference between diagram types
Figure this out. Maybe different view types
For this case study, I will present the section on being able to distinguish the difference between functioning and static assets, as they look the same. How can we make this easily distinguishable for the user.
By using the rapid prototyping ideas, wireframes were created.
Problem: Users need to be clear on what is a static drawing vs a configurable asset.
Challenge: Both can look identical.
Everything on diagram.
Need to prototype ways to access different views so the user can contextually edit the diagram. Aims:
A strip at the bottom to switch
With new diagramming elements, the tools menu needed to be expanded to include additional elements. This also needed to be contextual. Two ideas were prototyped, they would look like this in the each of the different views:
Menu 1 - all in one
Separate menus for different views
Greyed out menus
When an item in the diagram is selected, a right hand panel pops up to edit the settings. I prototyped this for a static item and it was apparent that it's hard to differentiate between a config and a static item. Example below:
To separate drawing items from setting items, a top bar for drawing option was designed. This helped clarify to the user which type of line they had selected.
The designs were tested on a couple of calls with users and stakeholders. They tried out an interactive version of the wireframe. The tests included the following tasks:
From the user testing with a vision of future developments, the following were decided:
Cisco dCloud team switched their visual style to Magentic UI Design. This design was used to mock up the final design
Please view full screen mode.
The diagramming tools were very well received. Not only were the users happy but the business saw the potential of how we could use it to bring in more profit and innovate further in global networking infrastructure.
I think we could work on the visual style to make it more appealing, despite conforming to the UI kit.
There are many new diagramming features that are being worked on to be incorporated into this tool. It is one of a kind in the world, thus having the potential to be sold as standalone software to other companies.