Leave a Trail of Breadcrumbs: Designing Navigation with Customer Intentions
Diana Sonis & Lis Hubert presented “Leave a Trail of Breadcrumbs: Designing Navigation with Customer Intentions” at UX Camp Winter 2021. Enjoy!
Founding Partner, CX By Design
Diana is a passionate believer in holistic, 360 strategy and design, with extensive expertise in UX Design, CX Design, Service Design, and the Design Thinking methodology.
As founding partner of CX by Design, Diana’s mission is to identify nuggets of opportunity within an organization, reorient its existing systems and structures to improve the human experience, help others extend their thinking, and drive material business advantage.
Having designed, built, and successfully sold several companies, Diana works to help businesses shape abstract concepts into concrete online and offline experiences that respond to the needs and motivations of real people.
When she’s not solving strategic challenges, Diana can be found in pursuit of good coffee everywhere.
Founding Partner, CX By Design
Lis is an acclaimed design and strategy thought leader, writer, and speaker with extensive expertise in Digital Strategy, Customer Experience, Information Architecture, and Design Thinking.
As founding partner of CX by Design, she has made it her mission to help companies meet their strategic goals. She does so by making the invisible visible through research, making the complex simple through her unique perspective, and bringing understanding and meaning through expert facilitation.
With over a decade of designing successful products and strategies for clients of all sizes, her passion lies in helping her partners think holistically about driving, and enacting, real change. Lis helps businesses not only increase their bottom line, but also their longevity through customer loyalty.
When not tackling complex strategic problems, you can find Lis traveling the world enjoying the human experience to the fullest.
The following transcript very likely contains typographical errors. Please forgive any mistakes!
Hi everyone, and welcome. Thank you all for being here. We’re excited to share this topic with you, although we’ve written about this and use this methodology for the past few years, there’s still a theory we’re presenting to a wider audience, so really we’re looking for all sorts of feedback, questions and challenges. And any thoughts you may have regarding this… So a little bit about us before we get started. I am Diana, my business partner lives, you can see here on the right, where a co-founders of sex by design, where are a human-centered consulting arm that takes a data-driven approach to designing products, services and systems. I’m sure you all know Human Center is a very fancy way of saying that we put our customers needs first and our design decisions, as probably many of you do as well, and maybe you read our bios, maybe not, but I won’t bore you with the fascinating details of our careers, the short story is, we are long time practitioners of UX design, and within that our specialty is Information Architecture, obviously, that includes navigation, which is what we’re here to talk about today.
We also drink a lot of coffee. It’s still morning for me, somewhat morning for me in Los Angeles, so I’m about only fourth preseason, which should last me for the next 30 minutes. So we’re all good. I guess let’s just dive right in. So just to give you a bit of context, we’ve worked in many different industries from financial services to e-commerce, to consumer path goods and across a range of tech platforms, from enterprise apps to website redesign to native mobile apps. What we found is that no matter the industry, the product or service, complex navigation is everywhere, and so what do we mean by complex… Most of the time, people think it’s a huge hierarchy of navigational items on a website, kind of like Amazon is list everything, product services, grocery shopping, etcetera, and… Yeah, that’s certainly complex. There’s no way around it. The right information has to be structured on the internet, but when we say complex, it includes that, but more importantly to this particular talk, does that include the challenge of translating in-person human interactions to online domain, especially when they’re no longer possible, as we’ve seen in 2020, so the pandemic is an excellent testing ground for what we’re discussing today because it’s forced a lot of companies to explore how to do business online when there’s no offline experience to count on, but even before 2020, a lot of companies have increasingly done more business online that the banking industry is a wonderful example, all you have to do is look at the myriad of online financial services apps that have sprung up, or the large investment of traditional commercial banks in their online security and infrastructure.
The point here is that over the years, we’ve seen more and more businesses attempting to replicate in-person interactions online, and really with mixed results from what we’ve observed, this happens because businesses are often stuck in this rigid view of how their customers navigate their products and services online, and over the years of actually observing people navigating various online platform, we realized that people don’t care as much about perfectly structured hierarchy of information as they do about what their specific reasons for being on your platform is in the first place, their wife or being there in other words, their intention, it’s really pretty much the only thing that they care about, so this is what we’re gonna talk about today, we’ll walk you through the general theory of designing for customer intentions, show you some example, talking to a recent project where we tested this but before we’ll do all this post here, just for a second and talk about actual human interactions, so we’re all human beings aversion this call, human interactions even in their simplest form are incredibly complex, the nuances of a simple conversation and the in-person social cues, we pick up on or not always straightforward, attempting to translate in-person interactions into online experiences is a huge challenge, but it’s essential to for for a business, and here’s why over the years, customer expectations for how a business treat them and understand their needs have gone up significantly.
When you walk into a store, most people expect to find already associate to help them find something, you can explain what you need or what you’d like to do, and the associate will walk you over to a product or a recommended service, and that’s all easy. Nobody really thinks about it. It all happens under two minutes, the trend we’ve started to notice over the years and even before covid hit, before even the restrictions that the pandemic has put on us is that people expect the same level of navigation online as the experience in a physical place of business. And as crazy as that sounds, it’s actually not, because the line between offline and online gets more blurry with each year, I’m sure most of you know that the level of service is really expected to be similar, and also customers know that businesses are flexing, comes of data on them, so they expect the online experience to be highly customized to their intentions and needs, so given all this translating in-person interactions into online experiences is a requirement going forward for many businesses, and it’s been, I guess, accelerated by the pandemic and… Sure, if you have a monopoly in the space, that really doesn’t apply, but 95% of the time is…
It’s just not the case. So competition for customer attention is fears, as many of you probably know, so how do you differentiate and create loyal customers given their expectation and means… Well, for us, we are us designers specializing in information architecture, so really our seria answer lies in rethinking the design of navigation and product services were… Whatever you’re working on. So the central question we’re asking ourselves in our own business is how can we design navigation that reflect the complexity of in-person interaction, but it is still easy, intuitive and effective, so in other words, how can we make the digital experience more human for a complex product, ecosystem. And in thinking about the complexity of in-person human interactions and designing an experience that’s close to it online, we’ve narrowed down the starting point to customer intention, so in other words, what does customer attention is what your customers intend to do on your site of platform, whatever it is again, what you’re working on, so here we have a couple of diagrams representing people navigating software applications or website, the hexagons represent a place on a website or within an app, and this is probably a page or some sort of view…
The person in the middle of the hexagon has several paths in an application, again, our website, these would be linked, so the person can take several paths to get to the next place. On the left-hand side, we see an example of a customer path often defined on software projects, if you’ve been on a software project, as I’m sure many of you have been before, you’ll recognize this as the happy path. So in this example, we assume the user has a singular task and once they start down a path, the users completely focus on his or her task, there are no distractions, questions or thoughts that the user has on this path, navigation built this way are very linear to ensure the customer or user is forced to the happy path, unfortunately, this method advises the mark in real life, we’re not designing Utopia here, so to a user or customer limiting path options to a very linear happy past thinking only feels like a business telling them where they should go and less like the business supporting them in where they intend or want to go. Psychologically, this style of navigation can decrease a user’s intrinsic motivation and interns in motivation, the way we would define that is doing something without any obvious external rewards.
So for linear navigation decreases intrinsic motivation by decreasing two key things, the first one is competence or the desire to control and master whatever online environment they’re in and its outcome, and the second one is autonomy, which is the desire to exercise your free will. Now, if you look at the right-hand hexagon diagram of the more realistic path, in this example, a user walks through a happy path door, but then decides to take a right, for example, immediately the environment shift to support them in meeting their intention by taking a ride the user has given the system a cue about their intention for visiting, so with a more realistic path, it doesn’t matter if they stay on the happy path or not, the navigation, the navigational test really ShapeShift and customize to the actions that they’re taking. So there are no navigational mistakes to recover from this idea of a digital ecosystem taking into account what you are selecting real-time and cultivating your interface based on that, increases competence and autonomy, and thereby it increases intrinsic motivation, which is really what we want to happen. So we want our software to be built on the psychological principles that cater to the needs of the customer, if we’re looking for a long-time loyalty or long-term value, so customers have to be empowered on your digital property and they have to enjoy being there.
So basically, our hypothesis is that if we design digital navigational structures that empower the right side of the diagram would be creating that human organic conversation and empowering customers to still fill their intentions on the digital property, whatever we’re working in. And again, psychologically speaking, this would obviously increase the customer’s interns in motivation, making them more happy and loyal and ultimately making business profitable, which is wide role here. Before we get into the details of the actual project that we tested this on, let me show you an example of navigation designed around customer intentions or the more realistic path. This is a pretty familiar example to everyone, when we hear the word navigation, we often think of the bar across the top of the page or a hamburger menu on the upper left or right-hand side of the page, so in the YouTube example, it’s the hamburger on the left, which opens to all the options we see here in the red square, so this is what we call higher article or linear navigation, this type of nature anchors the user giving them a sense of place, which is great, it’s important, it also often mirrors how the company thinks a user should explore their digital properties, but over-reliance on this type of structure often increases cognitive load, and it makes your digital ecosystem confusing and frustrating, especially if the user is unfamiliar with your product or service.
So this, again, has this undesirable effect of decreasing user economy and competence along the way, and navigation can be so much more, it’s not just as a hierarchical, as you’re seeing on the left-hand side, it can also be lateral… We’ll look at the same YouTube of example, you have this lateral navigation, which takes you from the user intent on the right-hand side, the lateral nave carries the users through your digital properties by following their intentions or interests as they navigate the product for the website. Now, we know that lateral navigation is a new, but what is new is thinking and defining this type of navigation by customer intention rather than by the standard way of information hierarchies. So this YouTube is a great example of what we mean. For me, I don’t know about you guys, but for me, I rarely do I use the hierarchical navigation on YouTube in the hamburger, most of the time I use the in-page navigation, which pulls me to other videos possibly in a day… Some categories or channels, YouTube knows that my primary intention is to watch videos, explore maybe similar content or discover adjacent channel to my area of interest, so they design a simple lateral navigation that allows me to fulfill my intentions without ever going into the Hamburg or menu.
And as anyone who’s ever gone down the rabbit hole of YouTube videos now, you can keep clicking for hours, so there are a lot of… Navigation doesn’t tell you one thing about their business or how information is organized or structured, but it does combine meeting customer intention and meeting their business goals of keeping me on their side of the longest amount of possible… So you took is a complex website giving them out of information they need to host and organize, but they’re also one of the simplest and most used bus on the internet, and that’s because they created an organic conversation, so understanding and designing navigation for customer intention. So right now, we’ll jump into the real world example that we work on, I’ll talk it over to Liz, and she’ll walk you through this recent examples of where we apply this theory in our work.
Yeah, so we worked with a company called Sitka. Now, besides being a town in Alaska, Zika is also a hunting apparel and gear company who design and sell high end, very intricately designed products for hunters, their products are unparalleled, but not many potential customers were able to make the connection between the products that it was making in their high price points, all on their own, for example, just by going to the website to most customers, camo jacket was just A camo jacket, but Citi was designing each of their products specifically for hunting a particular type of prey in a particular type of environment, so for example, they create one jacket that retails at a couple of hundred dollars, it’s that expensive because it’s designed for people who want to hunt big game animals at high elevations, say like 10000 feet and above. And we’re designers it, we get this… And especially if you are getting into the details like we do, where they would create this really specific pocket for this really specific type of gear that someone needed to carry with them in order to survive at 10000 feet, and all of that attention…
For a few moments whereo to turn the things back on and she can continue. Great. And he’s a case. It’s gone. I think the universe is telling me not to talk about intentions, you’re on the farm, so the squirrels are eating your wires… I have a whole story about that, by the way. That’s a whole story. So where did I draw? I was all in the groove and now I’m not… So
I think you were talking about… I think you were talking about was when they wanted to redesign their sites the year before as the conversation…
Great, thanks. So they had to redesign their site, but their conversion rates went down instead of up, and of course, it was nothing compared to in-store, and I should note that most of the data that we were working off of was a combination of sales and other quantitative insights, along with qualitative interviews with some 30-plus prospects, casual ist loyalists, cheerleaders of the brand, so they brought us in to help, and we decided to apply this customer intentions methodology, and we did that by defining the overall list of possible customers intentions for visiting the website. So what were customers aiming to do when visiting the sick or website, and then we modeled and designed each page of the site to meet those intentions. And we’re gonna talk a little bit about what that looked like. So what we have here, first, at the top of the screen, we really got to know the users, and you can see a list of them over on the left, prospect, new prospect returning, we really got to understand who was coming to the site, and then we work to understand from that research that I mentioned, we work to understand their intentions, and you can see there’s about a list about eight or so on the right, upper right, these are all the aims a customer may have when visiting sit his website.
We then mapped out the good old happy path for each intention, and so it’s down here on the lower left, we see that we have the buy an item intention, most happy path of all… Looks like this, the user starts at the home page, and now this idea in and of itself is a stretch, but that’s for another day, let’s say they salute homepage and then they click on an individual product, like a jacket or a pair of pants, they are so loud by the product page that they immediately put the product in their cart and check out, but we know this happy path isn’t often the case. Users wander, they may look at one product and then another, they may move away from buying an item online to finding a retailer at least in the pre-covid days and hopefully in the post codes. So how do we ensure that their intentions are fulfilled even when they wear off this happy path, which is of course what’s likely to happen? We do that with more hexagons obviously, but we ensure that each pea place or in this case, page on a happy path has doorways or links to enable the customer to fill their intentions as they wander, and we shift these doorways based on the clues customers give us as they traveled to sit, just like the sales person is able to do by talking to the customer in real time, so it’s step one, when the customer is on the home page, we don’t yet know their intention, they haven’t given us a clue, so the whole page needs to have for waste or links to help customers solve any of those eight intentions we defined once they click on the product page, like in step two, we can double down on the fact that they intend to buy an item or find a retailer or investigate a hunting solution, while would they click on a product, so on this product page, we ensure the obvious doors to help them add to cart or view other items exist, but we also ensure they could fulfill their other potential and tensions with relevant information or doorways, like articles and retailers, and it goes on as you see the steps three and four, the important part here is that we do this for every page of the site.
Now, I wanna point out that hopefully, those of you who saw this morning’s keynote Margo talk, you’re seeing this theme of instilling confidence and comfort by allowing the user to be autonomous as they go throughout the site. Margo also talked about having the right amount and right type of content on our websites in order to build trust again with our customers, and I’m telling you that, and I’m bringing that up because the most important part of this method is that the doorways that exist to fulfill these intentions, these hexagons, that content should be the only content on the page… Now Sure, you may have global navigation, like we saw with YouTube in the header or the footer, but the content on the page should exist only to fulfill intentions, otherwise you’re adding noise to the customer’s experience and you’re decreasing their autonomy, their competence, their comfort and their confidence, so as the user moves throughout the site, the doorways, they need to fulfill their intent and shift, and so each step feels very considered and they feel like they are the ones moving this whole process forward, so even though the paths are still predefined, they are customized and intentional and yeah, that pun was intended.
So how does this actually turn into navigation, it would take us another few hours of talking about this whole riveting topic of information architecture to explain all the details of that, and we’re working on doing this in workshops coming up, so stay tuned for that. But the two-minute description is this, First, we define and prioritize customers intentions for each page of the site or application or service at each step with these orders, most pages really only have a subset of the total of the eight intention, so for example, we determine that a Sitka product page, the prioritized list of intentions are here, sorry, or something like Ian item or investigate research as hunting solution, find a retailer and understand what Sika does. The next thing we do is we create templates with a module, each module on the page aimed at fulfilling customer intentions, so that’s what we see here on the left, Persia, a product page template was look something like this, and each role of that template represents a hexagon from our hexagon flow, you’ll remember this character here on the lower right, that hexagon flower tells us all of the doorways we need to have on the product page in order to help customers fulfill their intentions, note that even though we only have four customer intentions, there are more hexagons, and that’s where the UX and design and content creativity comes in, because there may be more than one way to solve for an intention and we want to use our creativity to enhance that experience as always.
So in this product page template, the top module is aimed at buying an item, the second is investigating a researching hunting solution, you see how very detailed we’ve made it, and there’s no question that designing for intention does take them up from information architecture, deep dive. But once that initial structure is in place, that’s where the huge benefit comes in, so let’s say your business develops a new product or service and you need to create a page for it online, you…
Is gone again? Well, maybe in the interest of time, I can pick it up, read and where I’ll just continue what you were saying, and then if she comes back home back… Okay, so she is like.
I’m just on the farm. I was like an… IT was a cliffhanger. So from there, it’s a paint by numbers approach to creating site updates and putting new products online, or putting new content online takes a far shorter amount of time… Yes, there are elements to design and content to write, and all of that still exists, but you have a structure with this organic conversation between your customer and your business, be in it, because your design, the structure of them are now prioritized by customer attention, so that turns into that structure turns into something that looks like a web page. Okay, we didn’t say that we were going to be re-designing how the web looks, we don’t promise that, but it’s what’s happening in this page. That’s important.
We lost your audio. Can’t hear you?
Am I here now? Yes, I feel like I should just give it up and talk from the heart here, people… Where did I stop? Was I muted?
You were talking about how we meet the priority and how the intention dominates the page.
Okay, cool. So yeah, so I’m thinking about how to send this up in a few minutes left, we’ve had hierarchical and lateral navigation for a long time on the web, but in defining those navigations based off these intentions, now we’re seeing every link… I’m sorry, I’m being heard messages in Brad that I’m being… But I think Brad’s trying to tell me that he doesn’t wanna listen to me, but every link becomes this mountain of rational thinking behind it and purpose behind it, and it also becomes easier for your company to update their websites, so designing for intentions really help you redefine how you think about navigation and modeling and designing an ecosystem around that that combines hierarchical and lateral like site structure with intentions-based navigation, and you put this paint by numbers of systems in place to create and update your ecosystem based on this intersection of customer intentions and business goals you make navigating your complex digital ecosystem more human, this increases customers feeling autonomy and competence, it creates this organic conversation, it creates happy, loyal customers were saving you money and resources in the long run, customer success and happy customers breeds confidence as MARCO toads empowerment, incompetence and comfort or key to building trust and doing all that is really, really good business, so I’m sorry for all the technical glitches, but thank you for being a part of this, we wanna hear your thoughts, and we’ve written some articles about this on both our site in UX booth, we are happy to ride the links in the Slack channel if you’re interested, if you wanna learn more about using intentions, you can sign up for our newsletter or reach out, and…
That’s it for today, thank you.