2012-2016

When a photo becomes a present

I led the UI design and UX strategy for a custom photo builder migration from Flash to HTML5 and designed the system logic that made every product in the builder a variation of the same thing.

When a photo becomes a present

Problem

PNI built photo product experiences for major retail clients: Costco, Sam's Club, Asda, and others. The builder needed to support everything from a simple 4x6 print to a multi-page calendar with per-day customization. On the surface, completely different products. Underneath, all variations of the same baseline components. But no one had mapped that, which meant every new product and every new client engagement started from scratch. The Flash-to-HTML5 migration made the gap harder to ignore — and created the opening to fix it.

My role

Lead UI designer and the only person thinking systemically about the product logic across the full builder scope. I directed a four-person asset production team alongside the design work. PNI served multiple retail clients with different branding but identical underlying product logic. My job was to design the builder and make that shared foundation visible and usable for everyone working within it. Midway through, PNI was acquired by Staples, and the photo builder became the foundation for the Staples photo centre experience using the same system for a new client, proving the Playbook's premise that the underlying logic held regardless of branding.

Three decisions that shaped the work

Map the logic before designing the interface

I documented every product from simplest to most complex, found the shared components underneath, and wrote the UX Playbook. Not a style guide but a map of the system logic that let any designer or client understand how the builder worked across every product type PNI served.

UX Playbook — product logic map across builder product types

Separate behavior from appearance

Alongside the Playbook, I created a functional spec that defined how every element in the builder behaved before any visual design was applied — how image and text boxes populated, how they flexed across product types, what happened at the edges. It kept visual and technical teams working from the same expectations.

Functional spec for builder element behavior

Be deliberate about what doesn't translate to mobile

The HTML5 migration meant everything running in the browser for the first time. Some features were too complex to perform well on a small screen. Rather than cramming everything in, I made explicit decisions about what to keep, what to simplify, and what to cut without breaking the experience for customers who expected the same result regardless of device.

Photo builder desktop interface across client storefronts
Photo builder mobile interface

Outcome

The builder shipped as PNI's first fully responsive photo product experience and it scaled across every client PNI served such as Costco, Sam's Club, ASDA, and eventually Staples US and Canada as it acquired PNI Media not long after.

systems thinkingproduct builder uxmigrationresponsive designdesign leadership