Olapic Landing Page for all 4 brands of the Columbia Family

When Columbia decided to re-launch all of its sites as responsive, one objective was to collect and present user-generated content. Olapic—a 3rd party social media platform—was chosen to achieve that.

To make development easy and efficient, it was important that the Olapic landing page provided consistency of design and user experience across the 20+ sites in the Columbia family of brands.

One step in ensuring that consistency was that the creative and development teams collaborated to create two new standardization tools: (1) a horizontal grid template overlay, and (2) a CSS typographical style guide. We designers adhered to them during our design phase, thus achieving the desired consistency of design.

Developers, for their part, took a second step and dropped the site’s “back-end bones” into Demandware’s Site Genesis.

Role
For this UI project, I partnered with a colleague to design the first site, using the new template overlay and typographical standards. After that first site design was approved, I skinned the remaining sites using the same design.

Tools
_ Photoshop
_ Template overlay
_ CSS style guide

Results
Creative was pleased with the look and feel of the pages. Development applauded the fact that we’d designed within their constraints, and said that the new standards totally streamlined the development process.