How to Build a Flow Framework with HubSpot Forms API | HubSpot.Extend() 2022

Hi, my name is Kiera Mitchell and today we'll be talking about how the the Web Experience team at Betterment built a REACT enabled multi step flow framework for lead generation on HubSpot. Before we get started I would like to take a few minutes to introduce the speakers, myself, Karen Mitchell and Neil Janzon who will be joining us within this journey. At first let me talk about myself and then we'll give Neil some time to introduce himself. So I'm a front end web developer, been working in the marketing industry for over 10 years where I started out as a graphic designer designing marketing materials such as ebooks, infographics, Google Ads, banners, you name it, et cetera. About six years ago I started multitasking where I did both design and development. I focused most of my development time between the HubSpot CRM and WordPress as well. About two years ago I decided I wanted to make the switch and focus more on web development. And over a year ago I got the opportunity to start working at Betterment and so now I just live in HubSpot daily. I currently live in Tampa, Florida. In my spare time when I'm not working I like to bike ride Rollerblades which isn't going so well, hanging out with friends and occasionally international traveling. My favorite travel location was Cancun at the Grand Moon palace in Mexico. Well, that's enough about me. I'll pass it on to Neil to introduce himself.

Thanks Carrie. Hi everyone, my name is Neil Janzon and I'm a web experience developer at Betterments as well. I've been working in the marketing industry for over eight years now where I primarily worked in content operations and e commerce site merchandising. And it's really in marketing where I really fell in love with working on CMS platforms like Oracle and Deco or Salesforce Commerce Cloud to build and optimize site experiences. Over time I eventually became more involved into the tech and the code behind CMS platforms and transitioned into development full time which I've been doing for about like two years now outside of work. Some fun facts about me is I currently live in Los Angeles, I'm a really, really big Pokemon geek and my dance of choice is shuffling, which I definitely need practice on. Probably more practice than Carrie practicing rollerblading. So again, Carrie and I have been working at Betterment for the past year and for those that don't know who we are, we are a consumer tech company where we offer digital investment and cash management services through our mobile and web apps. Carrie and I work on the public facing betterment.com site we work closely with marketing, design and engineering. So that's enough about us. I'm going to pass it back to Carrie to kick off what we're here to present for.

Thank you Neil. And so to get started, let's first, you know, give a little bit of a highlight on some of the topics we plan on covering and so and then we dive into it. So the topics we'll be covering is why multi step flow framework. We'll be talking about some of the wish lists we got from our stakeholders, we'll be talking about how exactly we actually pull all this together and then we'll highlight some of the benefits between our three target users and we'll define what that means later on as we go. And then we'll just showcase talk about some of the results that we got from all of this. And with that, let's begin. As mentioned, we'll be talking about how we created the flow experience within HubSpot and how we've integrated React framework into that experience. But in order to understand the reasoning, we'll first need to understand why. So let's create a scenario here. Have you ever been on a site where they're asking you to fill out 15 to 30 plus fields on a single form? This can be a big deterrent, especially within the marketing industry as we find that it's important to maintain engagement and interest within, you know, our short attention span users of today's market. With that, it's sometimes encouraged to shorten your form. So it seems not as overwhelming. Unfortunately, sometimes we need to Here was.

That we wanted this framework to maximize the full power of HubSpot, taking advantage of the CRM, HubSpot forms, HubDB and even potentially HubSpot APIs. We really wanted this construct to take full advantage of HubSpot. So you could see, you know, we had a good amount of things that we wanted for this framework. And while HubSpot does have a good amount of tools produce amazing site experiences, unfortunately there were still some challenges and considerations we needed to spike and solve for. For instance, the the biggest challenge was there was no native way to build form experiences as flows on HubSpot and also no immediate way we can build single page applications on the platform because we really wanted to use React for this. So we had to build this from scratch keeping in mind that one we wanted to have reusable components for scalability when building the flow and two we also needed a way to manage state to easily persist data between flow steps. Both things that we had to spike for and, you know, really understand how we were going to do so. With this huge amount of requirements, wishes, and knowing the challenges that we have had ahead of us, how in the world did we build this? So Carrie, who I will pass to, will continue this journey and talk about how we did it. Yeah.

