design: twisted pair design annual 2007

Our newest product is the WAVE Mobile Communicator. It turns a standard WiFi-equipped PDA into a multi-channel radio. The application is skinnable and will likely include both black and silver skins I created for it. The silver skin fits in nicely with our other new communicator interfaces. The black skin works outdoors on PDAs with poor backlighting, and is perhaps a bit more stylish and current. There are some other views not shown here for channel selection, login and authentication, and instant replay. It works pretty well; when we show it off at conferences everyone wants to play with it, and nobody wants to hand it back. It should be out in 2008. I did the interaction design work and created the specs to help the developers, then did the production graphics plus some Flash prototyping so that we could try out different control schemes.

We first tackled this custom development project back in 2006. I reworked the interface in early 2007. The original software client took up too much screen real estate, so I concentrated on reducing the overall application footprint. I also worked on improving the look of the skin and controls. Our visual goal with this interface was to make the software resemble several related hardware products that have found acceptance with the target customers. The Java-based application runs in a web browser. There wasn't much actual software development this time around, mostly just the graphics refresh and some related XML work. Watch for the project launch in 2008.

I spent several months redesigning the WAVE Dispatch Communicator. We'd had requests from the field for additional capabilities, plus we had a good deal of custom work to integrate. All of us on the team wanted to improve the product and see it really take off. The redesign was a big job. There were dozens of versions of some modules, many iterations through the symbol graphics, and several large specification documents. Our team included developers, product managers, and customer-facing engineers. Alas, a business shift mid-year coupled with development resource constraints shelved this redesign project. We took away symbols, skin themes, and some control patterns though, and are making use of them in other projects. You can see a family resemblance between the channels list (on the left side of this image) and the WAVE Mobile Communicator at the top of this page.

Our scaled-down decision was to reskin the application and include a handful of ideas from the redesign. We kept the phone panel layout and new symbols. We rolled in the custom code. The channels retained their original layouts but got new controls and graphics. The panels below the channels were placed into tabs to save space. The channels list (on the left) was allowed to span the height of the application using the existing layout. The changes were modest, but the visual refresh plus little design tweaks improved the application. We retained the original green skin graphics as an alternate skin. Look for this version to ship in 2008.

I get a kick out of thinking visually about abstract concepts. During a few days of downtime between projects I drew symbols for all the different WAVE system components. There seemed to be endless herds of assorted WAVE parts once I started trying to represent them graphically. These won't show up in our end-user software, but might eventually in our configuration system. Our training coordinator is really pleased to have them for class materials, and our business people use them in presentations. I saved the Illustrator images as SVG files and then turned them into Visio templates to share with the crew. See if you can match the symbol up with the component. On the top row we have the WAVE Mobile Communicator, channel, interface, audio files, cross-mute groups, and audio filter. Gateway, dialplan, and install software span the second row. User profiles, radio channels, multiplex trunk channels, and reports are in the third row. System applications, zones, system settings, and recording channels are at the bottom. There are many more where these came from. All owe credit to an original set of device symbols created by designer Tracy Halliday.

To create the application skin graphics, I mainly used Adobe Photoshop. I drew most of the symbol graphics in Adobe Illustrator; other images came from existing dingbat fonts. I used both IntelliJ Idea and Eclipse to position controls in the Java-based applications. I prototyped at the wireframe level using Visio and PowerPoint, and used Flash for higher-resolution prototypes on the PDA project.

About Twisted Pair Solutions

Twisted Pair Solutions is a gigantic worldwide firm with about 40 employees scattered across the continents. We create software that uses standard IP networks to solve communications interoperability problems. I'm the user experience designer on the product team. Our office is on the Seattle waterfront next to the Olympic Sculpture Park.