Gift Card Selection at SurLaTable.com

Design from a physical Sur La Table gift card.

Sur La Table gift card

Background: From an internal perspective, Sur La Table sells four gift card products: A classic, plastic gift card; a version of that plastic card with a cooking class theme; an electronic, emailed gift card; and a cooking-class themed version of that e-gift card.

A bit of research revealed that customers thought of all of those as gift cards. Though they distinguish between physical and electronic formats — each useful in different circumstances — they just use “gift card” to describe them all.

Before the redesign project, a customer shopping for gift cards on our site had to choose one of four gift card types from a flydown menu in the global navigation, or visit a gift card landing page and make the selection from there.

Sur La Table's old gift card selection landing page.

Ye olde gifte carde landing page.

On the old gift card pages, customers couldn’t see what different designs looked like. And they couldn’t switch between gift card types without using the back button and losing any data they’d entered.

We wanted to make the whole online gift card purchasing process more customer-friendly, and so boost revenue.

Redesign process: I did extensive competitive research, looking at a variety of other sites to see how they handled gift cards, noting everything from how they differentiated between physical and electronic cards to their limits on how much a single gift card could be worth. One decision that became clear: We used to distinguish between “traditional” and “virtual” gift cards, but most sites used the terms “classic” and “e-gift,” which we adopted.

I interviewed internal stakeholders and defined most of the front-end functionality and design requirements, then collaborated with our business analyst to create the official requirements doc that would get handed to our external development partner. I drafted wireframes and then collaborated with our designers and front-end dev to document interactions and look-and-feel.

Excerpt of wireframes for the Sur La Table gift card page.

Wireframes for the gift card landing page.

Our internal front-end developer was able to code up a working version on an environment we could use for usability testing. We learned things from those tests that tweaked details, but also demonstrated that the fundamental design was solid, especially compared to our existing process.

We put the entire process onto one page, which gave us a single place to land customers whether they came from our internal navigation, email and marketing campaigns, or external sources. We let customers see what they were getting as clearly as possible throughout the process — not just what the card design looked like, but what the physical cards would look like in the envelopes we send out, with gift messages attached.

We also introduced pre-selected amounts for the most common denominations, while leaving people with the option to enter any denomination they wanted.

And we recategorized gift cards to match customers’ conceptions, presenting them with classic or e-gift cards and treating the cooking class variations as design themes rather than separate products.

Results: Incredible success.

We estimated and sold the project to the business by estimating an 8% boost in conversion.

In the 8 weeks before the redesign launched, year-over-year improvement in gift card sales was 7.2%. In the 8 weeks after launch, the improvement was 36.5%. We quintupled our improvement rate. That lift has held up in the months after launch, as well.

You can see it live here.

Reworked SurLaTable.com Navigation & Taxonomy

If you had visited surlatable.com two years ago and looked at our global navigation, you could suss out the structure of our merchandising team.

We promoted ten categories of merchandise, matching the ten internal merch teams, and used language based on industry terminology instead of what our customers themselves used.

I picked up the lead on rethinking our global navigation after the idea was proposed by an outside agency. One decision they made that internal stakeholders liked: Shifting from nouns to more action-oriented language. “Cooking” instead of “cookware,” for example, or “baking” instead of “bakeware.”

One of the first things I did was an online card sort, taking the proposed categories from the agency and giving our testers 67 pictures of products as cards to sort. Though we seeded the test with some categories, testers had the option to add new ones or rename the categories we gave them. (I gave customers pictures rather than names to avoid nudging them towards one category or another, and to make sure they were envisioning the same product even if they used a different name for it.)

The card sort gave us tons of information. A few examples:

  • Knives could sit under Cooking, and should be called “Knives” instead of “cutlery”

  • No one outside the company used the word “electrics,” strongly preferring “appliances”

  • People sorted appliances by function, rather than expecting a separate, top-level category

  • Some subcategories and products needed to live under multiple top-level categories — aprons, for example, were commonly placed in three different categories

  • People were comfortable putting products related to other beverages (hot chocolate, soda makers) under a Coffee & Tea top-level category

Based on that feedback, we were able to put together a functioning version of a proposed new product taxonomy and put it in front of real users. Based on their feedback, we made some tweaks both on categorization and how our flydown menus worked, and ended up launching the redesign navigation on schedule with minimal fuss.

Results: This was a tough one to track — the stated goals for the project didn’t boil down to hard numbers. “Make the brand more welcoming and customer-focused” was demonstrated through the usability testing, but customers don’t leave that kind of feedback in ForeSee surveys.

However, one thing we did keep a close eye on: The radical change to the look and structure of the site — something that appeared on every page — did not produce a dip in satisfaction scores or an increase in calls to customer service. Customers accepted a big change with no fuss and no loss of revenue.

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.

Portfolio: Baconnection, the Bacon Game App

The challenge: Come up with game copy and trivia questions for a bacon-themed app.

The solution: Baconnection!

Portfolio: Someone Tagged You in an Online Yearbook

The challenge: Someone looking through a digitized yearbook on Classmates.com saw your picture and tagged it. We’re letting you know so you can come see (and delete the tag, if necessary).

The solution: A lovely email that’s as clear as possible about what happened.

Portfolio: Hey, the Site’s Down

The challenge: Something went wrong and the whole website is down! We need to let people know that we’re on it.

The solution: Fun, pop-culture influenced error message that namechecks the Fonz. Everyone loves the Fonz.

Portfolio: Mark Twain Did Not Sign Your Guestbook

The challenge: Classmates makes money when people pay for a Gold membership, which allows them to see who’s “signed their Guestbook” – that is, who has looked at their profile page. Some people, for a variety of reasons, are skeptical that the people who signed their Guestbook are people that they would know. Using humor, and a new approach, entice people who already have multiple Guestbook signatures to sign up for Gold membership and see who those names belong to.

The solution: An email campaign and landing pages using Mark Twain. Yes, Mark Twain.

Note: The first two images are two versions of the email, one more straightforward than the other.

Portfolio: Flashbacks Trivia

The challenge: Promote Flashbacks, a new collection of nostalgic content on Classmates.com, through a game.

The solution: Fabulously Fun Flashbacks Trivia, a chance for people to quiz themselves while using our Flashbacks content for hints.