Problem

On most B2B websites, you’ll find the same static forms of social proof. Testimonials. Logos. Case studies. They’re one of the most powerful and widely used marketing tools to convert visitors into customers. However, social proof for B2B websites is notoriously difficult to capture and keep up-to-date, leading to stale content, expensive refreshes, and lost conversion opportunities.

Solution

Overview

We wanted to automatically capture and display relevant social proof for B2B websites, converting more customers and reducing marketing costs. After researching successful B2C social proof products, we planned to take the key features of these products and target a B2B customer. Given that logos are one of the most powerful and common forms of B2B social proof, this became the key differentiating feature for our MVP concept.

• Concept

  • Show visitors recent social proof through a pop-up message (the "Message"), which includes:

    • The most recent conversion event that took place (e.g. “Just signed-up for a trial”)
    • How long ago the conversion event occurred (e.g. “2 seconds ago”)
    • The logo of the converted customer

• Execution

  • Develop a third-party javascript widget that:

    • Gathers a B2B business’ ("User’s") conversion data necessary to populate the Message (“Conversion Snippet”)
    • Displays the Message to visitors of a User’s webpage (“Message Snippet”)

Development Process

The development process was formed not only to help break down a large-scope project into deliverables, but also to simulate working with a bigger team.

• Product vision and MVP requirements
• User Flow and System Design (detailed below)
• Sprint planning based on user stores (Asana)
• Code review
• Code refactor
• Product testing

User Stories

After working with the Product Manager to define our requirements and vision for the MVP, I broke down our rough sketches into user stories. Writing user stories helped me think through what I needed to do, as well as scope and plan out our sprints.

• As a User, I want to:

  • Be presented with a landing page for Leery that funnels me to the sign-in/log-in routes so it is easy for me to access the product.
  • Be able to configure and preview the appearance of my Message during the sign-up flow so I can use Leery right away.

  • While logged in to the Leery User App:

    • Access and be instructed how to use the pre-generated Snippets.
    • Edit my original Message and create new Message configurations.
  • Easily inject the Message Snippet and Conversion Snippet into my own codebase so Leery can function as described.
  • View the most recent conversion that took place, as well as the logo of the customer (“Customer”) involved so I can take advantage of the benefits of dynamic social proof.

User Flows

Before starting to code, I planned out the user experience to ensure it was both simple and well-architected. The diagrams below show the full use cycle of Leery. The colored labels (e.g. "User App") refer to the various components of the product, which are described in more detail in the System Design section below.

System Design

Leery's architecture was dictated by the needs that naturally arose from the User Flow above. The database structure was designed to easily enable table joins for both current functionality and future analytics features. For the application, I chose a Javascript tech stack (e.g. React and Node.js) to benefit from a single page application on the front-end and reduce context switching between front-end and back-end development. For the static landing page, Webflow saved hours of HTML/CSS styling to enable me to focus more on building application features.

• Leery Landing Page (Webflow)

  • Marketing site to explain the product and link to the User App.

• User App (React)

  • An app for B2B businesses to sign up for Leery and access the user portal.
  • The user portal allows for the creation and editing of Messages, as well as continued access to Snippets.

• Widget (React)

  • Loaded through the Message Snippet, generates Messages.

• Conversion Assist (Javascript)

  • Loaded through the Conversion Snippet, tracks Customer conversion data.

• API (Node-Express)

  • Connects to PostgreSQL database to store:

    • User credentials
    • User's conversion events
    • Customer's conversion data
    • Customer activity (e.g. User page visits, Messages viewed, number of conversions)

Deployment

To get Leery in production, I needed to deploy the API (Node.js) and various static assets (React, Javascript, HTML/CSS). I chose AWS as a cloud provider to take advantage of their free tier and “pay as you scale” model. Deployment was a multi-step process that involved considering which AWS product would be the most fitting for each component in the System Design. Whenever possible, I chose products that required minimal maintenance and configuration to maximize uptime (e.g. S3 and Elastic Beanstalk rather than EC2).

• Leery Landing Page

  • AWS S3 Bucket: https://getleery.com
  • SSL achieved through Cloudfront

• User App, Widget, Conversion Assist

  • AWS S3 Bucket: https://app.getleery.com
  • SSL achieved through Cloudfront

• API

  • AWS Elastic Beanstalk: https://api.getleery.com
  • SSL achieved through Load Balancer configuration and redirect code through .ebextensions

Future Enhancements

Leery has a lot of opportunity for growth, and I’m constantly considering ways to improve it. Throughout the project, I added tickets to our backlog as I found opportunities to improve security, add new functionality, or fix existing bugs. As we moved past the MVP launch, I prioritized backlog tickets to continue iterating on the product.

• Security

  • Increased obfuscation on the Snippet code itself to avoid tampering
  • Creation of more unique User ID’s to prevent theft of the product

• Functionality

  • In the User App, ability to delete Messages

• Tech Debt/Bugs

  • In the User App, the signup page should not submit if the front-end validation fails
  • In the User App API routes, instead of checking if a Message exists and then determining whether to create or edit a Message, use an upsert function

Team

The Product Manager mainly played a part-time role in helping to guide the vision, development process, and code reviews, while I worked on all other aspects of Leery full-time.

• Product Manager: Marshall Guttenberg

  • My husband and former software engineer
  • Currently Senior Product Manager at Hired
• Engineer: Myself