INBOUND 2016: Bret Peters "Creating a Multi-Lingual Email Subscription Experience"

Thanks. Always good to get a shout out from another Peters. Thank you. Sorry, this sounds really loud. Hopefully it's not too loud for you folks, but it's great to be here and obviously everybody in the room is interested in multilingual content. So I don't know if you saw the News yesterday, but HubSpot announced multilingual page support. So that's an exciting thing. So that's landing pages and webpages and if you haven't been on the beta on that or tested that, it's really exciting and really easy. What I'm going to show you today are some ways to deliver email based on some success that we've had with a pretty big client. So if I can figure out this clicker thing here. So here's our quick agenda and we'll probably have plenty of time for questions at the end and if you have questions during, you know, feel free to ask. But I'm going to try to cover all of the steps that you will need to take in order to create multilingual subscription experience. So I titled this Red, White, Blue and you I know not everybody here is here from the United States, so thanks. Of all of our international travelers who are visiting, I think we have this gentleman right here. His, his job is to promote his company that you can go to Cancun and swim with the dolphins. So that's much more exciting than what I'm going to show you today. But hopefully you can use these tips here. So the customer that I'm going to talk about this is a customer that has an up. They have the potential of actually reaching over 300 million citizens. Their goal is to do like Pokemon Go and catch them all. So catch all US citizens in their sites and get subscriptions and get them to sign up for the content. So the customer that I'm going to talk about is an experience that we had is USA.gov so figleaf. We actually are based in D.C. and we do a lot of work with the federal government. We're a service disabled veteran owned small business. And so we got approached by USA.gov to change the way that they do email marketing. They selected HubSpot and so the first thing we did is we wanted to get them to stop emailing every single citizen on their list all the time. So we created topic based subscriptions. And so the way this works is they actually have multiple brands that they serve. The first three that we started out with were usa.gov, gobiernousa.gov, which is the Spanish language version of usa.gov and kids.gov so they also have other brands underneath this such as business.gov and others that are coming online. But for this initial rollout, this was the first start. So English, Spanish and in the topic it said more. The concepts I'm going to show you here are all things that you can use for probably any language. Kids is not a language necessarily, but I'll talk about that in touch about why that's a little bit different. So everybody here familiar with HubSpot subscription pages? I guess question maybe show of hands, how many people are actually using HubSpot today? Just so. Okay, most of the people in the room. That's awesome. So within HubSpot you can create your subscription page, your topic based page. And so here are the things that we were trying to collect were email their location, so state or territory or zip code. So one of the things that USA.gov had a challenge with, they were emailing everybody all the time because they didn't necessarily know where people were from. So because they're the government and we all know that in the US the government spies on us like every place else. Right. They would listen to everything that we're saying. But the challenge here, they really only had emails from their legacy email provider. So we started to introduce the idea of collecting a little bit more data. If customers want to give it to us, citizens want to give it so they can select the topics of their choices and then we can get a little bit more information. So on the Spanish language side, we have the same or similar experience. So we literally took the English language experience and we swapped it for the Spanish experience. I'm going to talk about how we did that. And for kids.gov what we did is we actually had a couple sections for just for kids, for parents. It's hard to see probably up here, but yeah, for parents and guardians and for teachers. So prior to the HubSpot implementation, they had dozens of topics for kids as well. And so when we went through with a content strategy, we really were able to figure out that they really had two Personas that were coming to get content. They don't actually have kids going to kids.gov, it's parents and guardians or teachers. So on the forms here, what you'll see and it's not a beautiful design and that's on purpose. This is what they had before and they didn't want to have a major shift in their subscription landing page. They're moving from a product called Gov Delivery, which is solely focused on email Deliverability for government. So what you'll see is depending on where the user is coming from, we're able to detect and swap out the header. So that's either USA.gov or gobierno.usa.gov or any other language that they want to roll out as well as the footer. And then all of the content has been translated as well. So we have on the left hand side and you guys can have a copy of this so you can see it or you can go out and look at it live. On the left hand side we have English version. On the right hand Spanish version. And one of the problems is that combined these lists are very long. So if you're familiar with HubSpot and email topic lists, these can get very long. So we wanted to collapse the experience a little bit for the user so that if they're on a mobile device, they can quickly just see these forms and see only the things that are relevant for them. So even the button text and all the instruction text has been translated. So in the case of these three experiences, what you'll notice I'm going to try the laser pointer here. So we can obviously this last version here, we can see that it already knows who I am in this case, so it doesn't ask me for my email again. But what you'll see is we've got these toggles here that are English, Espanol and kids. And so these are just truncated pages over here. I can show you. They're truncated pages just to show you the list is longer. There's about a dozen topics in each. And here's how we did it. So a lot of words, but let me explain it to you. So first thing we did is we had to review and consolidate the number of topic choices. So they had probably about 40 topic choices at the time. And because of the user experience that we wanted to deliver, we actually had to consolidate that number into logical categories. So if I go back a couple here we have things like benefit grants and loans, disasters and emergencies, education, health, jobs and unemployment. So these are all things that US citizens care about based on their interaction with the government. And what I should tell you is that if none of you have been to USA.gov, the goal of USA.gov is to be the single portal for the United States government for anyone that's coming in seeking information and to then send information out to other agencies. So they basically are sort of a receiver that collects information and then distributes it out. So after we consolidated a number of choices to more Logical groupings and higher level topic areas. And then again, that was done based on the user experience. You wouldn't necessarily have to do that depending on how many topic choices you have. We were figuring out how to create an experience that would be great on a mobile device as well as not overwhelm the user with their selection of choices. So the way that we did this is we had to leverage some custom JavaScript to get information to display on a single page. And I'm going to show you that momentarily. So we mapped the topic choices and email types with worthwhile descriptions. So while we don't see those descriptions on this page, on the email preferences page, when somebody goes to update the preference preferences or initially subscribe, they can actually see that. And we had to actually compromise a bit. So anytime that you're implementing a software tool, sometimes you're going to run up against some limitations. And so we ran into some limitations with HubSpot and so we wanted to launch this very quickly. The customer wanted to launch it very quickly, so they agreed to provide a slightly different experience than what they had had before in their previous subscription interface. And then we tested a lot. So we tested this in the different languages, we tested with different coming from different domains and we learned some important things. And one of them that I wanted to point out here, if you're going back to actually think about implementing this type of solution, is that you currently can't reorder your email types in HubSpot. So if you do the proper planning up front, you can put your content types into the administrator and they'll lay out the way that you want them or you're gonna have to Write some extra JavaScript code to reorder those. So let's dig in here on how we did this. So because we were working with essentially three different languages, I'm just referring to kids as a language, but you could use any language that you like with this same approach. So what we did is in the prefix of all of the descriptions and email types, we put the language and then a colon. And so what we were able to do from that is we were able to then parse that to pull out and display only English, only Spanish, or only kids based topics. So behind here you'll see we've got some different. This is actually the full email list back here, or mostly the full email list back here, several pages of email topic types that we had to work with. And so those are all jumbled around based on how we entered them into the system. So in the design manager here in HubSpot, what we're able to do is you can see we've got the descriptions which were more detailed. We don't actually show that word English colon that's not actually showing here. So we wrote some JavaScript and I'll talk about that behind the scenes to allow the user to come in and they'll get a toggle list that shows them and allows them to select either English, Spanish or kids. And you can do this with whatever other languages that you're wanting to do. So how did we get there? So we had to use the custom HTML module, and so we deployed this. And so if you're not familiar with working with the HubSpot subscription preferences page, this is found in the administration by show of Hands. How many people actually log into the admin and control subscription? Okay, so a fair number of you. So you're familiar with this. So for those people that aren't, this is a little bit more advanced. You really only set it up typically once at the beginning of your portal setup. And so basically the page typically looks exactly like this without the custom HTML module there. So we dropped in the custom HTML module and then from there we dropped in some JavaScript. So what the JavaScript does. And by the way, I'm happy I handed out my cards beforehand, and if you didn't get one and you'd like it, I'm happy to actually share this JavaScript code with anybody that wants it. So it's not going to apply exactly to you, but if you have a JavaScript programmer or if you needed help doing it, you can basically see the syntax that we use to accomplish this. So essentially, first thing we want to do is we need to detect if we know the user or we don't know the user. So HubSpot does that for us, but we verify that with JavaScript because we need to then figure out what language are we going to display. One of the biggest concerns that this user had, and you may have this as well, back in your organization, is if you only speak Spanish and you're coming in and your whole experience with your organization, with the organization that you're promoting is in Spanish, you don't want to come to an English subscription page. So they were adamant that if they're, especially if they're a Spanish speaker, they felt that there would be a level of intolerance for coming to some page that displayed something other than Spanish. And it was all about not having a jarring user experience. So the JavaScript allows us to read the email Type preference. And that's that email. Type that email. English colon or Spanish colon or language colon. So at that point we're able to swap out the language. And so when we swap out the language, keep in mind we're swapping out the header, we're swapping out the footer, we're swapping out the language above the radio buttons. So we're really just dynamically changing all aspects of that page experience. So when we're, you know, in this case, we're building a citizen centric journey. The primary form for communication with citizens for USA.gov has traditionally, at least in the past five, ten years has been email. So before that, this group actually for those of you that are, that are my age or older in the room, if you remember, they used to do ads on TV about Pueblo, Colorado. You could actually order your, your citizen handbook and things from Pueblo, Colorado. And they had funny ads and they got, and this is actually the group that did that and they've morphed into this digital agency within the government. So the other important piece about this when you're building this journey for your customers is making sure that you have the right language content that goes with it. So the components here, when you're creating. So obviously English, if you're first language is English, that's probably the easiest place where you're gonna start. So in this case, very simple emails. Again, this is fairly plain vanilla stuff from a design perspective. One of the important things that's kind of interesting to point out, so they get a lot of engagement. So this agency is primarily responsible for delivering things such as product safety recalls. So if you're on their list, you can sign up for product safety recalls and they're going to alert you if there's a product safety recall or a natural disaster. When Hurricane Matthew was coming through, you know, they had to message anybody that's interested in disasters and emergencies or anybody that's in that zip code or those areas that might be affected and get that information out to them quickly. So in the case of a multilingual email, and this ties into the subscription experience, you have to consider the things you need to prepare in the email that ties into that subscription experience. So in the case of, we'll use Spanish here, the things that you need to change. And I put some stars on here for you. So you need, you know, if you're, if you're saying, you know, if you'd like to view this in a browser, that's typically what's going to show up here up top Right. If we, if we go back one actually just as a reminder. So if it in the top right, it says if, you know, if you'd like to view this in a browser, click here. Then you have also your unsubscribe text right here and your social media text. So all of these are swapped out for the other languages. So these are written in the email template within the system. So when you're creating multiple languages, you want to have multiple language email templates which have all of that messaging in that other language. And especially important is the all of that unsubscribe and email preference link information. So the important thing, and for those of you that don't know it, HubSpot creates all of these email subscription links with the user token. So there isn't a place that you can easily go and just build a subscription page. Right. It's dynamically built based on the user. So what that means is you've got to have a specific subscription link here and a specific unsubscribe link and those have to direct back to the proper language. So that's an important tip, just making sure that that links back to that important language. So we actually have. You can do it two ways. You can have the, you can use the JavaScript version or you can take them back to a Spanish preferences page, an English preferences page, or any other language. Pa. So talking about steps that we took to implement this and what you can do is you want to make sure that you're working with the folks that are responsible for managing and maintaining this content and get them on board and understanding what your rollout schedule is going to be for multiple languages. So we started with English and then Spanish and then the goal will be to add other languages as well. A unique case here that you might not have the luxury of is they have a very large team of multilingual specialists. So their team of Spanish speakers is about a half dozen people that write content in Spanish and are responsible for all of the email content and all of everything that they're doing in Spanish. So obviously with the new HubSpot multilingual page tool, you can quickly create landing pages and web pages that are multilingual, but you still need to go translate that content. There's no good automated way to do that. You could use like translations.com or some of the other third party tools to translate that for you. In this case, they actually do all of their own language translation and then you want to use the email types to control the subscription experience. And again using JavaScript if you know, you need to, to get around some of the hurdles here. So the next thing to do is you want to create and organize your templates so you have your email templates. And again we had an email template based template with appropriate headers and footers for each language. You want to have your landing page templates. So those are your subscription templates. We actually created in using landing pages to spoof the fact that we could use either the subscription page template, you can actually create this in HubSpot today to create a multilingual page in and of itself. So we created the first, we created a multilingual landing page that looked, it was a mock up and looked exactly like the subscription page. But then we moved to the JavaScript version of that page and then the subscription pages. So again, that limitation with the system templates, again, if you're not doing heavy JavaScript, you're going to have to create those multilingual landing pages and direct back to that. So you want to test for the language. So it's a big, I think one of the biggest, you know, things that we learned as we were doing this is when you're creating, when you're basing off of a specific language like we started with English and you're creating other languages, it's easy to miss little pieces of the template such as the view in a web browser or maybe some content in the footer or in the social like. So you want to make sure you really go through diligently and change all of that content. So once you test it, you monitor and analyze and you're done. So hopefully I'll see you all over at Anna Kendrick's presentation shortly.