The Challenge…
The project in this case was a client’s mobile advertising platform that allows mobile website publishers to monetize web traffic through contextual ad display, a service handled entirely by the client’s application servers. Using this web-based application, mobile content publishers can sell advertising within the different areas (zones) of their mobile website or their network of mobile websites. My challenge was to design an interface that would allow publishers as users to easily prioritize those ad campaigns relative to one another with extremely granular control. Fine priority allocation control allows “tiered” pricing structures for publishers who wish to turn mobile web traffic into revenue.
The user requirements in this case were presented to me in the form of Balsamiq wire frames suggesting a hypothetical information design:
However, this wire frame prototype wasn’t designed to nor could it provide a complete picture of the user requirements, so with a productive teleconference on the subject of priority allocation of ad campaigns and some helpful input from the engineering team, we established a better understanding of the needs of the users and some rough coverage of anticipated frequent use case scenarios. It was complicated and granular, full of esoteric concepts, but the research was worth solving the problem.
The Solution
In order to give publishers a simple user interface allowing them to prioritize their advertiser’s campaigns, I logically separated the attributes of ad campaigns as a cascading interaction pattern, vaguely similar to Mac’s finder window in column mode.
(Click the image below to view the full-sized interface prototype.)
The design you see above has the potential to enhance the user experience in the following ways:
- Moving from left to right, the information drills down intuitively from high-level to fine and granular while maintaining the user’s static view of their orientation within their entire collection of campaigns and data
- Campaigns are sorted in a single mouse action, with a toggle provided for ordering the sorted results
- Preattentive variables such as type, graphics and colors are all used to perform work in this interface:
- Bold, italic and disabled-gray type styling inform the user of orientation (selected campaigns and placements) or boolean evaluations (network node has contents:false)
- Graphic icons identify priority allocation type
- Color-coding quickly conveys performance status
- Inline editing of options minimizes disruption of the user experience
- Animated “working” gif image for inline editing reinforces the idea that the user is making changes
- All configuration can be completed from this single view
This new prototype provided coverage for most of the use case scenarios established during requirements discussions with the client, and it underwent a series of subtle iterations before going to production. Deliverables were furnished as DHTML and images.