How can a business survive when everything is shut down?

When the pandemic hit, our merchants needed more cash flow in order to sustain their business. Upon talking with customer support and conducting heuristic evaluation, we have discovered multiple major and minor issues.

We are going to focus on two major issues that we have encountered:

1. Onboarding experience

2. Issuing gift card to customers

Flawed Onboarding Experience

One of the frequently asked questions from customer support is merchants don’t know the difference between gift cards and gift card product.

• No differentiation: Value props doesn’t educate the difference between gift card product and issuing gift cards, and they were easily dismissed due to their placement below the fold.

• Confusing auto-creation flow: When the merchants decide to sell gift cards, gift card product is auto-created, which implies that it is available on their online store, but it isn’t until the merchant adds it to their collection.

• Wayfinding that doesn’t reflect mental model: Breadcrumbs of gift card product page implies that it is categorized under products, which is confusing because merchants think that it would be under gift cards.

“Ideal” Onboarding Experience

Leverage tabs to educate and improve navigation at same time.

But…different tech stack = not doable 😞

Alternative solution

• Introduce the two concepts upfront: so that the merchants can choose between which task they would like to do. The reason why we have two primary buttons (shocker 😱) is that there is no primary task for the merchant when they land on this page, and other button styles either implied prioritized one task over the other or suggested one as alternative task.

• No auto-creation but walkthrough: Once they decide to sell gift cards, we will introduce them to an empty gift card product page and notify them that they need to make it available on their online store.

• Contextual guidance: In case they created gift card by mistake, guide them to setup gift card product.

• Solidify mental model: Change the breadcrumbs for gift card products index page and gift card product page, so that merchants think that gift card product lives under gift cards.

Issuing Gift Card Experience

• No flexibility during creation: Merchants were unable to create customer or add customer with no phone number or email.

• Workaround in case of error: Merchants will have to work around to change customer’s phone number or email and then go back to issued gift card to resend it to the customer.

Providing Flexibility to Issue Gift Card

• Separate customers into the right column: Since we are introducing flexibility for the merchants to select customers during and after issuing gift card, the task became optional in its nature and it should live in the left column where all optional tasks reside.

• Callout contextually: Allow the merchant to issue gift cards but guide the merchant when more information is needed.

• Introduce flexibility: Merchants can change their customers’ phone number or email from the issued gift card and they will be able to send it in one-go.

What I Learned 💡

• Data-informed decisions: Data helped us to learn about the scope of the problem and make decisions quickly about whether we should solve it or not.

• Allow for flexibility: Design for an optimal experience that is flexibile enough to accommodate most use cases.

• Incremental improvements: Make small UI changes to solidify mental models without making huge page changes.