In this episode of Call to Action, Unbounce’s Art Director Denis Suhopoljac shares how marketers and designers can work together to create landing pages that actually serve your campaign goal. Then, we talk to full-stack marketer Vincent Barr about what exactly a wayfinding convention is and how it can help you guide your visitor toward your call to action.
Listen to the podcast
Listen on iTunes.
Prefer Stitcher? We got your back.
Mentioned in the podcast
- Wayfinding Conventions: Design Your Landing Pages to Guide Visitors to Action by Vincent Barr via Unbounce
- 3 Tools to Keep Your Web Designer From Killing Your Conversions by Jen Gordon via Unbounce
- Theme Music: “Gypsy Song” by the Freak Fandango Orchestra, available on the Free Music Archive, under CC by license.
Read the transcript
In this episode: Stephanie Saretsky, Unbounce’s Multimedia Content Producer, chats with Denis Suhopoljac, Unbounce’s Art Director. Then, Dan Levy, Unbounce’s Content Strategist, interviews Vincent Barr, Senior Marketing Manager at Jet.
Stephanie Saretsky: If you work at an agency, or on a marketing team with a designer, you’re probably over familiar with project briefs, but as a company that’s growing up out of its startup roots, writing up design briefs for every campaign was a bit of a change for us. Our Art Director, Denis Suhopoljac, tells us why.
Denis Suhopoljac: The marketing and design team used to sit very close together and we would work on projects together. So when you’re that size, when you’re around – we were around 12, I think, even up to 25, it’s easier to just have those conversations and define what you’re going to make.
Stephanie Saretsky: But as the teams grew, Creative was moved to a different area of the office and chatting back and forth about how things should be designed became a little more difficult. After such a casual atmosphere, processes – as boring as that might sound – had to be put in place.
Denis Suhopoljac: When you think about design in general, there’s six steps to making anything. And the first step is usually you define what you’re going to make and then you ideate upon that idea and you select your final version of something. You make it. Then you analyze it. And then you just repeat that process. So the project brief was really born to kind of help with the define stage of any project.
Stephanie Saretsky: The creative project brief now acts as a skeleton. Instead of saying, “Hey, I need you to make this,” Marketing has to clearly communicate the objective of a design, who the target audience is and the key results expected. By providing this information and the copy to go along with it, the Creative team is now able to create a design without having to worry that the goal or messaging of the piece is getting lost in translation.
Denis Suhopoljac: Getting copy from Marketing or a copywriter helps shape what that landing page may be. I always say without copy there’s no communication. And really, we’re in the business of communication. So it frames how we design.
Stephanie Saretsky: I’m Stephanie Saretsky, and you’re listening to Call to Action, Unbounce’s podcast about creating better marketing experiences. The project brief acts kind of like a wayfinding convention, which is a familiar queue that guides a visitor towards a goal. That way, marketers and designers can work together almost effortlessly to create, you got it, better marketing experiences. But how can we apply wayfinding conventions to our landing page design? We knew just who to talk to.
Vincent Barr: Hi, I’m Vincent Barr, and I’m the Senior Manager of Display at Jet.com.
Stephanie Saretsky: In his blog post for the Unbounce blog, “Wayfinding Conventions: Design Your Landing Pages to Guide Visitors to Action”, Vincent compared marketers to tour guides. Unbounce’s Dan Levy was curious to know how this could be the case, so he chatted with Vincent about the ways that marketers can integrate real world visual cues into landing page design.
Dan Levy: So you start off by saying that marketers are like tour guides. I’m not sure how I feel about that. What do you mean?
Vincent Barr: Tour guides have a goal. They want to get a tourist from Point A to Point B. So oftentimes, this could be a physical Point A to physical Point B, but it also often means Point A being an uninformed tourist to Point B, an informed tourist. So I think marketers are similar to tour guides in that they’re responsible for taking someone from Point A to Point B. So whether that’s informing them about a product, inspiring them to take a certain behavior or action, they’re responsible for that.
And I think another part is that tour guides are also responsible for the entire customer’s experience, from corralling the group, establishing a meeting point, making sure no one abandons the group or gets lost, keeping the group engaged and also understanding the amount of prior knowledge that a person is coming in with as a tourist, and then speaking to that audience. And I think marketers are similar because you need to know whom you are speaking to. You’re also concerned about things like abandonment.
But I think one big difference is that for marketers, their challenge is that people enter their tour at any point. So it’s not a linear tour. They could enter it at the last step of a flow, at a landing page, at a home page, at a product page. So I think it actually makes marketers’ jobs a little bit more challenging.
Dan Levy: Right. And just like in the real world, marketers rely on a series of predetermined signposts or signals, which you call wayfinding conventions to guide people, in this case, towards their call to action. Can you talk a little bit about these wayfinding conventions and why they’re so important?
Vincent Barr: Yeah, sure. So I think the importance of wayfinding conventions comes in because they’re really helpful in allowing people to navigate without having to think. So they can focus on the offer at hand, the content in front of them, the product video, whatever it might be that we actually want them to pay attention to. So design conventions such as bread crumbs on a site, steps like going forward or going backwards, having a consistent utility navigation or primary navigation, things like that help orient people. And when they’re done poorly or there’s sort of too much innovation done in terms of wayfinding, it can confuse people. And confusion leads to frustration.
So for example, if I’m sort of focused on how can I close this modal window that just hijacked my screen or how do I navigate back a screen without losing my information, those can be experiences that are frustrating. And then that leads to abandonment and, ultimately, fewer people completing the goal. And I think this third important factor with wayfinding conventions is that they build trust and establish credibility. So it’s sort of like if you’re planted in a random city, if you start to see street signs or you realize that it’s laid out in a grid or here are street names and avenue names, you start to build some trust. You feel a sense of security in knowing how you can get back to where you are now, versus a city that has no street signs, no building numbers, no nothing, you’re gonna approach with some amount of wariness.
And I think the last part is that – so according to Higgs Law, that law states that the time it takes for a person to make a decision is a function of the number of the possible choices they have. So wayfinding conventions put navigation and so on in the background. So it’s kind of done so well that people don’t realize it’s there. So it feels like one less choice that they have to make.
Dan Levy: Interesting you talk about navigation, a thing that we talk about in landing page optimization is that you don’t always have or you don’t always want to have your main nav there, and some of those signposts that maybe you’re used to like on a website or a homepage. So what’s the problem with making users think too much when they visit a landing page in particular?
Vincent Barr: So that’s a great question and interesting tradeoff for companies to think about. So I think the challenge is that you have to make sure that you want to sort of analyze and assess where are people discovering your landing page. So what are the sources? And that could be the website in particular, so what website is referring traffic? Or if it’s organic traffic, what keywords are driving traffic so that the landing page is – it’s sort of a middle of the funnel, bottom of the funnel, top of the funnel landing page matches where that user is in their journey.
Because I think when there’s a mismatch – for example, maybe somebody is just discovering that they need a plumber, for example. And this landing page is about contacting Joe Smith immediately to have him come to your house in ten minutes – that’s probably a mismatch. And they probably want to learn more about Joe Smith and how much his service is and why he’s the preferred plumber over someone else. So in those cases, when you drop the nav, it can be hard for someone to find their way back.
And I think the common convention is to use a company logo in the upper left-hand corner that navigates people back home. But not all sites are doing that, but I think that’s one case where it may not work that well. So I think that as long as people are discovering your landing page and that landing page is it sort of matches where they are in their journey, then it’s great. But otherwise, it’s not so great.
Dan Levy: So even if it’s coming from like a paid ad, for example, then you want the landing page to match the headline of the ad or the visuals in the ad. So in this case, the sign post that people are looking for, then, from wherever they came from?
Vincent Barr: Yes, absolutely. It sort of answers the question where did I come from? Where am I now? And where can I go next? And yeah, I think you want to create a seam less experience between your ads and your landing page. So if I click an ad and then I get distracted, I go to another page and then I come back, I can sort of have a reminder for how I got to this landing page in particular.
Dan Levy: Interesting. So sometimes these signposts are universal, but sometimes they’re actually just contextual. They’re what you’re expecting to see when you land on the page?
Vincent Barr: Yeah.
Dan Levy: Cool. Well, you say that position and color or structure and style are among the first elements that you might want to test on your landing page. First can you tell us how we can maybe look to the real world for inspirations? You talk a little bit about exit signs, for example.
Vincent Barr: So I think exit signs, they have a distinct position and a distinct style, at least in the United States and in New York. So they’re not typically mounted on the sidewall or on the floor. They’re not printed on a sheet of paper. They’re sort of consistently in one position on the ceiling. And they use the Sans Serif font. They’re fluorescent. They’re usually red, occasionally green. They’re lit by these LEDs and usually hang from the ceiling. And they’re not particularly large but they are particularly bright and uniform, so it makes them really easy to identify, should there be an emergency.
So it doesn’t really distract you from your regular experience. I think of like going to the movies, for example, but they are there in times of need. So I think some analogs would just be, for example, the position of the next button for like a multi-step web forum on a landing page. So typically, people are going to associate like a right position as where they would expect a button to continue or to proceed and the left to cancel. And then when you start thinking about color, you would have green as go or green as continue and red as cancel or maybe gray. And these sound kind of obvious, but if you go around and take a sample of web forums across the internet you’ll be surprised at the sort of placement and position of these elements.
I think the same sort of thing goes with the headlines and the bullet points for your product. So thinking about also the order in which things load, so sometimes you’ll see video that’s well above bullet points. And I think it’s helpful to think about the order in which people would consume information. So they might want to start with, okay, why am I here? Why is this compelling? And then, for the people that aren’t fully convinced then maybe you’d want to introduce them to a product video on your landing page or something that can better demonstrate the benefits of what you’re offering. But I think that’s how I would think about position and color.
So using positions and conventions that are already existing so it makes people not have to think about them. And one other example would be like bread crumbs on a website, so it may not get used in 95 percent of cases but it is there to orient the visitors, should they need it. So that’s my thinking on there.
Dan Levy: Yeah. I mean, it makes it easier for your visitor, but it also makes life a little bit easier for you because you don’t have to start from scratch. Right? There are already pre-existing conventions like red means stop and green means go. So it actually makes life easier for both you and the visitor when it comes down to it.
Vincent Barr: Yeah, absolutely. And I think there can be the inclination to just want to be creative or try something new, which is great. But it seems like nine times out of ten when you just stick with the conventions that people are used to seeing, so they just recognize them immediately, they tend to perform best. But yeah, it makes a marketer’s job very easy as a starting point.
Dan Levy: Totally. So it might be helpful to jump into a couple of case studies at this point. You write about an investment company called Vanguard, which had a poor case of color and positioning in their onboarding process. What was the problem with their design and how could they maybe improve it using wayfinding conventions?
Vincent Barr: So basically, Vanguard’s page shows a five-step flow. And we’re on Step 1 and it says, “Tell us about you.” And there are basically three radio boxes and you can check one about why you’re investing. Now, the odd thing is sort of the amount of whitespace between where you would select your option and then where you would go to continue. So you kind of have to search for where that button is to continue.
So they’ve really isolated those options to actually proceed. So you’d want to make it as easy as possible for that user to proceed once they have completed an action. It’s sort of like if I’m dialing a friend’s phone number on my cell phone, I wouldn’t want to have to flip my cell phone over and press like a doo hickey on the back of my phone. I’d expect to be able to just dial that call out right from the keypad. So I think keeping the form buttons that lets someone navigate further or to a previous step close to the context and where they’re entering their information is important. So I think that’s the first thing that’s missing there.
The other thing is the steps labels raise questions. So Step 5, the step where I would expect to complete this flow, it says, “Next steps.” So that makes me wonder is this actually a ten-step flow? Is this a 20-step flow? And I start to wonder how long it’s actually going to take me to complete this process. So one thing they could do and that some websites do well is just giving you an estimate of how much time it’s actually going to take to complete this flow. And if it’s going to be a long time, letting someone – giving them the option to save and come back and just being sure to capture their email address so you can actually re-engage them.
The last thing Vanguard does – and I think it’s just to be in line with their style guide – is their continue button is actually in bright red. So I found that to be a bit counterintuitive and then back and cancel are in this kind of ‘70s beige. So those are my qualms.
Dan Levy: ‘70s beige isn’t a very actionable color, I guess?
Vincent Barr: Yeah. Well, it’s mainly that the continue is in red. So I’m sort of confused.
Dan Levy: Yeah, totally. Well, another company that I think most of us are probably more familiar with than we’d like to admit is Netflix. You say that their pricing page does a good job leading the way with color but falters a bit when it comes to the copy. Can you untangle that one for us?
Vincent Barr: Yeah, sure. So yeah, first I’m a huge fan of the testing that Netflix does and highly recommend their talk they give about how they do testing at Netflix. And it’s really interesting. But yeah, on this page, in particular, I like the way that – their use of color and the way that they nudge you in the direction of the standard plan, for example. And they have a really easy to understand table comparing basic, standard and premium plans. What I think some companies do is they list every single feature or benefit and then you have sort of a multi-page scroll to compare options, which if you think about how someone does research that might actually require someone to print the page out, which is just kinda crazy.
So I like that they have everything condensed but I think what they could improve is when you select a plan the continue button doesn’t really provide context for what continue means. Does that mean you’re going to need my credit card? Am I about to register? Am I about to sign up? Am I about to rent my first movie? Sort of what’s actually coming next?
So what I’ve seen other B2B or B2C companies do is they might say like continue and we’ll take you right to the PDF or continue and create your account. So you can kind of use some subtext or what’s called microcopy to help alleviate any of those potential questions users might have. It would prevent them from continuing. And I think credit card information and having to create a robust profile next might be one worry. And if that’s not the case I think they could definitely alleviate that fear with users.
Dan Levy: Continue is almost like the submit of multi-step forms. It’s like it doesn’t actually tell you what you’re about to get. It’s not helpful at all.
Vincent Barr: Yeah. Exactly. I mean, it could just be like a right arrow and that would provide as much information. And you don’t really know where you are on it. So that’s my thinking there but I’m also sure they’ve done tons of testing. So who knows? Maybe it works for their particular audience.
Dan Levy: Fair enough. You write something interesting in your post. You say that to optimize for trust is to optimize for profit not clicks. What do you mean by that?
Vincent Barr: By that, I think the first part to optimize for trust means to not use click bait, basically, so one common metric that people may optimize for is click-through rates. So we could both probably come up with some really creative ads for Vanguard that have nothing to do with Vanguard. Or maybe we offer false promises. Maybe we offer really exaggerated offers for a given company. So there are lots of things we could do to drive click-through rate.
For example, some dating sites found that promiscuous pictures of women lead to huge increases in click-through rates for their registrants. But are they getting the types of registrants and paying subscribers that they want? No. They’re just getting clicks. And that’s because people may not be actually taking the time to think about, okay, is this a product I’m interested in? It’s sort of just an impulse knee-jerk reaction to whatever copy or image you may be using, similar to like using a cat photo or things like that.
So I think the first part about optimizing for trust is not using click bait and focusing on the metrics that really matter. And typically, that’s going to be revenue or profit or conversions and CPA and profit. And the reason that optimizing for trust is sort of preferred to that is it’s considering the entire experience. So it’s not just “did they click through the ad” but did we then continue to build on that promise on our landing page?
So similar to what you mentioned earlier where a headline or the copy on the page may kind of restate what was in the ad or elaborate upon it. It’s sort of continuing to build trust with that customer and then follow up on your promise that you offered in your initial advertisement or in your meta title and description on the search engine results page.
One metric that’s great for measuring the entire journey through is conversions to impressions because it’s going to look at click-through rate as well as conversion rate. So you’re looking at that entire journey from the point where you reached the visitor with an advertisement all the way through to how well did we actually convert them? And I think when you’re looking at subscription services or when you have any kind of product that benefits from retention, which is most, as we know it’s cheaper to retain a customer than to acquire a customer. So if you can build trust and you can create a great experience across platforms then you typically also have an understanding of your customer and you can increase retention and not just one-time acquisitions.
Dan Levy: Right. So optimize for trust means in the case of that Netflix example not only tell people what they’re going to get when they continue across the form, but to actually deliver on that.
Vincent Barr: Yes.
Dan Levy: Well, to return to the tour guide analogy, you end the article by saying that a great tour guide needs to get out of the way sometimes and create an experience where people almost forget that there’s actually a marketing team marketing behind the scenes. Why do you think so many marketers seem to have such a hard time getting out of the way?
Vincent Barr: Yeah. That’s a good question. I think it’s because a lot of the work that comes off is really simple or where it feels like there actually isn’t any marketing involved. It takes a lot of time and a lot of work. So for example, I think of GoPro’s marketing where really it’s just users using the product and posting their videos or 45-minute long videos wrestling with lions using a GoPro, where okay, it really doesn’t feel like there’s any marketing. It’s just sort of the product itself as it is.
And I think great marketing copy, great marketing experiences or great landing page experiences for any company, you typically don’t feel like you’re being marketed to. It just feels like there’s this transparent communication of information. So I think when it comes to landing pages, it’s not so much that marketers are intentionally getting in the way, of course, but I think it just takes a lot of time and hard work and testing to get to a point where you can remove all of the non-critical element, so non-critical marketing copy, non-critical popup windows.
You can remove the non-critical form fields from a form because you understand your customer, you understand that journey and you know that maybe you can collect the three additional pieces of information you might need from a prospect at a later point in the funnel. So I think it’s something that just comes with time, experimentation and I think the mindset that we’d rather remove elements than add them.
Dan Levy: Yeah. I guess that’s where using pre-established conventions also helps people just feel like they’re being communicated to and not necessarily marketed to because those things are just part of our everyday lives and not something that we even notice anymore because they become so commonplace. And sometimes that’s just – that’s a good thing.
Vincent Barr: Exactly. And it’s kind of like if you add a new feature to a page or you may see this in a new app, they have the tool tip where you have to hover over to learn more about it. So every kind of little introduction of a new feature or a new little widget on the site, while it might be kinda cool and it might be a slight value add, you have to think about the cost that’s going to be required for each user to really learn about that.
So it’s kind of why mobile apps, when you’re thinking about onboarding with a mobile app, one of the most important points is when that user first signs up and onboards during that wizard that walks them through the app and lets them know what they need to do and helps them complete those first few actions that are critical for them to become an engaged user or an active user that increased their propensity to become one, that that’s especially important. So when you introduce new things you typically have to educate users on them as well.
Dan Levy: So where is the best place for a marketer who is maybe thinking about this stuff for the first time? What is a good way to get started improving the wayfinding on the landing page?
Vincent Barr: One thing that’s really helpful for me to do is go to the websites or the services that I use the most or enjoy the most and just sort of pretend I’m a new user or a prospective user and walk through their entire flow and I actually just take screenshots of each page and think like what are they doing well? What are they not doing well? Where did I get confused? So you can just pick an industry and be like Honda versus Nissan or best online dating service or cheapest sneakers or whatever. You could pick kind of any industry and you could think about different points in that customer journey’s kind of funnel. And then I usually just screenshot them out and take a look at what I think is working and what isn’t.
And then there are lots of A/B testing tools you can use. Some are really easy, like Unbounce is really easy. Optimizely takes a little bit more implementation time, but kinda depends on your use case. And then I would just go in and start testing things.
Dan Levy: Cool. Yeah. Sometimes it’s hard to see our own pages objectively but start with other people’s and you’ll probably find problems that you could then go and address on your own page as well.
Vincent Barr: I think if you don’t – if you’re in a position – and when I say just start testing things, I mean, definitely start with your high traffic pages, your high value pages. But if you don’t have enough traffic to A/B testings, you can also just run usability tests, which are incredibly informative. So you could run a remote user test and just ask basically a user to complete a task, say, where would you go to create a new standard Netflix account?
And then just – you can watch a video of a user scrolling through your pages or going through your landing page. And they should be narrating out loud their experience, what challenges they’re having, what they like. And it’s a really good way to get an objective insight and, well, an insight that isn’t your own and get a feel for what’s working and what’s not on your page.
Dan Levy: Great. Well, that’s a great tip. Thank you so much for taking the time to chat today, Vincent. It was really informative.
Vincent Barr: Thanks, Dan. I appreciate it. It was great talking to you guys.
Stephanie Saretsky: That was Vincent Barr, Senior Marketing Manager of Jet. You can find his blog post in this episode’s show notes at unbounce.com/podcast. If you’re curious to know more about landing page design, you should check out our latest design themed Unwebinar, 3 Tools to Keep Your Web Designer From Killing Your Conversions, at unbounce.com/podcast.
That’s your call to action. Thanks for listening.
Transcript by GMR Transcription
