X
X

Case Study: How Bal Seal Engineering Streamlined Online Conversions

By Stacy |  Apr 17, 2020 (4 min read)

UX | Video | Web Development

Bal Seal Engineering is a large firm within the Fabricated Metal Product Manufacturing Industry, specializing in custom design and engineering of seals used in engineering projects ranging from motor vehicles to medical tools, to spacecraft. 

Their major touchpoint with their client base is the Design Request Form (DRF) on their website.  Typically, users submit a design request which gets routed to Bal Seal’s sales team for processing and follow-up.  

Bal Seal Engineering came to Brandastic with the goal of redesigning their website to adopt a more modern brand, and to focus on heightening conversions on their Design Request Form (which is how Bal Seal gets new business requests).

We simplified their customer intake process and streamline the overall buying process. Over time, our client saw a 7x increase in their conversion rate. Here’s how we worked together to make it happen.

A Slow, Confusing Sign-Up Process

Bal Seal Engineering’s DRF was long, convoluted, and hard to complete. It asked a lot of technical specification questions upfront that deterred users, especially for those customers early in their engineering workflows.

This long process contributed to lower conversion rates and a lack of efficiency in their sales process.

The DRF had a conversion rate of only 4% with no way to track partial entries. This low result meant that contact information on potential leads was not getting funneled to sales for potential follow up and conversions.

 

Beginning With a Strategic Review

The initial process of understanding the business needs began with the discovery phase. 

The strategic review process

During the discovery phase, we started with a client interview/discussion of the goals of the form for all user types to confirm the necessary fields. 

From there we outlined the UX problems, brainstormed solutions, and prioritized fields. This allowed us to move into the design phase with a plan of attack.

 

The main focus was on how to intake process should affect users offline in the sales funnel, since their internal team would be processing submissions.

Digital Wireframing

After a full review of the client’s needs, the Brandastic team had enough information to begin creating the initial structure of the new form.

Example of the new design request form mockups built in Adobe XD

 

Using digital wireframing helped to get user feedback for each version. 

A digital wireframe is a visual model that outlines the structure of a website.

We built all the wireframe pages in Adobe XD which gives us the ability to click through the form as a regular user would.

Very often, clients can get diverted into the design, which is counterproductive. At every stage, it’s important that the Bal Seal team was focused on the goals behind the proposed changes rather than simply the design prototypes.

The wireframing & prototyping process

High-Fidelity Prototypes + User Feedback


Once we showed the client our initial ideas for the form fields along with page structure and applied their feedback, we moved into building a high-fidelity prototype for the Design Request Form.

Using Invision’s prototyping tools, we were able to design out the new pages according to the rebrand’s guidelines. This also included hotspots for the client to click through and simulate walking through the form’s flow before spending dev hours to build.

The final design that the client settled on was a three-step form that was compressed into collecting key information: contact info, primary product type, and comments/files.

This new form suppled enough basic information for Bal Seal’s sales team to use as touchpoints and to expand on via client contact. 

This new DRF solved the issue of asking for too much information upfront and intimidating users.

 

 

Highlights:

  • Added a progress bar to show how much a user has completed/has left
  • Added color and imagery for a more exciting user experience
  • Created a simplified step by step form so it didn’t feel so overwhelming to the users.

A/B Testing with Google Optimize


The initial launch of the redesigned DRF was intended to gather baseline data for the facelift, to see how much impact a new design and simplified form would have.  

A month or so after launch, Bal Seal reached out to our team to move forward with A/B testing the DRF.

Brandastic then rigorously A/B tested different forms in order to get the best possible conversions.

The two form versions tested were:

    1. A – Multi-page (3-step) form (4.8% conversion baseline)
    2. B – Single-page (1-step) form 

 


The development included using Google Optimize due to its integration with Analytics and Tag Manager.

The Google Optimize tool handled a lot of the brunt work in terms of collecting session information and displaying the A/B version so that we didn’t have to custom code any scripts for tracking sessions on each version. 

This allowed Brandastic and Bal Seal to focus on results rather than technicalities. It also removed the need for the client to go digging for relevant information, as it was presented in the Analyze dashboard.

 

Increased Conversions and Easier Customization

After concluding the A/B test, which ran for 30-50 days, there was no clear leader between the two form versions. 

However, the client selected the single-page version of the form so that users wouldn’t have to click through different pages and potentially bounce off. 

 

Single page version of DRF



A single page form also means that it’s easier to edit information by scrolling up and down rather than clicking back and forth through pages (even with only three steps).

Further user data and behavior can be captured with the use of Hotjar and more significant differences between the A/B versions of the form. 

Beal Seal continued to run their selected version of the DRF form and they have continued to see positive conversion rates that back up the experiment.

 

The Results

After implementing better user experience across the entire Bal Seal website including what Brandastic had implemented on their lead generation form, Bal Seal has continued to see positive conversion rates that back up the hypothesis we tested with the user experience design changes we implemented. 

After 8 months of monitoring the Google Analytics page data, we’ve seen an increase from 4% to 29% conversion rate on the form.

Below are the metrics from the old form baseline vs the new form baseline.

 

A Fresh User Experience

 

Our strategy to help Bal Seal Engineering innovate in this regard was to be extremely hands-on and iterative in the design process.

This has been one of our most extensive design projects to date, spanning over pages of custom, high-fidelity mockups and wireframes, and a refractor of their biggest conversion point, their Design Request Form (DRF).

We overhauled more than their lead generation form, but their entire website and mobile experience.

 

 

 

 

Want to increase your online conversions for new customers? Brandastic is a digital marketing and UX design agency, with offices in Orange County, Los Angeles, and Austin. We help companies grow online customers and increase conversions through better design and testing. Contact us today to see how we can help you.

Every Brand Has a Story to Tell.

Let us help you tell it.
Free Consultation