Magic links
November 2021 - 1 month
B12 innovatively introduced a payment link with auto login (magic links) to simplify the payment process. Previously, leads faced hurdles entering payment information through a link sent by a salesperson, requiring email and password input. The new approach automatically logs in leads when they visit a payment link, streamlining the checkout process.
Organization:
B12
Role:
UI/UX Designer and Researcher
Programs:
Figma, Full Story, Miro
What is B12?
B12 is a centralized, do-it-for-you platform that enables professional services firms to easily establish, run, and grow their business online. Within 30 days, B12 sets business' up with all of the tools needed to reach clients, offer their services, and get paid.
B12 supercharged AI instantly drafts a website, and their team of copywriters, designers, and SEO specialists brings businesses online in 30 days. They deliver a search-optimized online presence with the integrated tools their customers need to serve and charge their clients.
Overview
When a B12 salesperson has successfully acquired a lead, the next step involves securing payment. Once a customer has agreed on a plan that best suits their needs, the salesperson's process requires obtaining the customer's email, password, and payment information. However, both leads and sales reps encounter challenges in sharing and collecting payment details. Leads would rather make a payment on their own using a secure payment link and/or don’t feel comfortable giving credit card information over the phone. These transactions typically take 24-48 hours to close or longer.
Target users
Customers
who are trying to pay B12
Salesperson
who receives payments on a screen share/call
Problem
New sales channels (Bark, Thumbtack, Direct-to-ICP, Direct-to-demo, Outbound) demand a different approach than the initial inbound signup flow, leading to challenges in creating customer accounts. This has resulted in a confusing customer journey, causing login issues and frustration for both customers and the sales team.
Before
User Journey
Legend
Inbound
(Lead is already in product)
Outbound
(Salesperson calls lead)
User Research
To gain insights into the customer payment experience, I inquired about pain points from the sales team. Subsequently, I conducted interviews with two distinct sales representatives to address any questions and identify potential improvements based on their feedback.
(2) Sales representative
Full stories
Insights
Based on the instructional videos and discussions with the Sales representatives I concluded the four main pain points on the customer payment setup experience:
1
Streamline the process of sending customer links for self-payment.
2
Improve the experience of links requiring login.
3
Incorporate professional, branded PDF invoices.
4
Implement multi-account functionality.
User Research
In order to understand the domain setup experience better I asked one of the B12 CS members to record the 2 different paths when they are setting up a domain for a new customer. After reviewing the recordings I interviewed 4 different CS members to discuss any questions or improvements I felt that are needed for the domain setup experience.
(4) CS members
Full stories
User interviews
Ideal User Journey
Informed by research insights, I crafted an enhanced user journey, addressing the gaps identified in the original flow, for a more intuitive UI/UX experience.
​
Anything that’s highlighted does not exist in the current experience
Inbound
-
Lead clicks ad
-
Visits landing page/signup flow
-
Demo scheduled
-
-
Salesperson calls customer
-
Customer wants to pay
-
-
Salesperson configures cart and sends email to customer
-
Customer gets email with cart link
-
Email has PDF invoice attached
-
-
Customer clicks link, which automatically logs them in
-
Customer sees cart with payment form
-
Customer sees Invoice with a button to download PDF
-
-
Customer enters payment information
Outbound
-
Salesperson calls lead
-
Salesperson confirms details with customer and creates account
-
Salesperson configures cart and sends email to customer
-
Customer gets email with cart link
-
Email has PDF invoice attached
-
-
Customer clicks link, which automatically logs them in
-
​Despite being logged in, because they have never before set a password, it asks them to pick a password.
-
Customer sees cart with payment form
-
Customer sees Invoice with a button to download PDF
-
-
Customer enters payment information
Design goal
-
Create a clean and informative cart checkout page.
-
Display personalized proposals with plan details.
-
Ensure mobile compatibility for payment and proposal viewing.
-
Enable customers to download a professional branded PDF directly from the checkout cart.
-
Automate customer email communication upon clicking the "Send" button.
Outcome
The implementation of auto login and magic links has significantly enhanced the payment experience. Leads are now seamlessly logged in when accessing payment links, eliminating the need for manual login steps. These improvements have resulted in a 30% decrease in drop-off rates and improved conversion rates. For outbound leads without a password, the system prompts them to set one before adding payment information, ensuring a smooth transition.