design: WAVE Web Communicator

My biggest project this year was to design and build a new push-to-talk app that would run in a web browser. The WAVE Web Communicator is the result. This app connects to all the other Twisted Pair WAVE apps out there on mobile devices and desktops, as well as to IP phones and two-way radios. The app was built in Silverlight, which was challenging and fun to work with.

sign in personalities

WAVE Web Communicator sign in screen

We actually created a family of three different apps that use the same core codebase. All three encrypt your communications and require authentication before you can use them.

The WAVE Web Communicator is shown in these screenshots. This app has its own sign in screen, but it can also use integrated authentication from a cloud service or Active Directory if desired. I picked out different splash graphics for each of the apps – the Web Communicator is the one with the helicopter.

The WAVE Lync Communicator runs as a conversation window extension within Microsoft Lync. This lets an organization that has deployed Lync also use WAVE within their existing security and authentication structures. That app got a jet airliner for its splash image.

The WAVE SharePoint Communicator makes secure two-way communications a possible content option for incident managers, using SharePoint's built-in authentication. This app has been well-received by defense and security communities, who are heavy users of SharePoint. Somehow this one ended up with a freight train splash image.

channels and map

WAVE Web Communicator channels and map

After signing in, your channels are displayed. You can also see a map showing locations of others on a selected channel. The app has a little menu at the top. It's pretty simple, and there aren't a lot of fiddley-bits to mess with. It just works.

It's not easy to build a simple app, and I didn't do it on my own. I worked with a great engineer partner, Minh-Quan Tran (aka “MQ”), who created the MVVM client structures and helped to integrate my UI code and graphics. MQ was very patient and taught me a lot. Our broader support team included development and product managers and architects, and the network engineers who created the transmission protocols and servers.

My role was to design the interface, build it in XAML and C#, create and integrate the production graphics and color scheme, and hook up the UI with the lower-level application code that does the real work. I loved how this project challenged every aspect of my design craft and still stayed fun.

channels detail

WAVE Web Communicator channels detail

If you've seen other WAVE apps, like the WAVE Mobile Communicator for Android, or the WAVE Desktop Communicator, you'll recognize some common elements here. You can see who else is active on a channel. You can speak on a channel, and hear others speaking. You can adjust the volume and mute audio.

This app includes geopresence capabilities, so anyone broadcasting location data on a channel gets a little map pin in the presence list. If you click this, it takes you to that person's location on the map. The globe button displays or hides the map panel.

audio settings

WAVE Web Communicator audio settings

This view shows the audio settings screen, where you can select a microphone and test your speakers. Speakers are configured for Silverlight as a whole, outside the scope of our app.

We had three possible web-friendly technologies we could use for this app: Flash, HTML5, and Silverlight. Flash was interesting because nearly everyone already had it in their browsers, but the licensing requirements for back-end streaming audio servers shelved this one quickly. We have our own defense-grade audio infrastructure, built at considerable expense over years by experts, and didn't need Adobe's server-side components in the mix.

HTML5 was very interesting because of its native support for audio streaming. We knew it was early in the game, but perhaps the platform would be stable enough for us to use. When we looked into it though, imagine our shock that they'd left out microphone support. A push-to-talk application where you couldn't actually talk was less than compelling. Maybe we could go with HTML5 in a couple-few years, after two-way streaming gets figured out, but not quite yet.

That left Silverlight. We'd already done a big WPF project, and I liked working on XAML UIs, so we were familiar with the development environment. We knew we'd have challenges with memory management and browser security, but those seemed solvable. We wouldn't need any new expensive and complex back-end servers, and we'd have controlled access to microphones for two-way audio. So Silverlight it was.

map and menu

WAVE Web Communicator audio settings

The map was fun to work with. We used Bing Maps because they offered a Silverlight control that integrated easily into our app. People who broadcast their locations on a channel get a pin on the map, which tracks movement in real time. Fresh locations get a green pin, stale locations get an amber one. You can zoom out to show everyone on a channel, or zoom in to see someone close-up. The map can show street views or aerial photographs, and it remembers your zoom level and location if you switch to look at a different channel and then come back.

We always include some means in our apps to let people easily turn off location-tracking. We want location-awareness to be a welcomed capability for secure communications and situational awareness, not a threat to your personal privacy.

Intrigued?

Visit Twisted Pair Solutions' website for detailed product information on the WAVE Web Communicator. There's even a little movie.

About Twisted Pair Solutions

Twisted Pair Solutions logo

Twisted Pair Solutions is a gigantic worldwide firm with 50-some employees scattered across the continents. Twisted Pair creates software that uses IP networks to solve communications interoperability problems. I'm the designer on the development team.