Close

BlueCoat Sky UI

initiation

The HTTP 1.0 protocol limitations with the original PacketShaper device prevented the 11-year-old HTML UI from being extendable and maintainable, causing major usability issues.

position

We will:

  • improve various areas of the software to retain the loyalty of the existing install base.
  • utilize existing knowledge base of former Packeteer’s UI team which never came through to the next management level.
  • apply the latest technologies to GUI development.
  • enhance the traffic classification capabilities of the PacketShaper.

action

I took leadership of this project and designed and developed the brand new UI on Adobe Flex. I completely owned the visual design, layout, graphical assets, and UX, making sure it was simple and easy to use. We showed the prototypes to our client and received a very positive response. The new Adobe Flex-based UI for the PacketShaper device line was a modern alternative to the legacy UI.

This project gathered together practically all Flex code written for the PacketShaper by the UI engineering team: statistical graphing, new version of QoS (policy manager), and VoIP console. We made a special accent on VoIP traffic and added a network traffic classification based on the type of VoIP codec, which was a brand new feature.

Because the Flex framework offered a rapid development cycle, I was a lead UI developer for this project.

 

process

Brainstorming sessions involved sketching future UI concept on the whiteboard.

Chose colors, which matched the corporate styles and guidelines.

The company decided to name this UI “Sky UI”. It was a breakthrough, because this new UI not only improved usability, but also offered a robust functionality, which didn’t exist in the original UI, and was accessible only through CLI commands in the command line.

The new UI screenshots:

 
 

result

Product managers were happy with the new UI and BlueCoat started deployment of Sky UI to the PacketShaper devices. This redesign boosted sales for BlueCoat: over the next two quarters sales increased by 50%.
The marketing team even made this video:

If you are curious how the PacketShaper device works overall, and how my UI is used in a real user scenario, then watch this video: