Designing a zero-to-one eyewear store, from browser to fitting kiosk

01

Architect the brand as it took shape

We started on the ground floor, workshopping rounds of images, keywords, and brand stories. Fanny Krivoy ran the brand exercise with the visual design team, while Robert presented our ecosystem concepts to the founder as conceptual diagrams. I contributed to both, mostly as a reviewer. As the team reached consensus on the architecture, I defined the organizing principles, recall methods, interface hierarchy, navigational affordances, and widget schematics.

With a boutique focus on a single product, we centered the homepage on the four ways to find and try frames, and split global navigation between those features and support destinations. Naming mattered: we were moving shoppers from the habits of a real store to an experience that wasn’t yet normal, so every label had to make sense to someone who had only ever bought glasses in person. And at 800×600, every element competed for space, which limited how much white space we could use to keep the interface from feeling crowded.

02

Bring the store’s service into the browser

In a good optical shop, someone remembers you, sets aside the frames you liked, and tells you when something new comes in. For shoppers still wary of buying online, the personal collection was designed to carry that feeling into the browser, with the language cues they would hear in person.

It started on the homepage. A returning shopper was greeted by name and told how many frames were waiting in their collection, when they last updated it, and which new designs to look at. Inside, the copy spoke like a shop assistant, not a database: tastes change, fashion changes, keep track of your favorites, share them with a friend.

Under the language sat everything needed to manage the collection. Shoppers could sort by brand, price, material, or color, see each frame’s price, size, material, and available colors at a glance, and remove what no longer appealed. Try-on and ordering sat beside every frame, and past orders stayed visible. The collection became the hub of the experience: discovery fed into it, and the online fitting drew from it.

03

Let the attributes do the merchandising

This was my first time designing search and discovery around SKU-based inventory. Every frame carried descriptive attributes, and those attributes did two jobs: they matched shoppers’ queries in frame search, and they gave the rest of the experience something to reason with.

Before time on page was a common analytics term, we aimed for stickiness. In retail the goal is a purchase, but stickiness also happens when a shopper moves from one interesting product to the next, and every step deeper raises the chance of buying.

We couldn’t present related frames dynamically, through collaborative filtering or even attribute-based co-occurrence. So the frame detail put the decision in the shopper’s hands. The product image led, with try-on, add to collection, and order around it. Beside it, the frame’s attributes appeared as a checklist: brand, color family, material, price range, shape, features like spring hinges, and whether it was among the newest styles. A shopper checked the ones they cared about and asked for similar frames.

04

Turn preferences into pictures

Search worked for shoppers who knew what they wanted. The frame advisor was for everyone else, and it promised to recommend the best frames based on a shopper’s features, preferences, and prescription. For the most ambitious form of discovery on the site, the founder wanted something remarkably different, so different is what we aimed for.

I started with structure. I sketched a linear narrative of multiple-choice questions about style and functional preferences, built on the same frame attributes as search, the frame detail, and the personal collection. Each answer narrowed the attributes in play, and the recommendation engine queued up a matching set of frames as the shopper went.

Then our visual designer took that framework and replaced the explicit questions and answers with images: cropped, pixelated close-ups of frames in different colors, materials, and textures, the same visual language as the homepage. The images sat on the grid used across the site, and the visual differences between them mapped directly to sets of frame attributes. Shoppers chose what felt like their style, and the system translated each choice into a precise query.

05

Design the kiosk for the least confident shopper

The in-store kiosk was a task-based interface that precisely mapped a shopper’s pupils, the space between the eyes, and the width of the nose. Shoppers would use it in public, so I kept the interaction model simple, with no extraneous copy or features. The last thing we wanted was visible frustration from the least tech-savvy shopper, surrounded by other customers.

I carried the site’s brand and navigation patterns into the kiosk and designed a simple way to drag measurement points into position. Each step was clearly labeled, with easy navigation forward and back.

Once their likeness was captured, a shopper could dial in from home and try on any frame in the catalog. The fitting placed their measurement-precise headshot beside their personal collection, with a choice of fashion tints and photochromic lenses, and then it was on to checkout.