We built SterlingNOW to help Sterling expand its reach for background checks into the SMB space. After an MVP launched, our team’s research showed a lack of UI craft discouraged signup rates. I drove attention to detail in the UI implementation, and the redesigned signup flow doubled our conversion rate.
A long, dense signup form discouraged signup
Our team shipped an MVP with a signup form for small business owners to order background checks for new hires, but conversion rates were low.
Our customer research found two pain points to address:
- SMB owners are more likely to utilize simpler looking interfaces—compared to the HR professionals Sterling often designs for, who use more complicated workflows in their software every day.
- Potential customers shared that our signup form looked unprofessional, which discouraged them from trusting SterlingNOW with their business.
Getting support to deliver agency-level polish in an enterprise B2B company
Our research showed that potential customers expect our platform to look professional. To deliver on this, I made a business case for implementing the design in a level of detail unprecedented within the company.
The business model for SterlingNOW was different from typical enterprise B2B software, where some teams believe that if the person using the software is not also paying for it, then executing well on design isn’t a valuable investment.
I pointed out that for this project, the person using the app is also the person paying us. If we don’t deliver the amount of polish it takes for them to trust us, we won’t win their business.
This includes little details that make a big difference, like using column grids, font ramps, and spacing ramps to establish a visual rhythm.
An engineering manager had a little concern that I might be “boiling the ocean” with so much detail. I replied that these are all details I learned how to work with quickly in a recent agency role, and that some quick project setup won’t cause us to lose velocity.
I was able to get buy-in to build a style guide quickly, so our software engineers can build the design right the first time. This would allow us to avoid a time-consuming clean-up pass on dozens of pages at the end of the project.
Translating a mid fidelity prototype to high fidelity React components
The team chose to make our form easier for SMB owners to understand by splitting it up into smaller pieces, and adding some friendly imagery.
Our prototype focused on form structure, and general look and feel, but details like grids, font sizes, and accessible colors weren’t prioritized. I saw this as an opportunity.
I met with our designer, almost like how an editor works with a writer, to propose improvements to these little details that make a big difference. I worked on these fine details directly in code, until we both felt the React components in the style guide delivered the high fidelity version of the desired design style.
Using the company’s design system where it made sense
I used Sterling’s core design system for UI primitives, like input fields and buttons—but I didn’t strictly adhere to the design system.
Sterling’s target users are enterprise HR professionals, who are pretty different from a small business owner. We diverged from the design system when doing so enabled us to better design for our customer base.
Launching the redesign doubled our conversion rate
Knowing that potential customers were turned away by a design that didn’t look professional, getting a 2x conversion rate showed that getting visual details right makes a real difference in driving value.
My decision to start with a style guide for form pages paid off. Engineers had plenty of work with form validation, managing form values in global state, saving progress in the middle of the workflow, and more. This gave me space to work on the special case pages, without blocking engineers.
Setting up the right meetings with the right people
When the details in the prototypes weren’t quite right, I scheduled some jam sessions with just the designer—but opted not to invite stakeholders until we felt confident about presenting the work.
The one-to-one meetings with the designer went over very specific design details, which required design experience, and design education, to actively engage. It wouldn’t be productive to ask a stakeholder to micromanage details that don’t align with their motivation or responsibilities.
So the designer and I had jam sessions together, and then presented the output from those meetings. Our stakeholders were pleased to see us working together to help level up the quality of the UI—especially since our user research explicitly identified this as a requirement for customer growth!