Close

BlueCoat Sky UI

initiation

We had to solve HTTP 1.0 protocol limitations, the overdue and obsolete legacy PacketShaper’s UI with the major usability issues. The technical limitations prevented the 11-year old html UI from being extendable and maintainable.

position

We will:

  • show improvements in various areas of the software to retain loyalty of 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 a leadership of this project, and not only designed but also developed the band new UI on Adobe Flex. I completely owned the visual design, layout, graphical assets, and UX, making sure it’s simple and easy to use. We showed the prototypes to our client, and received a very positive acceptance.

A 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 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 type of VoIP codec, which was a brand new feature.

I also programmed front-end, due to Flex framework offered a rapid development cycle, being a lead UI developer for this project.

 

process

Brainstorming sessions included the future UI concept sketched on the whiteboard.
packetshaper ui whiteboard
Chose colors, which match the corporate styles and guidelines.

The company decided to name this UI a “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 UI, and was accessible only through CLI commands in command line.The screenshots:

result

It was a successful project. Product managers were happy, BlueCoat started deployment of Sky UI to the PacketShaper devices.
The marketing team even made this video:
And if you are curious how PacketShaper device works overall, and how my UI is used on the real user scenario, then watch this video: