DesignerPages.com

Visit Site →
Client Designer Pages
Team Nevan Scott, Payton Biddington, Ty Fujimura
Roles Concept, Design, Development
Technologies backbone.js

Designer Pages is a furniture search engine for architects and designers. The site features a rich search experience for logged-out users as well as a powerful suite of tools for subscribing firms to power their entire product search and specification process.

We worked with Designer Pages for many years, and our partner Ty Fujimura even spent a year as the lead designer and frontend developer at the company. After his tenure, Cantilever orchestrated a full site redesign, performed several sweeping sets of changes, added many new features, and did countless small UI and design projects for them.

Throughout all of this work, our chief challenge was managing and organizing the variety and sheer volume of products on the site. Everything from faucets to upholstery is represented, and often must appear side-by-side. Photo size and quality is not guaranteed, and even with optimal photos, different products require different approaches. Carpet, for instance, is generally photographed as a swatch, while furniture is photographed on a white background. Lamp photos are always tall and skinny, while couch photos are the reverse. Products can have five-character names, or 100-character ones. They can have one photo, or dozens. All this before you explore descriptions and other product facets.

DesignerPages Product Galleries

To manage these challenges, we continually imagined innovative UI solutions to account for all the possible cases. For example, image galleries on a product page might contain any number of images, so instead of using a single layout which could be awkward under or over a certain amount of images, we devised a dynamic method which sizes the image grid load based on the available space.

To show multiple images for products in search results, we created a rollover solution which works equally well for products with two images as it does for products with 100.

Shirt_Modular__on_Designer_Pages-2

When adding a product to one of a user’s projects, we created a clever image picker to let users choose which image was representative of the product within that particular context. The picker has a grid mode and a slider mode and chooses how to present itself based on the number of photos available.

For many of these features, we developed the code as well, using tools like Backbone.js to create solid, dependable interfaces. For styling the site, we created a comprehensive CSS system which was minimized the amount of CSS required even on a site with dozens of disparate templates.

The crown jewel of the site is the public search and browse experience, on which the subscriber-only functionality is layered. In 2013 we had the chance to do a comprehensive review of this crucial aspect of the site, which had coalesced organically but need to be trimmed and redefined. We established strong new pardigms for organizing their content, thinking deeply about both visual and information design. The end result was a more mature, evolved platform with room to grow.

Final_Design_Presentation