Samar Distributors
monthly Flyer workflow

After designing two separate catalog generators — one allowing no user-guided design, and one that required entirely user-specified design — I began working on a method to combine user guidance with an intelligent layout algorithm. Once that was done, I needed to wrap it all up in an easy to use interface that even the most non-technical people in the company could use.

To understand this project, I must explain that our company published a 12 - 16 page flyer for our customers every month. Each page usually held a specific type of content, with many manufacturers on that page. For example: July 2007 > Fans Page > Lasko fans > Standing Fan

PREVIOUS PROCESS

The previous method for defining editorial content was to literally cut-up and paste previous flyer pages, assemble a rough mockup of the new page layout onto a large sheet of paper (indicating sizing changes to previous items to fill space), and write in details for new items. A designer would then copy from previous layouts and move all the items around to fit the available space.

Issues with this Process

Since new products were added frequently, the specific set of items on a page could change at any point before deadline. This provided only two options: a waterfall methodology where all design was delayed as long as possible so as to work with the most complete data possible, or an agile method where every change in data would be integrated into the layout. The waterfall methodology led to extreme crunch and less time for error checking (important for a manual process), while an agile approach led to constant revisions and discarded work. Either way, the designer was required to move and keep track of almost every element of every item on that page.

Back-End Development

As a stopgap measure, I had developed small InDesign scripts that would allow the designer to manually define and label the area for individual items, and then import those item's data from our central database, transferring the user's role from handling individual components to that of handling layout. That worked extremely well, but this new algorithm would be a layout engine for the entire page.

First, I needed to build a layout engine that would match the aesthetics of these previous, handmade flyers. Research led me to implement a Squarified Treemap Algorithm. 

The layout algorithm could handle any arbitrary assortment of items (although due to font sizes there was a limit as to what would be legible), so most of the front end interface concentrated on methods to create and define a flyer issue, its configuration of pages, and adding items from inventory to those pages.

Data Structure

As inventory and database structures for all items had already been established, only data structures for the Flyer needed to be implemented. A Flyers table handled storing the date and identity of the flyer, a Pages table joined to the Flyer table and a one-to-many itemOnPage table that handled the instance of an item on its page and it's particular price in each flyer.

Interfaces

The application itself was a stripped-down Microsoft Access Database with front end controls that pulled in data from a separate Access back end database. Once this front end database was opened, the user was presented with a list of flyers, and once choosing one, was launched into the Flyer panel.

Flyer Panel

This panel gave an overview of all pages added to a flyer. Pages had both names and page numbers that could be edited at any time. The ability to edit a page allowed construction on pages to begin early, before the entire layout of the flyer was decided.  Double-clicking a page would launch the Page panel.

Page Panel

This panel shows all controls for the adding and editing of items on a particular page.

As methods to add items was the core functionality of the system, I provided several different levels of granularity to do this, via the action groups on the left column (based on Windows XP Explorer).

Add Items Dialogs

Edit Item Details Dialog

When a user clicked "Edit Items" they would be presented with a long, single column of items, with editing enabled only on the Price field. This allowed a user to quickly tab through from item to item and key all of the prices. As this was now the most labor intensive part of assembling content for the flyer, efficiency in this element was integral to our massive speed gains. A toggle button at the top would allow all fields to be edited, in case a previously edited description needed to be optimized.

User Influence on Layout Engine

An important element of the algorithm Flyer Box Size has gone unmentioned up until now. As the squarified treemap algorithm is ultimately displaying unit sizes, my algorithm took into account custom weights for each item (with a default of "1"), allowing the user to give an item a proportionately larger box for a special deal or new item, or a smaller box for an old standard. Since the algorithm took the combined weight of all items into account to divide space, this was never treated as a 1:1 control for the layout engine, but only as an influence.