I’m Katelyn, a team member at B12, here to take you behind the scenes of our product development process 🙂 . As we wind down the first few months of 2022, our team is reflecting on some of the improvements we've recently shipped to enhance the customer experience.

First, let's start with a bit of context. Our mission at B12 is to make it easier for professional service providers to sell online. That means prioritizing updates that help customers work more efficiently, reduce friction and soften learning curves. This resulted in a few small but mighty enhancements taking priority as we kicked off this year.

This post breaks down the new improvements, with commentary from members of the B12 team to provide context for the changes, a glimpse into the process, and anticipated benefits from these updates. Let’s go! 🏃

New website themes for better brand differentiation

The problem

Looking at our website themes, the consensus was that some of our existing themes weren’t differentiated enough from each other. When customers switch between options, looking for their favorite, we want to provide distinct designs that elicit a gut reaction. This allows someone to quickly determine what works for them and which option will make the strongest first impression on a prospective client. We also chose to retire a few less effective themes that didn’t resonate with many customers.

The approach

Filippo Di Trapani is a Senior Product Designer here at B12 who felt strongly that improving our theme aesthetics would provide a better starting point for our experts and increase the overall quality of our customers' sites.

“When we started working on these new designs, we decided to work directly in the B12 Editor, rather than a design tool like Figma, Sketch, or Adobe Photoshop. This helped us in several ways:

• It helped me understand what was possible
• It made the scope of work very clear
• It made it easy for our engineers to implement the updates into our product because they had a living example to reference”

For Filippo, ensuring that all components remained cohesive was key to tackling this efficiently.

“The biggest challenge for me while working on this project was keeping track of all the shared pieces of our product, like our colors, fonts, and sections, and how they would be applied across the different themes. We had to pay special attention that the updates we were making in one theme wouldn't affect our other themes. The best way to do that was with lots of testing once we began implementing the designs into our product.

Once we completed the designs, we shared them with our experts to gather their input and make changes. Their feedback helped standardize some of the updates so that we could remove any repetitive work they might have to do every time they start a new site.”

The solution

We created new design themes and updated existing themes with revamped layouts, photography, colors, animations, and typography.

The six beautiful new themes are Clean, Minimal, Bold, Modern, Classic, and Futurist. Each one is user-friendly for our customer’s visitors, with updated fonts and pairings for better readability and an expanded color spectrum so customers have options that match their branding.

Accessibility, especially from a color contrast perspective, was a big area of focus. We also found more captivating photography (e.g., images of people instead of objects) that’s brighter and more inclusive, fostering a more engaging experience for our customers’ visitors.

Now, customers have plenty of options when looking for a theme that fits their branding, and the clear style distinctions between themes make it easier to gravitate toward one that aligns with their brand personality.

The impact

With greater customization now available, customers have more flexibility to showcase their brand and aesthetic. Visitors to their website immediately get the impression that this company is a credible, professional service provider. The website looks great, functions seamlessly, is cohesive from page to page and on any device, and emphasizes the most vital information, all of which pushes visitors toward purchasing our customer’s services.

Learn about web design options

Adding file uploads to forms for more efficient intake

The problem

This was a popular request! Many customers using B12 flagged that they often needed their clients to upload files or forms as part of their intake process. So to kick off 2022, tackling file uploads became a top priority.

The approach

Daniel Haas, our Director of Engineering, focused on making uploaded files easy for customers to access without sacrificing security.

"One of the critical considerations with this project was how to make it easy for a customer to access uploaded files without exposing a client's potentially sensitive information to people who shouldn't access it.

If you're logged in to B12 and click on a newly submitted file in your email, an authentication layer confirms your access and shows you the file. If you happen to be forwarded an email but aren't logged into B12, our software will prompt you to log in to your account before you can open it."

The solution

Not all customers need this capability, but for those who've elected to run their business using B12, we've added this feature to our Standard plan and above. These customers can add a file upload option to their website forms, allowing their prospects, clients, and other website visitors to share documents, images, and various file types.

After someone submits their form with an attachment (jpgs, gifs, pdfs, docs, and xls files), B12 customers can find and download the attached file(s) in the Contact Manager under a specific contact’s profile or in the confirmation email they receive. The total file size limit is 20MB across all files uploaded.

The impact

File uploads allow our customers to more efficiently qualify leads and onboard their clients. People can create forms to collect multiple documents, such as registration forms from clients during the intake process, or accept completed service questionnaires from interested leads.

