Summary:

Results:
· 2300% faster booking experience, compared to industry-leading benchmark.
· Reduced a basic order from a 12-minute process to roughly 30 seconds.

Type of Project:
Sales admin tool for banner campaigns/ad-serving.

Delivered:
Full version one of new software, from scratch.

Length of Project:
1 year.

Team:
Joel Marsh, a UI developer, 4 in-house developers, and the CEO/founder.

Joel’s Roles:
Research, planning, UX & UI design, and some minor front-end coding.

Fun Fact:
This project was developed completely in the beta version of Microsoft’s Expression Studio, which was like Adobe Photoshop and Flash at the same time, but for .Net environments. Needless to say, it wasn’t awesome.

Context:

It was 2007.

Adtoma was a small company that was built up by re-selling software made by another company. That software made it possible to book banner campaigns on large content-oriented sites, like online newspapers. That might sound like a straight-forward sort of thing, but you’d be amazed how high-tech it can be.

Every time you see a banner ad, it has been chosen from many other banners, based on your reading habits, behavioral patterns, the time of day, the number of times you have seen that banner already, what other banners you have seen, and the technology you are using to browse the website. And the server only has a few milliseconds to make that decision and get the banner out to you, otherwise the loading time is too long and visitors leave.

But before all that happens, a salesperson needs to sell the space for that banner. It’s a dirty job, but it basically finances the internet.

The ad-serving software has to handle both the sales process and the technical details, and Adtoma believed we could do it better.

After designing completely new software from scratch, our sales booking process was 2300% faster than the best competitor benchmark available. Theirs took about 12 minutes and ours took about 30 seconds.

To achieve that, we needed to solve two unique problems, explained below.

Problems:
1) Slow booking process.
2) A lot of manual housekeeping.

At the time, all competitors used similar wizard-style flows to book campaigns, and none of them were particularly fast or smooth. We benchmarked the best one at roughly 12 minutes to book a simple one-banner campaign. That might not seem unreasonable to people who grew up without the internet, but to us that was an eternity.

More importantly, things happened during those twelve minutes that destroyed business value. The sales person couldn’t stay on the phone. The customer had to wait. And think. And lose excitement. Not good.

We thought a 12-minute booking flow sounded like a symptom of something that was too complicated, but that was the best in the industry, so we looked into it.

After a little research we also discovered that a human being (or at least, a Sales Manager) spent an entire afternoon every week to evaluate something called “inventory”. Inventory is the amount of banner impressions the site could sell (i.e., all the banner spots, on all the pages that would be loaded by visitors in the future). The Sales Manager would look at which spaces had been sold and which hadn’t, and then tell the salespeople what to focus on that week, so they sold the right inventory.

And that information wouldn’t be reviewed again for a week!

Definitely too complicated.

Solution 1:
Turn numbers into colors

Inventory was handled in a spreadsheet, listed as big numbers. Lots and lots of big numbers. In a spreadsheet! User Experience designers have nightmares about that kind of thing.

Every cell in that terrifying spreadsheet represented something like...

We have sold 12,000 out of 134,550,000 available impressions for Banner A on October 1st. 
We have sold 5,400,000 out of 43,750,000 possible impressions for Banner B on October 1st. 

And so on.

There could be hundreds of banner spaces or packages to sell, and weeks of inventory numbers. It was ridiculously hard to use.

Seriously, a spreadsheet!? Something had to be done.

First, we tried representing everything as a percentage of what inventory was left. So Banner A had sold 0.0089% and Banner B had sold 12.34% of the available inventory. It was a little better, but in a spreadsheet with 2000 cells, it wasn’t exactly light reading. We needed something that allowed the user to see what they should sell, in a few seconds.

We needed something visual. 

So we mapped the percentages to a color spectrum: 0% sold was green, 50% sold was yellow, and 100% sold was white. Oversold was dark red, like blood in the water, so everyone would stop selling it. Savages.

The result: a simple heat map!

Patterns became obvious. The whole inventory could be understood at a glance, for weeks of data at a time. Every salesperson in the organisation could analyse all of the inventory, and one click would take the information for a banner product on a particular day and add it to the order.

And the admin work? It disappeared completely. Everything happened in real-time via the software instead, and that Sales Manager is now a more sane individual. 

But we weren’t done yet.

Solution 2:
Add a third dimension.

To complete an order, a user needed two things: the heat map to choose the banner product they wanted to sell, and the order details to edit the rest. And they needed those things at the same time.

The only bad thing about the heat map was that it needed a lot of space to show the data. Nobody likes clicking teeny tiny little table cells.

Whenever a user added something to the order, they needed to make adjustments to a lot of small details which effected price. So it was a lot of back-and-forth between one detailed screen and another. Loading those screens over and over would have been the slowest interface of all time, and it was too much to squeeze onto a single screen.

What we needed was a way to load both sets of data once, and then switch between them really quickly, over and over.

So we made it 3D! 

By using depth we were able to have one window behind the other, so they triggered each other without even clicking.

Move your mouse to the top, Window 1 comes forward. 
Move your mouse to the bottom, and Window 2 comes forward. 

That’s it! Two sets of complicated information available at the same time, and effortless navigation back and forth. (It was actually a gesture-based interface, for desktop, designed before the first iPhone was released!)