Thank you, Neil. So we'll talk about how we actually went ahead and built this. So first let's look at some of the features that we had at our disposal, starting with HubSpot Hotspot provides us with personalization token tokens represents the CRM objects like contact properties and company information. This basically tells us that when HubSpot stores data, contact and information property, we natively have access to those data and can use them to create customized experience for users as well as printing those data directly on a page using workflows within HubSpot. It's an incredibly powerful automated tool that allows marketers to nurture leads as well as manage their sales pipeline. This basically means you can set criterias that then determines the next most best business steps for a contact to take or even just bucket these contacts within certain criteria. This tool really helps for sales and marketing efforts, but it also is very handy for developers as well, such as taking advantage of the web capability. Custom Modules this is probably the backbone of HubSpot in my opinion. It offers a wide range of functionalities so that contents can be fully customized within a page. This allows us to package and isolate, you know, each initiatives or flows in our case as their own experience. And yes, we've built quite a bit of flows in in that time. Serverless Function well, this provides a native way for us to write server side code that interacts with the HubSpot third party services through the use of API HubSpot forms. Well, as Neil mentioned, it's a, you know, it's a tool that is used to build and create customized forms for specific purposes using drag and drop functionality. This also allows to perform form submission via API methods as well as kept tracking information about the user. So we can still take advantage of the native data analytics that comes with a form submission and HubSpot. Moving on, we then looked into the react libraries that we have access to. So to name a few that we took advantage of, we took advantage of Formitable, which is a form management library that provides components and hooks to ease the process of creating react forms. It keeps track of field values, manage touch points and handle submission. This reduces the time needed for us to handle state wiring as well as building a custom form that we obviously needed in order to create our experience. Yup. This is a library that integrates very nicely with Formix and uses and we use it to like handle field validation. In our current setup we wanted to stimulate a similar experience platform for consistency so we can ensure that each fields on focus gets an immediate validation and so the user can see if these fields are required or didn't have the correct input value. The as far as the components, you know, which is components or framework that is notoriously known for, you know, for like this approach, we currently have 130 and we also have quite a few components that we've built that specific for a particular flow flow state provider. This is an internally built library that's managed by our full stack development team that we use as part of our core framework, which manages routes and share states and values between steps. The idea behind this is wherever the user goes, the flow knows. And with that said, I know that was kind of a bit to take in, but we'll go ahead and try to explain a little bit about how we, you know, all these pieces came together within, within the illustration. So let's talk talk about the, the, you know, how this come together. All right, so basically again the module is basically module, custom module is basically the core of this whole build. And the OSMOT module we able to add a bunch of fields in there, we're able to group a bunch of stuff which basically allows the content editors to be able to edit certain information. But we also took it to the next step. So obviously we are integrating the. What you call it form into a module via the use of the form id. But we also are pulling in our personalization token into a module as well. We then pass all this information into our react component which then compiles all the data and taking it as well as taking advantage of flow state provider, etc. And then passing information back into our module. Once all the information is properly handled into our module, we then take that module and put it on the page. Once the page loads, what this does is it basically goes and hit our endpoints which then fetches the field definition and then on success it passes information back onto the page and then it basically prints all the information on page some of the information we're looking forward or like you know, the field id the. The. The field label, what you call like. Like place, order, text, et cetera to basically build a form field. Right. As well as obviously before we took advantage of the personalization token so that basically auto fills the field value on the page and so Neil will kind of show you what that looks like in experience on the other screen. Yep. And so this is pretty much what this ended up looking like. So again we have the field labels, we have the, the default values that now we can see, you know, based on certain users who we already have known value about, they, those can be autofilled, which reduces the stress of the user, you know, filling out the form. But then also if we look at the top, we realize that we have a path. In this case we have like email and we also have a few steps. And so these steps are basically being managed by a flow state provider which allows us to go forward and backwards between steps as well as consume all the data that we need if we go back onto the illustration. So once that information is now loaded on the page properly, user's able to obviously interact with the page. And then once the user gets to a point where we feel like some sort of submission would need to happen, the user clicks submit and then the information goes back to our serverless function. Right? And then from there, assuming everything goes well, it pushes the information back into the HubSpot CRM which then is now consumed and then hit our workflow. Now the benefit of this from a development standpoint is once the workflow runs the way our marketers think that it needs to run in order for it to achieve its best goal, then we can also hit a webhook, which we can then integrate all this data into, you know, some other third party information if we feel like there's a need in order to achieve our goal. And so with that said, we will, we will pass it on back to Neil who will basically go ahead and talk about some of the benefits that we've seen on creating an experience like this, as well as do a little bit of demo.

