Strategic Node Marketing: Maximizing Impact and Purchase Potential
Our referrals initiative is a pre and post-login application flow that walks a user through several different points of contact depending on where their traffic came from (existing user or a potential new user). The goal in mind is to provide targeted marketing funnel campaigns that would direct users to our platform, allow them to purchase nodes, and refer other users to our site. Our Core business model is to provide a platform for our brands and incubation pods to utilize for their customers to engage with and connect.
Project Overview: Key Milestones and Deliverables
Design a referral marketing and onboarding flow to help improve a user’s experience while shopping for Nodes and setting up their wallet.
CHALLENGE
Design different marketing flows that help capture potential sales and additional revenues generated from referring friends.
Design an onboarding experience that identifies each step and progressively guides a user through their initial journey.
REQUIREMENTS
ROLE
UX/UI Designer
TIME
6 weeks
TOOLS
Figma, ChartJS, Mid Journey
Unlocking Discoveries: Navigating the Realm of Research
Since I wasn’t very familiar with how referral marketing campaigns worked, I began with some secondary research to gain a better understanding of how it worked in relation to marketing funnel campaigns. I reviewed the marketing content and funnel pages that our Pixl brand had put together and began to understand how a user would go through their process of account creation to land on our login page.
Through my research, I wanted to:
Understand how marketing funnels worked and how organic traffic would flow.
Identify points of contact where potential brands would funnel existing customers to sign up for a referral campaign.
Learn about current trends and onboarding features to help guide the experience.
Discover the goals, needs, motivations, and frustrations of our brand’s user.
EMPATHIZE
DISCOVERY
I learned that there are 5 essential stages to a marketing funnel: Awareness, Interest, Consideration, Evaluation, and Purchase. Our marketing team was in charge of the funnel, and once a customer was converted I helped design the experience for their different flows within the system to help them navigate to purchase a node, set up a wallet, and refer friends for credits.
We adopted the scarcity model around creating excitement and urgency, encouraging people to take quick action so they wouldn’t miss out on purchasing our nodes. To help with this strategy, I utilized several different design options:
Pop-up modals with congratulatory messaging upon logging in to the application.
Home page with several different sections to help with different parts of the strategy (onboarding slider, marketing banners, financial widgets displaying potential rewards, referral credits, wallet allocation and historical data for top 4 currencies/tokens, a learn and earn section where you could share links to the brand offers and content, a referrals table to show the number of referrals made, and a Web 3 RSS news feed to get more information about crypto).
Pop-up modals with steps to guide a user after they’ve clicked the share CTA button on the home page. From here, the messaging explored 3 options they would receive. It gave the option to share the referral link, as well as post to a user’s social media accounts (Twitter, LinkedIn, Facebook).
I learned about several different types of onboarding modals and took some time to research them and discover their differences (Duolingo, Robinhood, Doordash, Culture Trip) and how I could create one that fit our needs. From here I created two different onboarding flows: login and home page. The login flow would have a login form as well as a marketing slider to talk about different upcoming features. Once a user logs in, the home page has a section to walk them through the 8-step onboarding process (Account Creation, Wallet Setup, Node Setup, Claim Your Reward, Share With Friends, Earn More, Sign Up For Discord, Become Influential).
Crafting User Personas: Understanding Your Audience
To make sure that I fully understood a Web 3 user and that my process was as user-centered as possible, I wanted to have a clear understanding of who a typical user was that was interested in our referral program.
Users want to make purchases when they know they’re getting a deal. Beyond purchasing a node for themselves, they can refer others and they’ll receive a referral credit of $500 towards a Smart Node with each purchase. This offer was valid for up to 3 referrals or $1,500 off a purchase of a Smart Node.
Users want the ability to be able to earn rewards over time and view their progress on their rewards dashboard.
Users have difficulty being able to bridge their tokens from Layer 2 to Layer 1 and transfer them to an exchange from their non-custodial wallet.
Defining the Problem: Identifying Core Challenges
With my understanding of our Web 3 user Carl, I wanted to start thinking about what problems we are trying to solve for him. I created a point-of-view diagram and a series of questions that would help drive my brainstorming process.
What insights could I understand about the node marketing and referral process?
What are his immediate needs during the process?
What his point of view would be like and how could I empathize with it?
How might we help him?
Setting Clear Project Goals: Achieving Success
After defining the problem, I generated a lot of ideas for these problems. At this point, I started to strategize and determine what goals I was trying to meet and what solutions would need to be prioritized.
First I started by defining the project goals to get a clear understanding of what we were trying to achieve and where the business and user’s goals aligned.
Creating an Effective Site Map: Structuring Your Web Application
To plan out the site architecture for this application and where the features would fit, I created an application site map (ongoing) to organize the screens in a way that would be logical and intuitive for our users. It’s broken down by main-level navigation and branches off into each page and sub-pages.
Designing User Flows: Enhancing the User Experience
To understand the overall journey that Carl would be taking through the app from start to finish, I wanted to create different swim lanes that walked through different paths he could take. It was broken down into several different flows:
FLOW A - Existing customers with an account click sign up or sign in on the brand’s marketing site.
This scenario would involve an existing customer trying to sign in to their brand’s marketing site. It would redirect them to an invite-only page where they could enter information and join a waitlist. If they used the login link below, they could log in to the app where they could navigate the home page and its referral offers. From here they could share the offers with friends, where they would be redirected to the marketing platform funnel page.
FLOW A (Alternate Flow) - Existing user with an account, discount offer flow.
This scenario would involve an existing user logging into the platform and would be met with a congratulatory pop-up modal. They could explore offering rewards or setting up their node. To set up their node it would redirect them to the node dashboard and they’d click on the node setup card for instructions. To explore further offers it would redirect them to the home page where they could share with friends, earn rewards, or redeem offers and go through the shopping checkout flow with a discount coupon applied to their node.
FLOW B - Existing customer clicks on a shareable URL.
This scenario involves a user receiving a mobile message with a shareable URL offer, it redirects them to the marketing funnel page.
FLOW C - New customers, no account, no shared URL.
This scenario would involve a new customer who doesn’t have an account or a shareable URL and lands on the create account page without a referral link. They would enter their information, agree to the email marketing communication checkbox, and join the waitlist.
FLOW D - New customers, have shared URL (Core + Marketing Platform).
This scenario involves a user who received a shared URL on their mobile device or email and has followed it through to the marketing funnel page. From here, they’ll create an account through the marketing platform, and log into our application. They’ll receive a congratulatory pop-up modal that lets them know they are qualified for a free licensed node. It directs them to set up their wallet now or later. If they set up their wallet now, it takes them through the terms and conditions and the wallet setup flows. Afterward, they’ll receive a congratulatory pop-up modal where they can either set up their node or go to the wallet and review their balances.
Wireframing Essentials: Building the Blueprint for Design
Using my understanding of the user, our goals, the site architecture, and the user flows, I worked on making informed decisions on designing the initial wireframes for this project. Working closely with our product management team, we came up with the main flows for existing and new users, and the homepage mockups. I’ve included some early ideas and existing screens that haven’t been updated yet. To the right are user journey paths and mockups that show the phase I and II flows and layouts for different screens.
Initial User Flows Phase I
Home Page Phase II
Nodes Dashboard Phase I
Home Phase I
Congratulations Modal Phase I
Onboarding Cards Phase I
Usability Testing: Ensuring User-Friendly Designs
For usability testing, I conducted in-office guerrilla testing as well as reached out to participants on our research and user testing slack channel. The users were asked to share what they were doing, thinking, and feeling while interacting with the prototype and trying to complete the tasks given to them. I tested around key flows I identified earlier in the user flow section (Flow A, A Alt, D). I asked the user to navigate multiple flows and take actions like sharing a referral link out to your network after logging in or setting up your wallet to view your nodes.
Method: In-office guerrilla testing, user participation from research, and user testing slack channel.
Participants: 4
Age Range: 28-48
Average Time: 3-5 minutes
Task Completion Rate: 98%
Overall, the testing showed positive results and most users found the process easy to navigate and understand how to complete their task.
OVERVIEW
Revisions and Updates: Refining Your Project
Taking what I learned from our phase I version of this project, I made some key updates as I progressed toward phase 2 on this feature.
PHASE 1 - The MVP phase would build out several key flows to allow a user to refer others and obtain their rewards.
PHASE 2 - I would iterate on the home landing page to include several sections to allow a user to take more actions and get involved in our ecosystem. Sections added were onboarding, marketing banners, widgets, graphs, and web3/crypto news RSS feed. I also transitioned the designs from our current design system to MUI styling and components.
Home Page Phase 1
Home Page Phase 2
Final Prototype: Ready for Launch
Taking my revised mockups, I worked on creating a final high-fidelity mockup and prototype. With this phase clearly defined, I worked on incorporating new feature set ideas as well as anticipating future iterations.
Reflections & Impact: Learning from Experience
As someone who wasn’t very familiar with marketing referral processes and techniques, I had to learn a lot through research to gain a better understanding of the intricacies and possibilities. Working closely with our product management team, I was able to discover our core strategy and solutions to our referral and sales problems. This was key in speeding up my workflow and understanding for phase II and beyond.
✅ Over 40% projected conversion rate for organic traffic landing on marketing funnel page
✅ Over 80% projected adoption for new users signing up for a wallet after creating an account
✅ Over 70% projected success rate in sharing their referral link
✅ 100% of users find the process streamlined and easy to use based off of initial feedback