Redesign of Sur La Table Product Pages

Excerpt of product page wireframe for Sur La Table

Excerpt of product page wireframe for Sur La Table

The project:

Redesign SurLaTable.com’s hard goods product pages.

Product pages are the heart of an ecommerce site.

Five years after the last major site update, Sur La Table’s product pages had become stale. They buried lots of content behind tabs, and encouraged reuse of the same content on multiple pages on the site. Color and size selection were done in text-based drop-down menus, hiding product selection and forcing users to make selections to check out color differences. Our content management system enforced arbitrary copy-length cutoffs that were too short. We could only feature product videos by using a complicated hack, and page content was completely unstructured HTML.

We had several goals for the redesign, but the two primary ones were:

  1. Refresh the page visually
  2. Make the page more useful so customers could select products with confidence

Because this was a giant project, and I was the point person for the business, I used many tactics:

  • Multiple conversations with stakeholders, starting with one-on-one discussions, and winding up in a group session where everyone had stickers to use to vote on notecards that broke down every feature and proposed feature

  • Online usability testing in multiple sessions, focusing on different elements — one, for example, had people look at six ecommerce sites and compare the way they handled product photos

  • Extensive exploration of other online sites and how they handled their product pages

  • Research into ecommerce best practices for product pages

Unfortunately, due to the complexity of the project, we were not able to do a test of the redesign before launch, but we did have usability sessions a couple of weeks after launch and logged issues out of that session. (That session also confirmed, for the most part, that we got a lot of the page redesign right — people were mostly happy with how information was laid out and how we handled product photos, for example.)

Launching the project took extensive work with our creative team — specifically the copywriters, who would have to create new content, in theory, for every product on the site. (To accommodate this, we designed fields to appear when there was content and disappear if they did not have content, all while looking good.)

Results: The new product detail page launched just before I left Sur La Table, so I don’t have hard numbers, though I know it’s had a generally positive influence on revenue. However, feedback from customers and stakeholders alike has been positive. Usability sessions were very favorable — people particularly appreciate the amount of useful, usable content.

Examples of fairly robust pages: The Wolfgang Puck Pressure Oven and Rustica 16-Piece Dinnerware Set.

See the wireframes (PDF)

Excerpt of Sur La Table's product detail web page.

After: The top of the redesigned product detail page.