Widget
Date
December 2023
Role
Product Designer
UX/UI Design
Design System
Widget
Prototype
User research and testing
Loyalty program
Combine web3 and loyalty program
I was the lead product designer for this project, which involved creating a blockchain-based loyalty and referral programme widget. From user research to the final design of the widget, I led every step of the process, including information architecture, wireframe creation, prototyping, and the development of the design system. My role also involved collaborating with developers to ensure seamless integration of the widget, as well as optimising the user experience to maximise engagement and conversion. This project allowed me to combine UX design with technological innovation, while adhering to the requirements of blockchain and Web3 solutions.
Note: For reasons of confidentiality, the name of the club cannot be mentioned.
Objectives
• Enhance member engagement with a motivating rewards system.
• Facilitate the sponsorship by removing the main barriers to registration.
• Optimize the user experience to maximize conversion.
Problem
The loyalty and referral program did not yet exist on the platform, which posed a major challenge. The goal was to design an engaging and seamless system, taking into account user expectations. Several key issues emerged:
The current sponsorship process is too complex.
Every new user must be entered manually. Too many steps to register a new user.
Need clarity on the benefits and membership of the club
Members do not know what benefits they can obtain or how they are rewarded, which limits their interest and potential engagement.
Brakes on registration
Users are hesitant to sign up due to a lack of clear information.
Blockchain-related constraints
The implementation of the widget had to take into account the smart contract and its impact on the user experience.
Research
— Interviews
Before implementing the loyalty program, we conducted a series of interviews with club members to explore their expectations. The aim was to identify their consumption habits, their relationship with wine, and their perception of loyalty and referral programs. Understanding their motivations and potential barriers allowed us to design a widget that aligns with their specific needs.
12 members of the club were interviewed, including 8 men aged between 32 and 63, offering a diversity of profiles and perspectives.
Main structure of qualitative interviews
Understanding the motivations for joining the club
"Why did you choose to join this private wine club? What attracts you to this type of experience?"
Explore consumption habits
"How often do you consume wine and in what context? Do you have any particular preferences regarding selection?"
Identify the relationship with loyalty programs
"Have you ever participated in a loyalty or referral program related to a similar product? What motivates or hinders you from using these programs?"
Expectations regarding benefits and rewards
"What types of benefits or exclusive experiences would seem the most attractive to you in a loyalty programme dedicated to wine?"
Identify the barriers to engagement
"What are the reasons that could prevent you from inviting a friend through a referral program?"
User experience on the current site
"Can you describe how you are currently interacting with the club's website? What aspects do you find convenient or frustrating?"
— Key insights
After conducting and analyzing all the interviews, several major pain points emerged:
01 - Absence of structured loyalty program
Members did not have a clear framework to be rewarded for their commitment.
02 - Few incentives to recommend the club
The absence of a formal sponsorship system reduced the motivation to invite new members.
03 - Importance of exclusive experiences
Many were expecting benefits in the form of events or private offers rather than simple discounts.
04 - Need for a simple and transparent process
Users wanted an intuitive integration, without complex steps or unclear conditions.
— Prioritisation of objectives
After analysing user feedback, it was essential to prioritise the objectives and conceptualise appropriate solutions. In order to address the identified issues, we considered the development of this widget combining referral and loyalty. Several workshops have been organised to refine this approach, and here are the main conclusions that emerged:
Reduce friction in the sponsorship process
Simplifying the invitation and registration of new members.
Reinforce user motivation
Offer attractive and tailored incentives for different profiles.
Ensure a smooth integration with the blockchain
Take into account the constraints of the smart contract without altering the user experience.
Clarify the loyalty system
Provide a clear explanation of points and rewards.
Design
— Information Architecture
To structure the content, we held a card sorting workshop. This exercise allowed us to clearly define the organisation of the information and the various possible interactions. It also served as a basis for developing the hierarchy. Our priority was to ensure smooth navigation, clearly differentiating between actions related to sponsorship and those related to accruing and using loyalty points.
— User journeys
As we decided to design a widget combining both sponsorship and the loyalty program, we have crafted all possible user journeys. Each flow has been developed by integrating the specifics of the smart contract to ensure a smooth and frictionless experience for users.
Referral flow - user: sponsor
Referral flow - user: Referral
Referral flow - user: Sponsor (logged in)
— Wireframes
All the decisions made and the flows established have allowed us to design the wireframes.
— Flows and Interactions
Once the design was finished, it was important to define all possible interactions within the widget. By annotating comments for the developers, we were able to establish the "ideal" user flow when there are no errors.
Referral flow - user: connected sponsor
Final design
— A centralized solution in a widget
Everything has been designed for the widget to meet the two essential needs of users: to easily sponsor and to accumulate points effortlessly.
— Invite a friend
The widget allows you to invite a friend directly and track the status of the invitations. The user can see those pending as well as those already accepted, ensuring better visibility of the referral process.
— Invitation modal
When a user wants to invite someone, a modal window opens, allowing them to send an invitation to the invitee by email in just a few clicks.
— Track your invitations
Once the invitation is sent, the sponsor can track its status in real time and see if it is pending or accepted.
— Points History
The widget provides access to the points history, allowing users to track the accumulation and use of their rewards transparently.
— Rewards
The rewards earned by a member, whether it be exclusive events or other benefits, are displayed here for better visibility.
— Gamification system
Each action (sponsorship, purchase, interaction) earns points that can be used for exclusive rewards.
— Registration process
Several user flows have been designed to streamline the onboarding of new members. The user must enter their sponsor’s email address, which is then verified in the database before sending a referral request.
Conclusion
What I have learned
Transforming technical constraints into UX solutions
The integration of the smart contract required careful consideration to minimize the complexity perceived by the user. Each interaction has been optimized to ensure a seamless experience while meeting the technical requirements of the blockchain.
Collaborate effectively with developers
The constant exchange with the technical team has been essential in aligning the UX design with development constraints. I have enhanced my ability to accurately document interactions and to anticipate implementation issues.
Optimising a user journey in a Web3 environment
The constraints of blockchain (transaction validation time, transparency of operations) required an adaptation of user flows to minimize friction and ensure a natural interaction with the widget.
This project has been a real challenge to combine user experience with blockchain constraints. Designing a widget that combines loyalty and referral programs required a user-centric approach while taking into account complex technical aspects, including the integration of the smart contract and the management of validation delays.
This project has been an enriching experience from start to finish. From user research to final design, each step provided an opportunity to deepen my understanding of user expectations.