Untangle, Inc.
 |
|
I moved to California in 2004 to help start a network security company, known as Metavize at the time. The technical goal was to build a platform that would be easily expandable in order to deal with new network threats as they would arise. However, this seemed to add complexity and it was not clear how a user would deal with configuration of the system. I developed the Virtual Network Rack in order to tackle this usabily obstacle. I also implemented the interface in Java and Java Swing. The company has enjoyed growth and success and is backed by venture capital groups Rustic Canyon Ventures and CMEA Ventures. Metavize is now known as Untangle. I believe this user interface has revolutionized network security. I also designed both logos ;) The user interface has been developed and interated over the course of several years, with refinements coming in each release. Evolution was necessary because the user's requirements were a moving (and sometimes unknown) target. Very often features would start off as discussions in an informal meeting, and then mature through further discussion. Then an engineer would be asked to write some server side code and I would start making some sketches of the interface that would control that feature. After a few sketches, I would implement the interface, and write the client side code to talk to the server. Thus there was a clean separation of interests. The user interface was implemented and designed by me, using Java Swing. In 2004 when this project got under way, Java Swing was my strongest tool and also promised compatibility across several platforms, which was far more than other toolkits were offering. However, there was a steep learning curve to doing many of the features which we envisioned. I also designed the artwork that was used throughout the interface, including icons, textures, etc. I was assisted by designer Liz Balin early on as she taught me how to make the chicklet icons which I wanted. She also implemented many of the early icons. In addition to the Virtual Rack user interface, I also built a user interface for the wab based reporting system. The reporting system was excellent, as it leveraged an onboard database to compute interesting and relevant statistics. Click here to launch the Java Client Demo and see for yourself what the Virtual Rack is all about |
 |
United States Patent (US-2008-001 0606-A 1) |
 |
 |
|
Two views of the Virtual Rack showing the rack fully populated. In the second image, a device in the rack has its controls exposed for configuration purposes. Each device in the rack represents some different functionality or set of features. Devices can be added to and removed from the rack at will, with no real physical wires to worry about. There is a "Config Panel" on the left side of the rack. This is where global configuration settings are located. These settings may affect all devices in the rack. |
 |
|
This is a Virtual Device. It features a front faceplate as well as a settings panel that can be hidden or shown. The faceplate can be branded and customized, and features a help button for context sensitive help, an on/off button, a large bright status LED, and possibly several real-time graphical displays which show activity. The settings panel groups settings logically to configure the device. You can also save your changes, or refresh back to your last saved settings. |
 | |
|
This shows a shot of a user installing a new device into the rack. Its as simple as clicking a button. Of course there is much more going on behind the scenes. As the device fades into the rack, the device becomes live and able to start processing network traffic. Notice the "My Apps" and "Library" panels on the left side of the screen. The "Library" is an online repository of devices that you can download. "My Apps" are devices that you have already downloaded and can put into your rack. |
 |
 |
 |
|
The reporting engine was critical to demonstrating the successful operation of the product. Thus reports became a major focus of effort. Our reports would show a mix of global data and information as well as log information specific to each virtual device. Data was visualized as graphs with multiple possible data sets on each graph. The reports were available on the system itself, and could also be emailed to various subscribers. The most interesting aspect of the reports were simply that we had an excellent report based on rich datasets from a database which was on the system itself. We innovated by trying to show the user useful information in a way he could then act on it to tune his policies. |
 |
|
These are some of the chicklet icons which I designed. These were intended to brand and identify each of the Virtual Devices. This scheme worked well, as it was easy to tell each device apart and each device started to have an individual feel. Initially there was a chicklet to describe the organization that developed each device, and also a chicklet to describe the functionality of the device. Eventually, only the functionality chicklet remained. |
 |
|
These are some early sketches of the interface that I did. Here you can see some early visions of what the rack was to look like. You can also see what the faceplates of the various devices might have looked like. Finally, you can see a more detailed view of the controls of one of the devices. Many iterations were done after each sketch, but sketches were the critical starting point. |