How Unbounce Solves UI/UX Issues to Improve User Signups

We had a chat with Brian Holt, UI Developer at Unbounce, about some of the challenges with designing useful interfaces for users, the importance of testing with analytics tools and how Hotjar helped to debunk some assumptions in the design of their processes and interface. Brian had some interesting points to share.

Tell us more about yourself and your experience with Unbounce.

Brian: I've been on the Unbounce team for a little over a year now. My official title is UI Developer and I code the visual components of our app. I've also been working on the creation of a Component Library, which will make developing and deploying UI easier. In my day-to-day work I'm on the team responsible for handling the customer portal in the Unbounce application. That includes page management, the user signup process, domain management, etc. It excludes the page builder, leads and integrations, and stats. Unbounce is a fantastic company. I love it so far.

Hotjar and Unbounce are like ‘cousins’ in the analytics and online marketing world. What’s the biggest challenge you’ve identified for users of platforms like Unbounce?

Brian: Unbounce's main business focus is to remove the bottleneck between a marketer and a developer by empowering the marketer to create their own landing pages. Many of those marketers don't have any coding experience, so the challenge for us, on the UX team, is to create a simple-to-use interface with the gentlest possible learning curve. One approach is to make the interface familiar. For example, marketers are already comfortable with Google Analytics so we take inspiration from GA and design our workflow to be similar. That way our customers won't need to learn something completely new.

Could you share how you’ve used Hotjar and how it helped to overcome a challenge or brought about success for you and your team?

Brian: Sure. Michael Aagard, our Senior Conversion Optimizer, had a hypothesis that we could improve our sign-up conversion rate by improving the UX of the sign-up process.

We require a billing address for our paid accounts and determined that that was one of the areas people signing up dropped off. In order to make entering the address easier, we integrated with an auto-completion API so the user could select their address and have it automatically filled for them. We ran some usability tests and everyone loved the auto-complete feature. It saved time and simplified the whole process.

When we rolled out the changes we enabled Hotjar to see how long it was taking users to sign-up and to see if they got stuck anywhere. To our surprise, we found that auto-complete was the number one spot people got stuck; our assumptions of how the improvement would be used were completely wrong. For example, people tried to copy and paste their address, which bypassed auto-complete, while others typed their entire address out, ignoring the auto-complete suggestion. And because of the way we rolled out the improvement, when they bypassed it, they were actually prevented from signing up altogether!

Watching the Hotjar recordings was both a humbling and exciting experience because we knew exactly what we needed to change and identified some serious bugs which would have cost us a lot in losses of sign-ups. For instance, we had a customer who was signing up for an annual plan of $2,000+ and they weren’t able to. So that was a loss we found that HotJar helped us identify, which we’re now able to prevent. We were able to make educated decisions in rolling out the fixes, which significantly improved our sign-up process. In fact, we saw someone complete an entire sign-up -- billing info included -- in under one minute and thirty seconds!

It was also surprising to see how our usability tests and real customer experiences differed. Typically, our usability tests are conducted with about 10 different people and they're asked to complete tasks. It's a bit clinical or sterile, but helps identify potential issues. Watching real people fail to use our brand-new "improved" UX was cringe-inducing and painful to see when all we wanted to do was help them. I can't think of any other tool that would give such valuable insights.

So based on that experience, would you agree that the most ‘ingenious’ idea isn’t always the best solution?

Yes, exactly! We were trying to be too clever and that just wasn’t the right path.

You mentioned that visitor recordings gave a completely different insight than usability testing where you invite a few persons to critique what you’ve built. Do you have a preference for either option and what’s the plan going forward?

Brian: While we won’t stop doing the traditional user testing sessions, recordings certainly do give a very different perspective and we plan to roll this out in more situations. For example, we want to dive deeper into the actions users take after they’ve successfully signed up and logged in to determine which features they use first, how they use it and why. We do collect data to see what buttons get clicked the most but the context within which these actions are taken is missing.

There’s a sense of dread and urgency watching a user struggle to signup for 17 minutes unsuccessfully and the recordings are better for evoking that response because it’s a real life scenario. It helps our UX designers to better empathize.

Are you using any other Hotjar features?

Brian: Yes, we’re currently using polls as a discovery tool to find out what users are expecting from specific pages. Some of the responses validate work we’ve already done while others are surprising. It’s a very useful way to get into the mind of the user.

After experiencing this bird’s eye view and realizing that the user’s experience doesn’t always match expectations, what advice would you give to marketers as they work to build interfaces and websites meant to sell and convert?

Brian: Start by building something designed to offer a basic or small experience for your audience and start testing right away. Then make adjustments as you get feedback. Build small and change fast and incrementally based on the insight gained.

Robyn: Great! That’s actually our philosophy here at Hotjar as well. We believe that working iteratively and ‘good’ is always better than great and perfect. If it’s good let’s ship it NOW and improve it LATER.

What’s going to be the big trend this year in UI/UX?

Brian: I think components and virtual DOM-type libraries are going to be a big trend this year. For example, React.js, developed by Facebook, and other single page apps frameworks like AngularJS make sites and apps feel snappier and more responsive. This work also complements the initiatives towards making the management of CSS files much simpler. The component library we’re working on at Unbounce is based on the virtual DOM library as well.

Final question, how would you describe Hotjar?

Brian: I gave a small talk about using Hotjar in our monthly Town Hall (company wide meeting), and to describe Hotjar I created a slide that shows a Slack conversation between Hotjar and UX designers.

UX Designers everywhere:

Hotjar is essentially a tool that'll prove your assumptions wrong so well it's a bit embarrassing. It's amazing.

 Robyn: I really like that! I’ve made this point so many times as well. Basically we can’t get into analytics emotionally attached to an expected result. If marketers and designers are too emotional about results, then the point is missed completely due to the mistake of trying to validate assumptions rather than seeking the truths in the user’s experience.

 Thanks so much for your time today Brian!