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.