Yesterday, we announced the integration of Twitter’s Ads API with our Social Operating Platform, making Unified one of only two companies in the world with Ads API access to all three major social networks – Facebook, Twitter and LinkedIn.

This integration was much more than just adding a few form fields and API calls – we thought hard from the ground up about how to create the simplest and fastest interface to manage thousands of ads across dozens of accounts.

We’re really proud of the Twitter product we built over just eight weeks, and excited to continue building the absolute best product for our customers. Today I want to share three fundamental principles that have guided our design and engineering process so far.

Design to match data structure

Advertising data is like a set of Russian Dolls – deeply nested data structures that in their simplest form look something like:

When we started prototyping, the goal was for our product to help customers understand this information hierarchy and use it to their advantage.

In order to reflect this hierarchy in our design, we hacked around CSS, HTML tables andbackgrid.js to create this:

Each campaign row expands and collapses, clearly displaying the full hierarchy and interface without navigating back and forth between pages and views. Analytics, editing, and creation all happen from the same interface, helping you make smarter decisions about your campaigns.

We’re really excited to continue refining this approach and finding the best design pattern for nesting and mixing tabular and non-tabular data like this. (if you have ideas, we’d love to hear from you)

When editable data is visible, it should be editable in-place

If I can see my campaign budget, why shouldn’t I be able to click on it and change it right away?

When we looked at other designs for editing ads, one anti-pattern we found was a reliance on multi-step wizards to make simple changes. Wizards are ideal for guiding new users through a process, but using them for editing is a crutch.

By allowing quick Excel-style edits, we were able to reduce the time it takes to make changes down to less than a second – just click, edit, and hit enter.

Confirm success and explain failure

When an advertiser has hundreds of thousands of dollars at stake, it’s absolutely essential to provide them with confirmation that each action they take in our application succeeded or failed.

We do this by hooking messenger.js into every action and displaying a small notification in the bottom right corner of the browser window:

As a user, you shouldn’t have to wonder whether your request to the API worked, or whether your spotty 3G connection sent your changes – you should always have full visibility into both success and failures.

Looking to the Future

With a solid foundation to build on, we’re excited to keep building and focus on solving the challenges that our biggest advertisers face, from multivariate testing to automated targeting and beyond. Expect to hear more from us here on the blog as we keep building and making it easier to create and manage Twitter campaigns.