Case Study: Eyeweb Platform

eyeglasses

The term “e-commerce” isn’t used in 2015 because 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, Pierre struck a deal with Lenscrafters to host an Eyeweb co-branded kiosk, which would allow potential customers to precisely measure their facial/pupil structure and then capture an image that would be uploaded to the cloud (yes, we had “clouds” in ’98).

Upon returning home, the user would log-in to Eyeweb.com, browse an inventory of thousands of frames, virtually try them on against their freshly captured head shot, and ultimately, purchase the product from the comfort of their home.

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. The work was intense in terms of getting up to speed in how to design a search and discovery mechanism around SKU-based inventory—rich with descriptive attributes that could drive our frame advisor engine. Between Robert’s direction, and the amazing collaboration between the Organic team, I settled in for an interesting ride.

We started on the ground floor, as the branding was developed from scratch via a thorough brand exercise with Pierre. As Fanny Krivoy and 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. settling on the right nomenclature was important, as we were transitioning people from their mental model of high-end, real-world shopping to an online experience. Areas such as the Personal Collection needed to impart a white glove feel they were used to experiencing in person.

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 strict constraints 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 doesn’t seem pertinent in the retail world, as the ultimate goal is to convert purchases. But stickiness also applies to users easily moving from one interesting product to the next in their browse > purchase lifecycle, which increases the potential for conversion.

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.

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 remarkably different, so different is what we targeted.

My sketches began by crafting an explicit linear narrative, using multiple choice questions centered around the notion of style and functional preferences, 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 foundation and built upon it with our visual designer evolving the explicit nature of the questions & answers to be represented as 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 SKU attributes, moving 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

With the co-branded kiosk, we were working with a much more task-based interface with interesting environmental considerations, as the user was operating in public and needed to precisely map specific areas of their face for the system to prep their image for the try-on interface. We honed in on an overly simplistic interaction model and interface, with zero extraneous copy or features so 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 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 while our Eyeweb experience isn’t one of them, some variation of the business is still operational, so we must’ve done something right.

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