AirClic account manager

Client: Sapient for AirClic

AirClic sells scanlets, a proprietary bar code format similar to a UPC code on a grocery item, and portable scanners. While a UPC code is linked to a database that tells the checkout register how much the item is, AirClic scanlets can be linked to url's or other online resources. For example, a person reading an article in a magazine scans the bar code within an ad. The next time they sync the scanner with their personal computer, they can access additional information about the item that was scanned.

the team
I worked with another information architect on this aspect of the project. In addition to the two of us, a visual designer, a site developer, and a project manager were also part of the team.

what made this project unique
As with many projects, the schedule was aggressive and did not allow for the time normally required for documenting a site of it's size, roughly 140 unique pages. In order to complete the project within the tight time frame, a completely modular design approach was used. In a typical design process, each screen is designed individually. With a modular approach, interface elements are standardized so that they can be quickly reused to save time during design.

Once process flows were completed for all the tasks in scope, a screen list was generated. Knowing approximately what would be on each screen , we were able to quickly identify a handful of screen types. The criteria consisted of a mix of visual layout, type of data or interaction, and task. We rough sketched more than half of the pages on the site. Each sketch was posted in our project room with other's that it was similar to. We settled on eight templates that covered approximately 120 of the pages on the site. These would make up our basic screen templates.

After the screen templates were relatively stable, we began to examine individual features and groups of features that were recurring throughout the site. We were also able to identify recurring elements that could be standardized across the site. Not every page fit within the modular system, but we were able to limit the number of unique pages to approximately fifteen.

Each page template had rules regarding what modules it could contain and the states that those modules could have. Each module or sub module also had similar rules. These items also had defined "inputs" and "outputs". This enabled us to define each screen with as little as a few bits of text and dovetail with the implementation.

The client was responsible for the implementation. Sapient delivered the finished designs and empty html pages. Throughout the design process, we kept in close contact with the engineering team on the client site to make sure that the modular system we were designing would fit with their technical architecture. Initially, they were skeptical, but they trusted us. As they began to see everything unfold, the value became clear and they were thrilled with what they got.

sample deliverables
task flow (pdf) - One of the simpler task flows, this shows the process for editing a user's profile.
screen template (pdf) - Much of the site consisted of entering information and displaying information previously entered. This template, the datablock, was used for this purpose. It shows the extent of the specification done for each page template. There is also a version of the template which shows an example page with the visual design applied.
Screen detail (doc) - This word doc uses the specifications of the datablock template and it's modules to layout this page that shows details of a user's account.

back to the work