CompTIA Network Modeler eLearning Tool
Activities & Roles:
Cross-functional Project Management
UX Design and UIX Design
UX Research and Usability Testing
Programs Used:
Figma
Team:
Myself (Design)
Engineering
Product Management
Overview
CompTIA is an IT certifications and training organization. The network modeler represents the next step in CompTIA’s flagship performance-based products. It uses drag n’ drop functionality and an array of supporting features to construct, connect, and configure networks, as well as dive into individual devices for further configuration.
Further, it is designed from the ground up to be accessible, ensuring that even those who are blind can build and operate a network.
The Problem Space
Following a previous designer rolling off the project, I was called on to take over. There were minimal designs available and new features, like accessibility and localization support that needed to be added. I needed to rebuild the project from ground up with consolidated requirements and create new designs while also adding in the new features required.
Research and Requirements
I called a kick-off meeting with pertinent team members from product, content, and engineering. I then located the primary subject matter experts I would use to build requirements and scope. I filtered their knowledge into a single document and confirmed what I would build. Requirements included the ability to:
Drop categories of network nodes into a workspace
Drag to connect nodes to each other
Add user-generated notes anywhere in the workspace
View, open, and configure individual nodes
Accessibility and localization support
Within the first week, I had an attack plan and by the second week, with requirements in had and a cross-functional team behind me, I had designs in progress.
Designs
Creating Nodes
A node is any end point in the network, like a router or computer. Nodes are dragged from a categorized inventory and dropped into the workspace where they can then be interacted with.
Dragging a node from the inventory into the workspace.
Following placement, the inventory disappears to allow focus on the workspace.
Linking Nodes
Connecting nodes to each other requires a user enter a “linking mode” to prove alternative functionality. This allows a user to select the connection ports on both a starting and ending node and connect them together. On successful connection, simulated traffic flows between the nodes as though they were real computers.
A link, already attached to the first node’s port, being created.
Selecting the end node and port to finalize the network connection.
Adding Notes
As requested from our instructors, adding notes allows users to mark up the workspace with comments related to the network they’re building. This previous various learning perks, like helping students remember actions they’ve taken or what to take, or helping instructors provide additional notes for students to see.
Note mode enabled, allowing note placement anywhere in the workspace.
Writing and adding a note to add to the workspace.
Node Configuration
Once connected and turned on, nodes simulate real traffic and launch simulated interfaces, allowing users to dive into the settings to configure the network or system as they might in real life.
Selecting a node to configure its OS and settings.
A view of the selected node’s simulated OS home screen, ready to be configured.
Accessibility
Network Map
The Network Map is a universal design feature specially created for the network modeler. It provides a textual map of all nodes, statuses, and associated links in the workspace.
This provides standard users with a condensed, alternative view of the network and accessibility users a clear information architecture to navigate and understand connections between. Accessibility users may then use alternative interaction methods to take actions against nodes without needing to see the screen or use a mouse.
The network map sidebar showing the list of nodes and links.
Alternative accessible menus enabled by right click or TAB + ENTER.
Alternative Accessibility Actions: Adding Nodes
With the network map open, accessibility users may use keyboard-only controls to navigate and add nodes to the workspace. This does not require use of a mouse or eyesight, only a screen reader.
On selection of the “Add” button, alternative menus appear that provide accessibility users with simple dropdown-based interactions to select and add nodes to the workspace.
Selecting “Add Node” button.
Alternative menu to locate and select a node to add.
Type-based search to list possible nodes to add.
Alternative Accessibility Actions: Creating Links
Links too may be created without need for a mouse or user eyesight. On selection of the “Links” button in the network map, users can select their start and end nodes and start and end ports via simple dropdown selectors. This alternative functionality allows users to connect a network without needing to see the network.
Alternative menu to locate nodes to start linking.
Selecting the starting node to start linking.
Selecting an node’s available port to start linking.
Outcomes
The network modeler launched to fanfare as an example of team effectiveness and organizational innovation. Key successes included:
Applauded by executive management as a fantastic example of cross-functional team success and overcoming odds, despite initial setbacks
Hailed by customers as an accessible interactive that performs it’s intended tasks exceptionally well while also looking great
Now launched in multiple courses and being used by millions of individuals per year.
Updated features will eventually be rolled into an existing patent, owned by the organization, with my name included on it
Above: A video of the network modeler in action, showing key functionality.