Six long years after Book Stacks Unlimited went live, and three years into the early days of both Amazon and eBay, a large segment of the population was still wary of making purchases online with their credit cards.

This was the climate when Pierre Fay walked into the Organic Online office in New York with a big idea. Pierre’s goal was to change the way people discovered and purchased fashion & prescription eyewear, moving from traditional brick and mortar browsing to a complete online experience.

I was assigned the project under the mentorship of Organic’s Chief Information Architect, Robert Fabricant — this was my initial foray into information architecture after shifting over from art direction at another interactive firm.

The learning curve was steep, but exciting — it was my first time designing a search and discovery mechanism around SKU-based inventory, which was rich with descriptive attributes that could drive not only matches to queries, but enable our frame advisor to bring back personalized results. With Robert’s direction, and the amazing collaboration with the broader creative and engineering team at Organic, I settled in for an interesting ride.

Defining a Brand

We started on the ground floor, as the brand experience had to be developed from scratch through rounds of copy, image, and narrative exercises with Pierre. Fanny Krivoy and the visual team led that process while Robert presented our ecosystem concepts to Pierre through conceptual diagrams. As we garnered consensus on the architecture, I defined the organizational principles, recall methods, hierarchy in the interface, navigational affordance, widget schematics, etc.

Web design challenges in 1998 were plenty, but the most ubiquitous, regardless of project type, was the limited resolution display — more than 70% of the market had 800×600 px wide displays or less. Presenting information within such limited real estate available was an ever present challenge. It not only impacted the structure of the active elements in the interface, but influenced how much white space we could used to compensate for crowded interface.

**Home**

Fashion forward brand language with clear paths to features.

Information Architecture & Visual Design Collaboration

With boutique focus on one retail object we centered the homepage around specific frame elements, and then visually divided global navigation between those features and secondary support locations. Settling on nomenclature that resonated was crucial, as we were transitioning customers from their mental model of engaging in real world shopping habits to an online experience that simply wasn’t the norm.

The Personal Collection was designed to impart a high-end feeling of a luxury brick-and-mortar service with language cues that consumers might experience in person, along with all the features necessary to manage and sort the collection.

Before time on page was an understood analytics term, we aimed for site stickiness. This may not seem pertinent in the retail world, as the ultimate goal is to convert purchases, but stickiness also occurs when users move from one interesting product to the next in their purchase lifecycle, and the more stickiness, the great the chance for conversion.

As the user made their way to a frame detail screen, we featured the product image prominently with clear affordance around the frame to find similar frames by characteristics. While we didn’t have the capability to present other frames dynamically via collaborative filtering, or even an inline co-occurrence display driven by attributes, we knew that prominently exposing frame attributes was a simple way to spark secondary discovery.

**Frame Detail**

Clearly presented, including structured object attributes

When we began working on the most compelling form of discovery on the site, the Frame Advisor, Pierre expressed that he wanted something remarkably different, so different is what we targeted.

**Frame Advisor**

Esoteric, visual, and unique, all Eyeweb brand traits.

I began by sketching a linear narrative, using multiple choice questions centered around the notion of style and functional preferences, which leveraged the same set of frame attributes exposed on the detail interface and personal collection. As the user answered the questions, the recommendation engine would queue up a set of frames.

Our visual designer then took that architectural framework and evolved an interface on top of it, shifting the explicit nature of the questions and answers into representative visuals. The images used the same grid that was established across the site, and the logic of the visual differences mapped explicitly to sets of SKU attributes. As the customer moved through the frame advisor by making visual choices that aligned to their personal style, the result was compelling. If this were designed today, I’m positive that the experience would hold up to the times.

In Store Kiosk

Functional purpose and a novel curiosity.

The in-store kiosk was a task-based interface that precisely mapped pupils, space between the eyes and width of the nose. We also took into account environmental considerations, as the user would be engaging in public. We honed in on a simplistic interaction model and interface, with zero extraneous copy or features so that any shopper could successfully use it. The last thing we wanted was visible frustration from the least tech savvy users, surrounded by other potential customers.

We leveraged patterns from the site for both brand and navigation consistency, and designed a simplified mechanism for dragging measurement points into position. The step-by-step process was clearly labeled, providing easy to find navigation to move forward and backward in the process.

**Online Fitting**

The sell is that look in the mirror.

Once their likeness was captured, from the comfort of their home the customer could fire up their dial-up modem, and perform an online fitting of a frame from the complete Lenscrafters collection, which was in the thousands of SKUs. The interface positioned their measurement-precise headshot alongside their personal collection, and a feature to choose from a multitude of lens colors.

Then it was off to the checkout flow to complete the sales transaction.

Back in the 20th century we launched a soup-to-nuts novel brand and multiple form factor retail platform experience that comprehensively presented an engage, browse, discover, manage, and fulfillment service, leveraging the magic of cloud immediacy to provide a compelling experience.

All in less than 12 months.

Silicon Alley circa 1998; the halcyon days of agency product design and development.

Creating a Retail Brand Experience From Scratch

Converting Bounces Into Revenue

Navigating Misinformation: The Architecture Behind Media Matters for America