Case Study: Eyeweb Platform

eyeglasses

No one uses the term e-commerce anymore because in 2015 online retail is a ubiquitous notion to the market. That wasn’t the case in 1998. Six long years after Book Stacks Unlimited went live and three years into the early days of both Amazon & 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 fashion & prescription eyewear—moving from traditional brick and mortar browsing to a complete online experience. Just months prior to signing with Organic, and aware of the hold that eyewear stores had on the market, Pierre struck a deal with Lenscrafters to host an Eyeweb co-branded kiosk, which would allow potential customers to measure their facial structure with absolute precision and then capture an image. The kiosk would then upload the image to the cloud (yes, we had “clouds” in ’98), providing the person the ability to choose from thousands of frames to try-on, and ultimately purchase, from the comfort of their home on Eyeweb.com.

Eyeweb try-on interface
Eyeweb.com try-on interface

I was assigned the project under the mentorship of Organic’s Chief Information Architect, Robert Fabricant, as this was my first foray into IA after shifting over from art direction at another interactive firm. While the work was much more intense in terms of thousands of objects tagged with unique SKU#’s and an eventual meta-data scheme that would drive our frame advisor engine, between Robert’s direction and the amazing collaboration of the Organic team, I didn’t feel completely out of sorts.

We started on the ground floor, as the branding was developed from scratch via a thorough brand exercise with Pierre. As the visual team led that process, Robert presented our organizational concepts through high-level diagrams, and as we garnered consensus, I defined the organizational principles, recall methods, hierarchy in the interface, navigational affordance, widget schematics, etc.

Eyeweb.com homepage
Eyeweb.com homepage

With a boutique focus on one retail object, Eyeweb allowed us to draw focus on the homepage to specific frame-centric features, and then divide the global navigation between those features and secondary support locations. Nomenclature is always important, but even more so in this instance, as we were transitioning people from the sensibilities of high-end, real-world shopping to an online experience. Areas such as the Personal Collection needed to impart the white glove feel they were either used to or imagined experiencing for the first time.

Web design challenges in 1998 were plenty, but the most ubiquitous—regardless of project type—were limited resolution display sizes (more than 70% of the market had 800×600 px wide displays or less). As such, we had to make strict choices when presenting information within the limited real estate available. This not only impacted the structure of the active elements in the interface, but it influenced how much white space we used to compensate for crowded aspects of the interface.

Search interface
Personal collection interface

As the user made their way down to the frame detail, we featured the product image prominently, building the actionable affordances of the interface around the frame itself. Before time-on-page was an understood analytics term, we shot for stickiness, which is an interesting prospect in the retail world, as the ultimate goal is to convert purchases. But stickiness can also apply to users easily moving from one interesting product to the next in their browse > purchase lifecycle.

While we didn’t have the capability to present other frames dynamically via collaborative filtering—or even a simple (in 2015 terms) in-line attribute co-occurance driven display—we knew that prominently exposing frame attributes was important for sparking secondary discovery, which increases the chance for purchase conversion.

Frame detail interface
Frame detail interface

When we began working on the most compelling form of discovery on the site, the Frame Advisor, Pierre expressed that he wanted something different, so different is what we targeted. My sketches began by crafting an explicit linear narrative, using multiple choice questions centered around style and functional preferences and leveraging the same set of frame attributes exposed on the detail interface and personal collection—to return a set of frames.

Once we left Planning and landed in Design, we took that architectural approach and built upon it, with our visual designer evolving the explicit nature of the questions & answers to be more of an esoteric, implicit input process, using the grid pattern that we established across the site, but in a way that completely relied on visual clues that mapped explicitly to the attribute answers to move the user through the recommendation engine. The result was compelling and different. If this was designed for 2015, I’m positive that the experience would become immediate, viral Facebook fodder.

Frame advisor interface
Frame advisor interface

Back to the other primary platform experience, the kiosk. We were working with a much more functional interface in this environment, as the user was operating in public and needed to target specific areas of their face for the online system to correctly prep their image for the try-on interface. We needed to create an overly simplistic interface, with zero extraneous copy or features. The last thing we wanted was visible frustration from the least tech savvy users, surrounded by other potential customers.

We carried through the design patterns from the site for both brand and navigation consistency, and designed the java interface to present a simplified mechanism for dragging points into position. The step-by-step process was clearly labeled and overly simplistic, providing easy to find navigation both forward and backward in the process. Yes, we wanted conversion, but not at the expense of usability.

Eyeweb / Lenscrafters kiosk
Eyeweb / Lenscrafters kiosk

17 years ago we created a true platform—one that had interfaces used both in public and in private and leveraged the then magic of cloud immediacy to provide a compelling experience. There aren’t many platform experiences that survive over a period of 17 years, and Eyeweb isn’t one of them, but some (god awful) variation of the business is still in business, so we must’ve done something right.

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