ISO50

It’s been such a long time since I posted! This is largely due to the fact that I’ve been head-down on my company’s most recent product, UberConference, for the last few months. UberConference is basically a visual interface for audio conference calling. You can see who’s talking, who’s on the call, and control it completely via the desktop (and soon mobile) UI. We recently won the TechCrunch Disrupt Battlefield competition — you can see our pitch and presentation here.

I haven’t written a process post in a very long time so I wanted to talk a little bit about the UberConference process here. I’ll talk about the UI development as well as the video work. Keep reading to see the rest of the process. You can follow me on Twitter here for more frequent updates. Oh also, for a good time, call (424)-226-3111.

At Firespotter Labs, we work on a few different things. Nosh was our first, followed by the parody Jotly, then Nosh List, and now UberConference. While our work in the restaurant space has been successful — we seated our 1 millionth diner with Nosh List a week or two ago — a majority of our team comes from Google Voice, so getting back into telephony was a natural transition for our company.

When the project began in September, our resources were split over the various other products we were working on at the time. I was working primarily on the first design of Nosh List and a redesigned GUI for Nosh (which we’ll release soon hopefully). Since I was busy finishing up Nosh List, I hired a contract designer to work on UberConference. You may remember the search. I hired Chris Gulczynski and he did some preliminary UI and branding work on the app. Some early screenshots below.

Early UberConference Mock - Dashboard

Early UberConference Mock - Conference Page

Eventually, we released Nosh List and my other projects finished up, so I was diverted back onto the UberConference project in January. At that point, much of the site had already been designed. The conference page was in good shape — the circular control panel was a particularly nice touch — but most of the rest of the site’s pages and interactions were in need of a revamp. It can be really tricky to change the primary designer mid-project, but that was unfortunately what we had to do.

When I picked up on UberConfernece, there was a long process of deciding what needed to be done. Besides the conference page, there are a lot of pages that flesh out the experience, and these needed to be upended. We had been married to the concept of a ‘dashboard’ page for a while, and it became clear that it just wasn’t necessary. I settled on stripping the site down to three main pages: conferences, contacts, and profile. This involved reworking the main content areas as well as the navigational structure.

Final Conferences Page - Full Content

Final Conferences Page - No Content

The eventual design for the conferences and contacts pages had each divided into two columns, using dynamically sized modules to hold the content. Since there are so many potential content scenarios, this seemed like the best way to have something that looked reasonable in most of the situations. It wasn’t an easy task to create a page that made sense full of content, completely empty, and everywhere in between. Sometimes I miss the static nature of print design…

Final In-Conference Page

Participant Detail Overlay (In Conference)

The conference page itself is where you have your visual interface for your call. All of the participants are displayed in circles with call controls available if you’re the conference organizer. I really liked this part of the early designs. The circular controls were a great way to eliminate clutter, while still making them easily accessible in a couple clicks.

One of the main features, being able to see who’s talking, wasn’t actually added on until late. I remember the engineers coming out of a meeting one day and saying “we have an idea…”. Crazy to think the product almost didn’t exist with such a core feature. We also added the ability to learn about the individuals on the call via various social networks. I really liked the design for this; while it doesn’t always look as fleshed out as I designed the ideal scenario, it’s still a cool way to quickly learn about the call participants.

Beta Splash Page (my living room)

Welcome Email Design

It’s easy to forget how many extra support features there are that need to be designed for each product: branded emails (countless!), password recovery, help and support, FAQ, blogs, about pages, terms of service, privacy policy, beta launch interactions, home page, email captures, share and referral pages, payment, account settings, not to mention marketing materials. It’s really insane how much more there is to design, even after the product itself is done and functioning.

When we decided to launch at TechCrunch Disrupt NY, all of the above did not exist, and so began an absolutely crazy couple of months. One particulary fun extra feature was the custom hold song I recorded. You can download it here if you like feeling like you’re on hold.

In April, the site was in pretty good shape, though there were still a lot of open feature requests and technical bugs. We use Asana for task management, and my cue was perpetually growing, regardless the pace I completed items. Despite this, it was time to start working on marketing materials for the launch. Since the launch was significantly more high-profile than usual, everything had to be tip-top.

Get More Page - Illustrations by Jon Wong

Around this time, we hired Jon Wong (yes! from ISO50) on as a designer. He came in at just the right time, and designed some truly excellent stuff for the product. You’ll see his illustrations scattered throughout the site (some above). He also did our tshirts and a lot of the marketing materials we brought with us to Disrupt. We both hope to ramp up our ISO50 posting again — been so busy! Jon is currently working on the redesign of our Firespotter site, which is really exciting, the site has been needing a makeover for a while now.

Filming the "White Room" video

Still from the White Room Video

Getting weird on the set

The first UberConference video project I undertook, which we’ve nicknamed the “white room” video, is actually still incomplete. The project spiraled into Chinese Democracy status quickly. I will complete it soon, just need to rewrite some of the voiceovers. Really excited to finish it though; the footage,shot with the Canon C300, looks terrific. I ended up making these other videos as backups since I knew I wouldn’t have time to complete the white room one.

The first was The Needs of Tomorrow, which is an imaginary learning show, presumably from the 70’s, about conference calling. I used footage from NASA tapes, as well as some old old old marketing video from AT&T to cut together this fake documentary on conference calling, and how UberConference saved the world from the horrors of the existing solutions. My favorite part of this one was the professional voiceover — it was great fun writing the script for such a cool voice. I edited in Final Cut and cut the sound in Logic.

While filming the white room video, we also shot a secondary video in the office space of the soundstage we were on. This one was written and shot on the spot, off the cuff, mainly for the purposes of our Techcrunch presentation. It ended up turning out pretty well and we’ve found people can really relate to the painpoints conveyed. A lot of people were visiting on the set of the white room shoot, so Phil and I coerced them into acting in these littles shorts.

The final video was the product walkthrough, which I did in emergency mode the day before our presentation. One way to make a video like this, is to use Screenflow and record the actual product as you mouse through it. Unfortunately, since my demo required approx 25 people to be on a phone call, I had to build the product in After Effects and basically fake all of the clicks and interactions. This sounded easy at first, but quickly turned into a giant hullabaloo of a project. The simplest animations on our site took a little while to recreate in After Effects. Once they were all done, I had to time and record a mouseover with Screenflow to sell it fully. I think it came out pretty good, and hopefully you can’t tell it’s an After Effects build.

That is a really high-level overview of the project’s process. I could probably write an equally long article of this length about each specific aspect of the site. I’ll probably do a post on the white room video if I ever finish it, but for now, check out UberConference and let me know what you think! We’re really excited to have it out there!