Mike Propst User Experience

AOL Design Tool

Enabler for HTML folks to build powerful websites

Roles User Research Information Architecture Interaction Design UI Design Front End
Tools User Interviews HTML/CSS Photoshop Engineer Collaboration

The Design Tool allows front-end developers to build and maintain sites without the need for PHP or database skills. Its features allow for complete customization and dynamic, data-driven sites that would normally not be possible for someone with only HTML and CSS skills to build. Designers can dynamically change a site’s content through “layers” based on time and date, geographic location of a site’s visitors, specific categories or tags, and more. This allows for more targeted content and advertising. Other features included simple A/B testing and development sandboxes for safe redesigns.

The model for Design is actually an abstraction of the way the code works under the hood. My perspective, working closely with the engineers and knowing the thought behind the code structure, gave me a unique angle on the information architecture.

I consider the Design Tool to be one of my proudest achievements. It empowered a smaller, more design-centric staff to operate more cheaply and with less frustration toward launching and pushing updates to sites, all in an environment that was formerly unfriendly to rapid deployment.

Selected Images

Views Listing

A snapshot of all a site's “views,” which are not views strictly in the sense of an MVC, but similar — they essentially translate to pages.

Layers

Layers are variations on a site's Views. They can be scheduled based on time, visitor's location, or tags and categories. This allows different designs to be applied, unique modules to be placed on each category, and advertising to be sold using highly granular criteria.

Module Editor

Without writing any PHP or database queries, front end developers can quickly build dynamic content using proprietary %tags% alongside standard HTML and CSS.

Single View Editor

Modules can be dropped onto a page in “hotspots” (which are defined in standard HTML files). On more complex sites, the accuracy of representation wasn't always great — but it was self-explanatory enough that even non-designers often changed out ad positions.