Yeah, thank you Carrie for that deep dive. Now I'm going to talk about just some of the benefits and outcomes between some of our three target users. And also we want to show you a demo afterwards. So, you know, we want to explore some of the benefits and results this framework has provided us from the perspective of our key users. So the, you know, these would be the developers like Carrie and myself, marketers and designers, and most importantly our website users. And we want to show you a demo afterwards. So, you know, we want to explore some of the benefits and results this framework has provided us from the perspective of our key users. So the, you know, these would be the developers like Carrie and myself, marketers and designers, and most importantly, our website users and prospects. So starting off with the development outcomes, first off, a really big win for us is this framework opened up the gates for us to use React and single page applications. Because of the relationship we build to flow data from a HubSpot module to react project, we are now able to build More interactive and JavaScript focused applications. Also because of React, this enables us to take advantage of routing and allow us to have greater control over our pages and what displays based off page routes, something we were not able to do natively. Third, this construct and the use of reusable components in React has allowed us to produce flows a lot quicker. Fourth, because this construct integrates the use of HubSpot tooling like forms, the CRM and even Hub DB, it really gives us greater focus on developing on one single platform versus our attentions divided on a bunch of platforms and systems. It's nice to know that we can just do everything in HubSpot. Lastly, given the speed in which we can produce flows and projects, this really opens up for even greater innovation and lets us as the developers give more attention to other projects. Moving on to some of the benefits on the marketing design side, this framework really solidified HubSpot as that one stop shop platform for our marketing team. Our editors and marketing team are able to generate leads in the CRM, have control over form fields within Flows, trigger workflow events, and also have the ability to update flow content without the need of a developer. This sounds amazing right? This ability to update content allows our marketing team to quickly set up tests using HubSpot's native AB tests. Because each of our React projects are within a reusable module, marketers are able to produce AB versions of a page, making minor tweaks to the same flow experience for each variants. We are also able to give our marketers ability to gain insights on user behavior through us integrating analytics code into our construct to track user events. Our marketing team has already created a report on user behavior on one of our signup flows that we launched this year. So pretty neat. Lastly, having React in this Flows framework allows our design team to create more complex and interactive layouts and experiences. They're able to create more interactive things and our construct allows us to build it. Lastly, but also most importantly, here are some outcomes for our end user. Our Flows framework has provided a more dynamic and more personalized way of filling out forms for our users. To Kerry's point earlier, because of the usage of the personalization tokens, we're able to pre fill form data based off existing records and also dynamically start the user in a specific flow screen agnostic of devices. We'll demo this in a bit. Aside from flow experiences to fill forms, our users can also consume content in a more rich and engaging way through a flow. This helps us tell better stories to our users through screen to screen experiences. And lastly, because of the benefits of the single page application, React, there's also the benefit of perceived and actual page speed as our users do not need to load a page when going from one flow screen to another. So pretty awesome benefit. So you know, Karen and I have been talking a lot and we've been, you know, we talked about like what exactly we're building our wish list, how we build it and like the outcomes. We definitely want to use this time now to show you what you know, these flow experiences look like on our site. So we're going to show you two different types of flows, starting off with our one of our signup flows. So voila. This is an example of one of our flows on betterment.com and you see like on the page, like what we pointed out earlier, we do have progress steps to let users know where in the flow that they are. And our flow experiences that take advantage of the forms API, there is a one to one relationship. So in this flow experience that I'm going to go through, all the fields that we see exist on one single form. So for example, this screen right here, all of these are controlled by one field. And because of that API, our editors are able to go straight into that HubSpot field and update the labels, add more options, and it should quickly update it on the front end because of that API. So I'm going to make some selections right now, pretending I'm a new customer. I'm going to click Continue. And you see we are now stepped into screen two which uses again just another field from that HubSpot form. So I'm going to select a little bit more here. Click Continue. I enter screen three. No form fields here, we just see like more content. But if I click on schedule my free call, you see that I'm in another screen that shows four more fields from that form and it's really here where if a user were to click Continue, this actually does send a submission to the HubSpot API and that generates the contact. And one also neat thing that we want to show you is I can step back because of, you know, us using React and because of state management, we are able to persist data as I'm as the user is navigating from one screen to another. So you see that these are still checked off and these are still checked off. Some other thing that we also want to show that Carrie pointed out is the persistence of data if you already know information about you. So let's say I'm a user that you know, we have information about you already from the personalization token or you've submitted the form already and you're just revisiting. So I'm going to like go to this screen right here. Let's say I revisit this flow, you see that I immediately go to step four. And that's because all the pre, the screens that exist before it, all these fields already pre populated by things that exist for that specific contact record. So our flow is dynamic enough to understand like what you've probably already filled and will take you straight to the screen that is missing information. So in this case we see that phone number is missing and is required. So it takes you straight to that screen. Some other flow that we want to really quickly show you about. So it's our crypto education flow. This one is a little different from the last flow in that it doesn't take advantage of the Husband form API. This field that we see here is hard coded. But this flow really shows us the power of flows in that we can use it to, you know, provide interactive experiences for a user that's content driven. So if I click on continue.

