Designing a Zero to One Retail Brand Experience

SUMMARY

In 1998, I left online marketing as an art director to become an information architect at Organic Online. Little did I know at the time I would be mentored by one of the more sophisticated designers of our time, Robert Fabricant. Collaborating with a multidisciplinary team of talented strategists, creatives, and engineers, we pioneered Eyeweb—an innovative eyewear shopping platform. In just over 9 months, we took an idea from zero to one—designing the brand from scratch, architecting the retail shopping system, and deploying the platform, creating a unique online and in-store experience that still operates decades later.

KEY LEARNINGS

Real world shopping expectations matter - Acknowledging and integrating the expectations of consumers who shop in brick & mortar spaces into our e-commerce service was critical for building trust in our offering.

In-line discovery drives engagement - Strategic approaches to boost avenues of discovery, such as prominently displaying frame attributes for secondary exploration, contributed to site stickiness, increasing potential purchases.

Feelings can drive recommendations - Abstract visuals that generate strong feelings towards particular attributes, such as style, can deliver appropriate and compelling recommendations. Our use of visuals, aligned to SKU attributes, distinguished the product, enriching the user experience by providing a unique and visually engaging discovery process.

BACKGROUND

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 drove not only matches to queries, but enabled our frame advisor to display personalized results. Under Robert’s direction, and through amazing collaboration with the broader teams at Organic, I settled in for a masterclass of brand and system design.

Defining a Brand

We started on the ground floor, workshopping rounds of images, keywords, and brand stories. Fanny Krivoy and the visual team led the process while Robert presented our ecosystem concepts to Pierre through conceptual diagrams. I dabbled in both spaces, primarily providing feedback. As we garnered consensus on the architecture, I defined the organizational principles, recall methods, hierarchy in the interface, navigational affordance, and widget schematics.

Web design challenges in 1998 were a 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.

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.

Information Architecture & Visual Design Collaboration

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.

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.

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 took my architectural framework and evolved an interface to shift the explicit nature of questions and answers into visual representations.

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.

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.

Once their likeness was captured, the customer could fire up their modem from the comfort of their home, and perform an online fitting of any frame from the thousands of SKUs in the Lenscrafters collection. The interface positioned their measurement-precise headshot alongside their personal collection, along with the ability to choose from a multitude of lens colors. Then it was off to the checkout flow to complete their purchase.

Results

I don’t have access to the particular business results of our product due to the fact that this was an agency job. That said, a version of Eyeweb still exists today. We deployed a soup-to-nuts, novel brand (and multiple form factor) experience that comprehensively presented an engage, browse, discover, manage, and fulfillment service, leveraging the magic of cloud immediacy… all in 9 months.

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