Project Overview
Problem
Until 2020, the Loyalty product was mainly focused on answering the specific needs and requests of Yotpo's high-touch merchants. Following the immense growth in the e-commerce market in 2020, there was a need to focus on Yotpo's low-touch merchants who had enormous revenue potential.
The low-touch merchants' retention rates were low, especially compared to other Yotpo products.
Hypothesis
Merchants who get value from their Loyalty program will have higher retention rates. The best way to get value is to launch the program as quickly as possible and make iterations on the go.
Solution
A complete redesign of the Loyalty onboarding flow, with the intention that merchants will launch their Loyalty Program immediately so they will get value quickly.
Main KPIs
My Role
Lead designer
Team
Yehonatan - PM
Lena - UX Writer
Dev team - Dror, Yuval, Sharon & Adir
Activation
Activation is measured by finishing the flow and launching the Loyalty program in the merchant's store.
Conversion
Conversion is measured by finishing the flow and landing in the B2B.
Impact and accomplishments
Increased activation rate from 26.4% to 51.3%
Increased conversion rate from 38.7% to 65.8%
Created a modern look and feel which aligned with new design approach and the rest of Yotpo's products
Contributed a new component to the design system
Increased the level of confidence users felt when taking the onboarding, which led to higher engagement in the B2B
What is a Loyalty Program?
A loyalty program is used by brands to encourage customers to continue to shop at the business associated with the program. A loyalty program is comprised of earning rules and redemptions:
• Earning rules are the different ways shoppers can earn points, like creating an account, following the business on social media, celebrating a birthday.
• Redemptions are the ways shoppers can use these points for discounts, receiving free products or free shipping.
An example of a loyalty program in a merchant store
Flow analysis
Current Flow
The current onboarding flow leads users through 6 steps, where they are asked to define their Loyalty and Referrals Programs. They start with defining earning rules and redemption rate for loyalty, go through designing the store widget, and finally, they need to allow Yotpo to access Shopify.
Funnel
When looking at the funnel we can see that the activation rate is 26.4%, which is significantly low compared to other Yotpo products. For example, Reviews have a 63.7% activation rate and Subscriptions have a 69.2% activation rate.
In addition to that, the conversion rate (users who finish the flow and continue to the B2B) is 38.7%, which is also low compared to the other Yotpo products.
I analyzed the funnel and identified steps that made users churn at higher and lower rates:
Main problems
After collecting feedback internally, talking to customers and analysing the funnel's data, I defined the main problems of the flow:
• There is no personalization or general recommendations
• The design of the pop-up that appears in the store is old-fashioned
• There is no real connection between the onboarding experience and the B2B
Research
Persona
Following Yotpo's new focus on low-touch customers, we needed to better understand their needs and challenges.
“I don’t know how to build the right program. I need to rely on Yotpo’s recommendations and experience.”
Sara, Glowup make-up
Onboarding research
In addition to reviewing competing products, I explored other products from diverse disciplines and examined their approach to the onboarding experience. I completed the onboarding process for the following products: Asana, Airtable, Monday, Wix, Productboard, Honeybook, hopin, Smile.io, Intercom, and Zendesk, and here are my main takeaways on what makes a great onboarding experience:
1. A fun and easy experience
2. Personalization: A tailor-made solution
3. Creating a strong connection between the onboarding and the B2B
.......................................................................
Design Process
Design insights and approach
.......................................................................
Following my onboarding research, I decided to use the pattern of splitting the screen into 2: the left side of the screen represents the settings and shows general explanations, while the right side shows visuals and content and is affected by the user's choices on the left side.
.......................................................................
I decided to remove the current left panel (after a battle with the dev and product teams), which represented the 6 steps, and design a new stepper component, which will be used cross-product.
.......................................................................
I created a new layout and grid that will be applied to all of Yotpo's products for their individual onboarding flows.
.......................................................................
Changing the Flow
From the early stages of this project, it was very clear that the steps of the flow needed adjustments. Some screens were removed completely, some were added, and some changed their place in the flow.
Focusing on the program screens
The main challenge to solve was communicating the Loyalty Program simply and clearly. That means, that at the end of the flow, users should be able to:
Understand how a loyalty program works
Understand what is included in the program
Understand why we recommend this program
Feel this is the right program for them
Version 1
The first iteration was very similar to the B2B experience and its focus was more on the concept and less on the design. Users defined point value and rewards in two separate screens, while on the right side of the screen, they could see how their choices affect the shopper journey. I used the design system components to keep the look and feel cohesive with the B2B.
Version 1 Problems:
The flow is too “technical”
No feeling of a unified program
Too many fields to edit
No personalization
Decisions:
Making the program cohesive (not earning+redemptions)
Presenting program details
Hide the input fields
Adding personalization - AOV
How do we set up a great personalized loyalty program?
When I realized something was not working in the way we communicate the program itself, I broke it down to the basic elements that combine our loyalty program and defined how each element is calculated.
Version 2
The second iteration focused on reflecting on how the program works, what our recommendations are, and why we recommend them. In addition to that, I wanted to create a strong visual representation of the entire loyalty program. I decided to hide the input fields under a CTA to reduce the feeling that users need to edit their program.
Version 2 Problems:
The separation to 2 screens made users go back and forth between them
The AOV concept was difficult to explain (and to understand)
Users did not see the CTA to edit the program on the right
The information was uninviting to read
Insights from usability testing
We conducted usability tests, internally and with real customers, for each version of the flow, and these were the main takeaways:
Users don’t necessarily care about the “why”, as long as they’re happy with their program
The program should be represented in a single screen
We provide great personalization and we don’t want users to edit every individual field separately
The connection between the settings on the left and the program on the right should be strong and clear
Version 3
In the third iteration, I combined all settings and the full program into one screen. The settings were divided into 2 drawers, each one controls a different parameter.
Version 3 Insights:
The flow works well!
The connection between left and right is clear
The visual on the left is similar to the Reward page in the store, which might be confusing
The settings were understandable but very mathematical
Messaging shift - less mathematical, more human
The final kick to bring the new onboarding flow to the next level was made by Lena, our wonderful UX writer. Instead of instructing users to choose between numbers and figures, she changed the terminology so that professionals from the marketing field could relate to and feel confident with their choices. This change made a huge impact.
Final Design
Program screen
Full flow
Watch the full flow:
Welcome screen
The Welcome screen was redesigned to be more on the brand look and feel, and the messaging kept users focused and engaged.
Step 1
A new store widget was designed by another designer on the team, to support the new flow's needs: minimal customizations and implementation in Shopify in just a few clicks.
Step 2
The Loyalty program will be presented in single screen, while users can edit it simply and intuitively.
Step 3
Two emails will be automatically sent to shoppers to make sure they can participate in the Loyalty program of the brand. This design follows the SMS & Email and Subscription products, which also send emails automatically on behalf of the merchants.
Step 4
Just before the users are requested to launch the Loyalty program in their store, they can review it once again and get a clear understanding of everything that will happen once they launch it.
Shopify implementation
Before sending our users to Shopify, to allow the Yotpo intergration, we listed every step the user has to take in Shopify and showed a supporting GIF.
Outcome and thoughts
Increase in activation and conversion
There was an increase in both KPIs:
Activation - users who finish the flow and launch their program
Conversion - users who finish the flow and continue to the B2B
Thoughts on the process
1. Successfully collaborating as a team
Yehonatan (PM), Lena (UX Writer), and I worked closely on this project from the early stages. Each one of us contributed to the success of this feature and brought their individual insights and touch.
2. Building a live prototype is highly valuable
When working on a flow, rather than a single screen, creating a live prototype is crucial for finding the weak spots of the flow.
3. Involve the development team at earlier stages
When involving the developers early on in the process, we can get effort estimations quicker, identify potential points that might be blockers or have high dev costs, and find solutions that come up from the developers. (e.g. AOV, launch flow, emails).
4. The importance of usability testing
When conducting the usability tests, we specifically asked our testers to voice their thoughts out loud, so we could learn from their thought process. This approach led to receiving a deeper understanding of what was missing in the flow, in addition the the feedback on the existing design.