Adding this one simple field to a form can help business owners prioritize leads and tailor their services to fit a client’s needs. It also eliminates any back-and-forth communication that’s quickly solved by attaching a document for context, while keeping that context all in one place in the B12 Contact Manager.

We’re super excited about bringing something to life that so many customers have requested, and we know it will allow them to stay organized, save time, and cut down on the steps it takes to convert a lead or complete the intake process.

Customize your forms

Payments and Invoicing improvements to save time

The problem

As more customers use our Payments and Invoicing product, we identified several ways we could simplify the experience without sacrificing the elements that are already intuitive and familiar to them. We wanted to improve its functionality and make it more visually appealing.

Most notably, we wanted to make it easier for our customers to issue a payout, view payment details, act on a specific invoice, and update their banking details in fewer clicks, without navigating through 3-4 screens to find what they’re looking for.

A few customers told us they couldn’t find where to issue a payout, and because getting clients to pay on time is already difficult, we didn’t want our product to further complicate an already tense process.

The approach

To ease the use of online payments for B12 customers, Product Manager Meredith Blumenstock was proactive about spotting and solving any issues that might arise, to make the experience convenient and clear.

“Our online payments system is powered by a best-in-class payment process platform called Stripe. By leveraging a third-party tool like this one, we can provide a high-quality, secure payment experience for our customers and their clients.

For the B12 product team (or any product team), a challenge that comes with third-party tools is that we sometimes have limited control over what the customer sees, such as Stripe's instructions and error messages while adding a bank account.

In such cases, we identify all of the screens and possible errors that a customer may encounter. Then we supplemented Stripe's instructions in the B12 product to help customers feel more comfortable sharing sensitive information. We also provided guidance to help customers troubleshoot possible errors that they may receive from Stripe."

The solution

We started by looking at common payments-related actions customers were taking and asking how they could do this all from one place. Now, our more robust Payments table simplifies payouts, lets users see invoice details (including client information, payment method, and status), and lets them take action on an invoice (open it, duplicate it, or issue a refund) directly from the table view.

The process to add or update banking information is smoother too, with clearer guidance so it only takes seconds to complete. The table also looks nicer and more visually consistent with the product experience of other B12 tools.

The impact

With fewer steps to edit their banking details, our customers can set up Invoicing quickly, customize invoices, and send them off to clients without delay. Once set up and users start receiving payments, it’s possible to view invoice details, follow up on payments, and issue payouts all from a single screen. Less clicking around in the Payments and Invoicing dashboard means money landing in their bank account sooner. 💸

Seamlessly transact with clients

700% faster B12 Editor to boost productivity

The problem

We always want to give our customers the most useful starting point and saw an opportunity to make the B12 Editor more efficient. The faster our platform is, the faster we can help customers update their online presence, leaving them more time to focus on what they love.

The approach

Edil Kratskih, one of our Software Engineers, saw this update as a win for customers who would appreciate being able to make edits more efficiently and our engineering team.

"This was one of those rare projects where doing the right thing from a customer perspective (drastically speeding up the editing experience) and doing the right thing from an engineering perspective (rewriting the experience using a more modern frontend framework) were one and the same.

One challenge is that we wanted to keep developing new customer-driven features while rolling out the rewrite. To accomplish this, a small group of engineers created a shim that allowed new functionality to be implemented in the newer React framework, and while most engineers started writing new code in React, a few of us rewrote the older untouched code until we reached 100% React. For engineers, it's sort of like rebuilding a plane while it's in the air, and for customers, it's like starting a flight in economy but ending it in first class."

The solution

The B12 Editor is ~700% faster. No, that’s not a typo! The before-and-after videos are mind-blowing. We achieved this massive speedup by migrating off of an older frontend framework and rewriting the experience in React. Phew.

The impact

This update promises significant performance improvements for everyone who uses B12, including our customers and their clients, as well as B12’s designers, copywriters, SEO specialists, sales and CS teams, and engineers.

It’s significantly quicker to edit a form, publish a blog post, or issue a payout. All that efficiency in the editor leaves our customers with more time to tend to clients. And since B12 experts use this tool every day, enabling them to work more efficiently makes it more affordable for customers to request updates and have us do projects for them.

We know that time equals money, and this is another way we provide our customers with tooling that adds so much productivity to their work, they feel like they have superpowers. ⚡

Use the Editor

Thank you for reading!

We continue to approach our product development laser-focused on what will save our customers time, make them more money, simplify how they work, and help them grow their business. I encourage you to follow along as we release customer-centric improvements each month to make selling services online easier!

If you haven’t already, try B12 to see these updates in action, and if you have feedback or suggestions for features, please get in touch.