Gift Cards

View project

This is one of the features that customers have been asking for the most on Shopify. Gift cards are a great thing to offer to your friends and family during the holidays.

The project started off at Hack Days shortly before I joined the company. The team did such an incredible job at making a proof of concept that we decided to put it on the roadmap. So much was done, yet we still had a lot to figure out.

We knew this was something people wanted, but we didn’t know exactly what they needed. Lucky for us, a few merchants were using custom apps to do this already, so we brought a few of them in to understand their workflow, pain points that they had, requirements, etc.

Having this list of goals to accomplish with this project was extremely beneficial to the team. It clarified a lot of questions we were asking internally and gave us confirmation that this feature would make our merchant’s lives easier.

A big challenge on the design side was to make the act of receiving a digital gift card meaningful. Ultimately, the gift card is just a string of 16 characters, but we wanted to make it feel special. We explored various avenues, but ultimately what worked the best was making the card feel tangible. Skeuomorphism if you will, but the good kind. So, the “card” would be an actual card and we’d use a visual language that references gifts.

Designing the “card”

The gift card template is the page that is sent to the customer after they complete their purchase of a gift card and displays the code to use at checkout.

We already established we wanted to use a representation of a physical card, so I started playing with a few ideas.

The problem with a lot of these ideas is that they were either too plain or didn’t work with any kind of store. We eventually settled on the gift illustration because it was a good tradeoff between having something that had a lot of personality and something that was flexible enough to match the brand of any online store.

Delightful animations

To reinforce how awesome it is to receive a gift card, we integrated a lot of animations throughout the different areas of the product.

Onboarding

While Gift Cards may seem like a fairly simple feature, a lot is actually going on behind the scenes. We wanted to make sure that complexity wasn’t relayed back to the user. We decided to focus on a few key points in the onboarding page:

  • What are gift cards on Shopify?
  • Why is this something you want to offer on your store?
  • How does it work?

We then guide them through creating their first gift card product and explaining features as they go along instead of having this long learning process before even getting started.

A really cool feature we decided to add right before we launched was the ability for store owners to manually issue gift cards. These gift cards can be used for promotion purposes or to reward loyal customers.

Passbook

Launch!

The reception from customers has been amazing. It was great to see shops like Ugmonk and A Book Apart offer gift cards just a few weeks after we launched. We’ve had customers tell us that gift cards brought in a significant amount of revenue to their shops and that it made a lot of customers happy.