Wealthfront hosts October’s Femgineer Forum

October 24, 2013

We were really happy to host this month’s Femgineer Forum here in our office. Karen Catlin gave her insightful presentation on how to create and maintain one’s “street cred”: ways to document your successes and help people find out about your strengths whether it be in the open source community or on LinkedIn.

The line of attendees was greeted by Wealthfront employees and signed in using a custom-built iPad application—guests were encouraged to say “Hello” to everyone and their names appeared floating on a visualization on the walls. Live tweets to #femgineer were displayed above the audience. While waiting for the presentation to begin attendees could browse a selection of pages from our newly-released ebook.

Custom Sign-In App

We wanted to do something a lot different for this event than a typical sign-in sheet. Our iOS developers whipped up an app that we installed on a couple of iPads running iOS 7. Guests were encouraged to enter their name and a greeting message. (More on that later.) The JSON blob was beamed up to a small pub/sub mechanism we built atop Google App Engine.

Multi-Screen Attendance Visualization

Functioning as a kind of interactive art piece, guests saw their names appear as floating color bubbles and their greeting message popped up as a banner at the bottom. The 4 large TV monitors appear to be one very large visualization creating a canvas 8000 pixels wide by 1080 pixels high. This was a trick. But we can disclose how we did it. :)

The screens are actually powered by 4 separate Mac Minis all running web browsers. Each subscribes to the pub/sub framework listening for events. Additionally, one of the browsers has an extra tab open in the background running what we call The Commander page. That page is listening for JavaScript objects in the format of:

{
channel: "attendeeSignIn",
data: {
  firstName: "...",
  lastName: "...",
  greeting: "..."
  }
}

The Commander works as a synchronization mechanism and data tracking service. It reformats the data and broadcasts out the first name and last initial of the guest, their greeting message, the X/Y location where their name bubble should be drawn, and how fast the bubble is moving.

{
channel: "addPerson",
data: {
  name: "Jane D.",
  greeting: "...",
  x: 4200,
  y: 510,
  xInc: 3.2,
  yInc: -1.5
  }
}

All 4 Minis hear this new packet and each draws their own copy of the name bubble. Then the bubbles are moved in unison at 10 frames per second. To the viewer it looks like the bubbles magically float across the gap between the TVs.

Pub/Sub Framework

The technology that drove the whole visualization we nicknamed Skywave. This version is built using Google App Engine’s XMPP service. Each instance of the web browers on the Minis open a goog.appengine.Channel() and are able to send and receive messages instantly. A hosted Python service we built answers to XMPP requests and is able to broadcast out to each registered client that same packet.

Internally at Wealthfront we have a similar version of Skywave running atop a similar real-time message framework. This lets us drive visualizations and updates to the graphs displayed on the TVs. In this way we have a very large visual dashboard that lets us know how key metrics of the business are doing as well as monitoring the health of the system.

Tweet-o-Vision Live Twitter Feed

Another star of the evening’s visualizations was the live Twitter feed that scanned for #femgineer, #femgineerforum, and @femgineer every 10 seconds. We built a small Java app based on Twitter4J which would format a JSON message like:

{
channel: "tweet",
data: {
  author: "...",
  author_image: "...",
  content: "..."
  }
}

A cluster of 4 TVs powered by an Ubuntu tower with a powerful graphics card also ran a web page listening in on the Skywave framework and rendered the 4 latest tweets, each in a different quadrant.

As a bonus, we enabled the ability to embed GIF images for one (just one) of our frontend engineers much to his delight:

Design Engineering

We care about design a lot. We worked tightly with the Design team here months ago to put together some fun postcards to promote the event, then a simple web page, some bottle opener giveaways, and then the iPad sign-in app: