Brandless Gift Cards

Launching a New Gift Cards Experience

Overview

Brandless is an e-commerce company with a mission to make better for you products more accessible by everyone. As a direct-to-consumer company that works with manufacturing partners, Brandless eliminates the brand markups and overhead costs to bring you curated, high quality products across food, household, beauty, baby, and pet categories at a much lower price.

Role

Sole designer involved in each step of the process - research to end-to-end testing

Team

Partnered with PM and two engineers

Timeline

6 weeks from research to launch

Tools

Sketch, Zeplin

problem statement

How might we...

Design and launch a brand new gift cards flow to enable our community to easily give the gift of Brandless before the holiday season?

Empathize

The first step I take with any project is research - this helps me get a better sense of the context of the problem to solve, and helps me empathize with the users needs and pain points.

Validate Demand

To evaluate demand for Brandless gift cards, we looked at several sources of signals:

Monthly gift box orders
Monthly Zendesk Gift Card feature request
Monthly on-site search intent for Gift Cards
Google search matches

Looking at the data from the previous year, both Monthly Gift Orders and Zendesk feature requests had a decent amount of volume per month, and volumes for both increased towards the end of the year leading up to the holiday months. Monthly on-site search intent for "gift cards" was also a strong indicator of demand.

While exact Google search match for "Brandless Gift Cards" was low, there was a ton of long tail related matches for "gift cards for students" or "healthy grocery gift card", showing a strong demand for these types of gift cards.

Competitive Research

To find inspiration for the Brandless gift card experience, I looked at other e-commerce sites to research the different patterns that other companies were using - below are a few examples:

Define

Given the short amount of time we had before the holidays (we wanted to launch the MVP before Thanksgiving), it was crucial that we were strategic about what decisions we made regarding what direction to pursue for this project. We only had 6 weeks to design and launch this project, meaning there were some really big constraints we'd need to work around.

Constraints

One big decision made at the outset was to start with only digital gift cards. After some initial inquiries to vendors about including a physical gift card experience, it was clear that evaluating vendors and setting up integrations would be too long of a process.

Another issue we had to decide on pretty quickly was whether or not to include variants of the digital gift card with different dollar amounts to select. We did not have any variants on the site at the time, and I was actually working simultaneously on a project to enable variants on on products across the site. However, the variants project was estimated to complete by the end of the quarter, which would be far too late for the gift card experience.

We also opted to use the existing store credits system (which was only being used by customer service at the time) and also use the components from the gift order feature to reduce scope, since it would not have been technically feasible to build something from scratch and still launch the project on time.

Screenshot of competitor product details page for gift card

Example from comparative analysis - a gift card page with variants (tiers of pre-determined dollar amounts). This site also had the option to send a physical gift card.

Design

Since we were piggy backing off the store credits system and also using components from the gift order flow, we did not need to do long lo-fi phase. After some initial auditing of the site, brainstorming, and high level whiteboarding with the PM, I went back and put together a more comprehensive flow chart for the sender and recipient experiences.

Mocks of the gift card product details page

Product details page of the Brandless Gift Card

Sender User Flows

There were 3 possible flows that users could experience when adding a gift card to their cart:

Send gift card only
Send gift card + purchase other items
Send a gift card with a gift order

Recipient User Flows

In addition to the sender experience, we also needed to make sure the recipient experience was easy and delightful to the end user. The recipient had many more scenarios to consider, depending on where they decided to add the gift card code to their account, and their flows also depended on whether or not they had existing payment methods or credits. These flows are summarized below:

Adding gift card to account
Using gift card in checkout
Adding/using gift card if user already had credits or gift cards in account
Adding/using gift card if user already had a saved payment method
Adding/using gift card if gift card DID cover order balance
Adding/using gift card if gift card DID NOT cover order balance

Image of email that a recipient of a gift card would receive

Design for the gift card email that recipients received with instructions on how to add the gift card to their account

Annotations

We used the Sketch + Zeplin method for handoff to the engineers, and I also provided detailed annotations for various states, interactions, and copy for all possible sender and recipient flows.

Launch & Iterate

Once the different flows were implemented, I reviewed PRs from the engineers and gave feedback on interactions and visual designs. Then a few days before the deadline, the whole team had to grind through some late nights testing sessions, going through each of the different scenarios using the testing plan I put together - this included testing both the sender and recipient experiences from end-to-end. Our hustling paid off and the gift cards experience was launched before Thanksgiving!

Scheduling Delivery Date

After the initial launch, one highly requested feature was to be able to select a future date to send the digital gift card. This made a lot of sense, since people might want to schedule a gift card to be sent on a birthday or a holiday and not have to worry about sending the gift card that same day. With Christmas coming up in the next few weeks, we knew we wanted to get this feature in as soon as possible.

This iteration was pretty straightforward on the design front, with the addition of a delivery date input field in the card sending flow, and it just required a bit of tweaking in the code to delay the sending of the digital gift card and email confirmation to the recipient until the date selected.

Measure

We launched the gift cards experience on the site before Thanksgiving, and hit our goal of 1,000 gift card purchases by end of Q4! However, it was a very manual process to monitor the progress of the gift cards because there had not yet been dashboards built for internal monitoring of new feature releases. After the release of this project, my PM and I collaborated with the data team as they worked on building a dashboard for leadership and product to use.

TL;DR

Launching gift cards on the site had been on the product roadmap for some time, and given the clear business value and increasing customer demand, we wanted to get the gift card program launched before the holiday season. However, it would take much more time to create a full physical gift card program - vendor evaluations alone would take weeks. With only 6 weeks before the Thanksgiving deadline, we decided to launch with a digital only gift card experience and monitor performance to determine whether or not we should build a physical gift card experience.

We had many challenges throughout the project, from limited engineering resources to uncovering new constraints along the way, but were able to deliver the MVP of the digital gift card experience before Thanksgiving, and ultimately hit our goal of 1000 gift cards sold by end of Q4!

Reflection

Looking back on this project, it was definitely challenging but also a great learning experience. Fortunately, I worked with an amazing team and we were able to get this first version of the gift card experience across the finish line on time despite the bumps along the way.

Challenges

The biggest challenge was the short timeline - 6 weeks from research to launch. Lack of resources was also a big limiting factor - the engineering team was at capacity supporting other projects, and we only had 1 engineer for the majority of the time. There were also new constraints that came up mid-project - (e.g. can’t have multiple gift cards per order, can’t remove shipping step in checkout, and legal requirements with meal donations language in checkout).

Learnings

Cutting the scope of the project enabled us to deliver the MVP of the gift card program by Thanksgiving. Although there were some constraints discovered mid-project, our team made the right moves by calling issues as soon as they were discovered, and adapting to the challenges as needed. The team also carved out time for end-to-end testing as a group, which was super helpful to knock out bugs and visual tweaks.

Takeaways

More thorough research of potentially complicated areas would have helped us cut scope sooner (multiple gift cards, shipping step, meal donations) - this is something I will definitely keep in mind for future projects. Additionally, although the timeline for this project did not allow for usability testing, I would have liked to include at least some testing (even with internal folks) to validate designs and interactions.

Previous Project

Next Project

Let's connect 👋

Send me a message or connect with me and let's chat about how we can work together!