B2B Website UX: Tabbed Modules

Check out this marketing trick for conversion optimization as Ryan Draving helps you understand how to enhance a user’s overall experience on your B2B or SaaS website.

00:00:05 - 00:21:21

What's up, everybody? It's Ryan Draving here, and today we're going to dig into a couple of great websites. We're going to look at how you take the user overwhelm and fatigue that can happen from having too much information to scroll through and condense it down in a way that is both visually appealing, easy to navigate and communicates your message quickly and in a way that emotionally grips you.

00:22:09 - 00:40:23

So let's get started. We're going to start by looking at bill.com. I'll be honest with you, I have very few qualms with the way this page is laid out. However, I want to use it as an example of the kind of page that you normally will see. Start scrolling through. User is only a tiny bit of the way through the page at this point.

00:40:23 - 01:03:20

They're getting two full screen views of each of the components of the platform, right? So I have to scroll through, simplify your approvals process and scroll into the next screen, scroll into the next screen, and I keep scrolling and scrolling and scrolling and scrolling and it just doesn't quite stop. So at some point I may get fatigued and say, you know what, I'm out of here.

01:04:03 - 01:31:22

I'm going to go to someone else, and just take a look at something that might be a little more digestible. Or I don't see what I'm looking for, but they might have missed it just because that key message that mattered to them was hidden amidst all of this other content that was less relevant. So if you know that your stakeholders don't necessarily all care about the same thing, but you don't know ahead of time which ones are which, a great way to show that can be in a tabbed module and start here showing you on QuickBooks Online.

01:32:16 - 01:59:00

This is the invoicing page for them. And if you scroll through here, what you'll notice is sort of right off the bat, just below the fold, we're getting to a tabbed module. Now, this doesn't look like tabs, but essentially it functions the same. I click a different tab. It shows me a different call out. This is done really well because they're not overwhelming you with a full screen that just shows you everything happening on a screen related to, in this case, billable hours.

01:59:13 - 02:21:15

What instead I'm getting here is a call out that shows me a concise portion of what they really want me to see, right? So instead of me needing to interpret and think through, OK, what am I seeing here? And what of all this matters? They took out the side nav, they took out the top nav, they took out the background behind this and they may have even simplified how it looks because they know once you're in the platform, you'll learn to understand it.

02:21:15 - 02:39:12

But right now they need to give you a simplified view of the functionality you're getting. So here, I've got my billable hours. Here, I've got my custom invoices, and when they say custom, immediately I look at this and I see a color palette. Well, I know right off the bat I'm going to be able to customize this brand to meet my needs.

02:39:14 - 02:59:03

I'm going to be able to match the brand to my own brand and send out my invoices in a way that is custom and perfect. So here you can see it's a different type of call out. I'm now still seeing the product, but I'm seeing the alert from the user's side. So all of this allows me to imagine myself in the position of being an actual customer of QuickBooks and how cool that's going to be.

02:59:13 - 03:22:17

So I got a little bit of an emotional connection. Monday.com takes us even further, right? So if I go to the Monday.com home page, there is a lot of information they're trying to communicate even right up top. And I'll tell you, I'm interested to see if this top bar here sticks around. I think it's going to go away at some point, but this is how they try to segment you right off the bat when you scroll down.

03:24:06 - 03:47:18

And by the way, that is new. You're probably going to see look at this in Q2 of 2023. I bet you that is totally different. Well, let's keep scrolling. You can see lots of information being communicated here, but now we get to this tabbed module, right? And so instead of seven more full screens of information I can pick and choose what matters to me.

03:48:00 - 04:03:12

If I'm in IT and I want to know, OK, is this really going to integrate with all my systems? I can immediately click through to there and see it. If I just want to see, Oh yeah, like how is this going to look to me as an end user? I can see that. If I care about I want this to be really an efficient, productive thing for my team.

04:03:12 - 04:25:11

I'm the CEO of the company or I'm head of Ops. I might look here at automations and see how is this going to work? Oh, very cool. But what's really neat about this is that they take me one step deeper into that emotional connection because here I'm seeing exactly what's happening, exactly how I'm going to use the tool. That's this little purple dancing dot.

04:25:17 - 04:44:18

Now again, something else that Monday missed on here is that every single one of these starts out with the same screen and that little purple dot dancing around. So you're kind of missing the opportunity for me to realize that each screen is different. I may see the first one, then go to the second and think Oh, it's the same animation.

04:44:18 - 05:03:09

I'm just going to keep kind of clicking through, not realize that I should be paying attention to it. But if you ignore that, this is a beautifully done set here, they're showing me just what's needed for me to understand how cool it's going to be, to feel that experience of hitting done and having the little celebration confetti throw up in the air

05:03:17 - 05:30:17

every time my team gets something done. They're showing me how the collaboration is going to be, but they're not showing me top nav, side nav. All of these other bits and gadgets it's all the key stuff that I need to see. Even the menus that they're showing there are intentional that mean the different views of ways that it looks, right? They're not necessarily giving me all the settings and everything else, but they are showing me, Oh, I can look at the Kanban, well, you know,people care about Gantt timelines.

05:31:01 - 05:57:07

I can look at it that way, right? So this is a very neat way to communicate that and create emotional impact with your user. So if your users might be coming from all kinds of different perspectives, have a lot of different needs, different stakeholders, which is very common, especially in B2B, you might want to consider creating an interactive tabbed module that helps people to anchor into the emotional experience of using your product.

05:58:01 - 05:59:22

I'm Ryan Draving and I'll talk to you soon.