Network app redesigned for modern look & user experience
- About: The product is designed to monitor and control network traffic and used by network administrators.
- Problem: Current interface was designed over a decade ago, with a subset of features spun off into a second, Flash-based app.
- Solution: Consolidated app with a modern look, simplified flows, clear and easily available controls, progressive disclosure and straightforward visual communications. Below are the screenshots of a working prototype that I have built using CSS, jQuery, JSON and Highcharts library.
-
Main screen (Dashboard). More system info available in the horizontal tabs. Full screen option. -
View the hardware status and configuration. -
System info and basic configuration options (indicated by a pencil icon and linked to a config screen). -
Traffic admin screen: traffic is broken into a hierarchical list by type or other characteristics. Can be reorganized (moving shown), investigated and controlled by policies and partitions. -
Traffic class options and means of controling it. -
Prioritizing traffic (one of five policy types available). -
Graph view of one or more classes. -
One of the preset reports. -
Setup section have been completely redesigned and features multiple screens (left menu), organized by function, with most common settings in the top third. Configure automatic traffic discovery and classification. -
Advanced network config option. Unless a collector is on, no config for it is shown. -
Another advanced network config option. It cannot be configured until another feature (shaping) is set to watch mode (the highlighted button). -
Watch mode screen once the step above is done. Add or delete(if > 1) routers.
Wi-Fi Radios Setup As Easy As 1-2-3
- About: A new consumer-facing network monitoring product needed a settings UI. The box comes with two radios which can be turned on/off, each configured separately, plus the global settings for the box can be set.
- Problem: Accommodate users of varying admin expertise: the product comes with pretty good presets for less tech-savvy users (only security set up is recommended), but more advanced features can also be configured.
- Solution: A wizard-like interface with progressive disclosure and unrestricted flow that hides complex features for occasional users and allows advanced set up for more experienced admins.
-
All radios have been turned off -
Radio RF2 is on (animated). Each display line is clickable. -
Both radios are on. -
Radio RF1 settings (default screen). -
Once a security dropdown is changed, configuration options appear. 1-25 SSIDs can be configured this way, with even more advanced settings available. -
Optional Mode & Channel screen. Changing a country in the drop down on the bottom changes the auto channel. The dial can be rotated (simulation is shown) and "Auto" button resets a channel to the default. -
Global settings (advanced configuration) can be accesed via a gear icon in the middle of the radio. Shown is screen #3, MAC Authentication, in which user can define either a white or black list of stations. -
Default WAN settings -
Once defaults are changed for either/both wired/wireless, more settings are available.
