» ,

Microsoft Advertising Audience Insights Tool

Microsoft Advertising’s Audience Insights Tool

Microsoft Advertising’s Audience Insights Tool

I have done three Silverlight apps for Microsoft Advertising so far. This was the first. It’s a tool to help advertisers hear what people from different audiences think about various online activities.

Vox pops to help advertisers

Vox pops to help advertisers

 

First step. How to present the info?

The simplist way the look this was to follow the users’ steps through the data going into the tool. I could see that it was divided into four levels.

  1. Select an audience group
  2. Refine the selection with available options
  3. View the results list
  4. Select a vox pop from the results

These levels are easily divided into four panels.

  1. A top level menu
  2. A panel with selection tools relevant to the top level menu item selected
  3. A large results panel with thumbnails of the videos
  4. A selection overlay with a close button to return to results
Early sketch with pen and paper

Early sketch with pen and paper

After sketching out a number of potential solutions two ideas were presented.

  1. A conservative approach
  2. An innovative approach

 

Conservative

The main aim here was to match the design as closely as possible to the Microsoft Advertising site and use tools already familiar to the user. For a bit of wow the results could be shown with an Aero style slider.

 Conservative design

Conservative design

 

Innovative

The innovative selection tools

The innovative selection tools

In the alternative I designed new selection tools tailored to the app. They are a hybrid of checkboxes and a list box. You can click the catagory buttons and add options. You can see all your selections as they divide the available space. Only the deselected options are shown in the pop-up list. This is much more versatile than using drop-down lists. It also takes up less space than using loads of checkboxes or radio buttons. This is the chosen design.

 

Colors

The final app uses shaded tones of the Microsoft Advertising red. It was a good call by Microsoft as it looks brilliant and it’s bang on brand. Originally I colour coded the selection tools. This is how it looked.

The original colour wheel was switched to a brand friendly red pallete

The original colour wheel was switched to a brand friendly red pallete

 

XAML, C# and all that jazz

I love using Expression Blend. It’s a great layout tool. Before starting though I like to map out the app in OmniGrafle. Yeah, Mac and Windows. I like to mix it up a bit. I could have used Visio or Dia. I’ve been using OmniGraffle for years though, so it’s the most obvious choice for me when creating diagrams. Notice how it’s really a summary of the user controls. Isn’t XAML grand?

Diagram of the classes and user controls

Diagram of the classes and user controls

All the data is in XML. The name of the xml file is passed into the xap via InitParams. This avoids caching issues when updating the XML. The XML also includes all the text. This means we can change the language by swapping the file.

Here’s a list of tools I used.

 

The Microsoft Audience Insight Tool can be found on the Microsoft Advertising UK site. For those of you with the Silverlight 4 or higher plug-in here’s a link. :-)

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>