We.

See that the first screen is just a content piece really, just talking about what Bitcoin is. No form fields at all. If I click on next, you know, similar type of content. You see, it's just like a very step by step, you know, way of consuming content. One thing to note is on the this listing right here, this is all information coming from a specific Hub DB table. So our construct does allow us to use Hub db, which is pretty neat, allows us to use centralized data and content into a react project. So I'm going to just keep on clicking, you see, just, you know, very seamless and smooth way of consuming crypto information. Then I'm just going to finish this off. So here, you know, we showed you two different types of flows. One with the purpose of generating leads and another just to show a different way of consuming content for our users. So with that I'm going to pass it back to Carrie to talk about some of our key results.

Yeah, Neil, thank you very much. So as you can see, we've done quite a bit over the past few years since we've been here and we can see how we've built the flow when we've taken advantage of some of its features. So now let's look at some of the results, some of the gains we've got from that float. So a few things that happen. We've created over nine flows within about six months. Right. Using these reasonable patterns that we keep building on, we've tested you know, hundreds of user interaction and have started making small business tweaks to encourage, you know, engageability, enhance the user experience. We've produced much more qualified leads to sales since you know we are, we are not only providing them with a large form to, to, to fill out but you know, use as a great experience and then sales team now knows a lot more about these prospects when are able to really you know, dive into some of the their wish list and able to like be able to like solve some of those. We've seen less drop offs because again we're continuously making updates and ensuring that our users are getting exactly what they need, what they came for. And we've applied this flow building experience between multiple business lines as we have here. And so with that if there's any questions that you guys have for us, we'd like to say thank you guys for the opportunity to be able to do this presentation for you. And we hope this experience was able to inspire more creative approach that we could take with us part into like helping us you know, better market for our, our prospects. Yeah. And with that if you have any questions we'll like to go into a Q and A's now.

Thank you.