Increasing Revenue by Reducing Confusion

🤔 Confusion about referral marketing leads to delays in activating a campaign

Online store owners use a number of strategies to increase revenue, such as having regular sales. Referral marketing is also a common strategy to get more customers. The concept is simple: give your friend 10% off and if they make a purchase, you get 10% off your next purchase.

ReferralCandy automates this process. Users can quickly launch a campaign under 30 mins, but many hesitate because they aren’t sure what will happen once their campaign is live.

After sifting customer success chats, my PM and I found that a lack of understanding was causing the hesitation. The delay in activation led to missed opportunities to getting referrals, revenue, and seeing the value of the app.

Screenshot from the "Settings" page in the ReferralCandy app

For example, users were asked to select a “purchase review period”. The dashboard didn’t clearly explain how this review period fit into the referral process. Users weren’t aware that a longer review period meant a longer waiting period before customers received rewards for successfully referring a friend.

💡 Find a way to allow users to confidently activate their campaign by explaining how their campaign works

After considering how adjacent products like email marketing apps explained flows, I came up with a range of concepts.

1. Detailed, step-by-step flow

This concept was inspired by Klaviyo, a popular email marketing tool which uses a visual timeline to explain what happens at each step of the campaign process.

2. Dynamic map

A dynamic map that shows the path a customer and their friend takes. No images or previews would appear here.

3. A "POV" guide

A story-like guide that explains the customer and referred friend's experience

4. A store simulator

A nerfed or dev store version where store owners can make test purchases and experience the flow as a customer or referred friend.

5. How-to guide

Step-by-step instructions on how to mimic testing the campaign from the customer or referred friend's POV.

➡️ Using frameworks to quickly decide on a concept

With my PM and Design head, we rejigged the RICE framework. We chose option 3, a POV guide, as it solved the problem well, required little effort from the store owner, and had low engineering complexity.

Iteration 1

Feedback on this design was that it had the right idea, especially the timeline, but was too text-heavy and low-level.

Iteration 2

The referral process is explained in a technical manner (X triggers Y behaviour). This option was discarded as users would prefer simpler language over technical jargon.

Iteration 3

This Shopify-inspired design uses a floating widget to guide users as they set up their campaign for the first time.

Iteration 4

Simple visuals were added to liven up the page. However, these illustrations were removed from the final design due to feedback that it wasn't necessary and was adding more visual complexity to the page.

Log into Figma to view prototype

Iteration 5

After simplifying the timeline in design 1 and using an expandable card component to hide details, feedback was unanimous that this design was much easier to understand.

👍 User testing responded positively to the design

We chose a simple timeline design because customer-facing colleagues and users said it explained the referral process the clearest.

“So maybe in the future, as we scale and we get new members on board, and I have to explain things, then yes, I will probably come here to get this page because this is a clear overview of the referral campaign.”

✅ We implemented a step-by-step summary which explains how the users specific referral campaign works

We were able to both keep the users cognitive load low by only highlighting key information and using expandable cards to hide low-level details. Removing dynamic text also reduced engineering complexity and allowed us to ship this feature quickly.