• Liliya Bederov - Web & UI Designer
  • Liliya Bederov A Swiss Army Knife of UI Design
    • Visual Design
    • Interaction Design
    • Web Design
    • Prototyping
    • Front-End Development
  • +

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.

Technical Illustrations

Web Design

Art Gallery