 Are you good in the back? Good? Okay, well you're here for a data-driven design for better business, and I am Melissa Dufresne. And basically today I'm gonna help you get to the bottom of why you might be losing conversions on your site and how you can purpose design to not only create a site that performs better, but also has a better user experience for your customers. So I'm a UX and digital designer for Elevated Third. I worked on a wide variety of clients there from Comcast to Sprint, the Denver Botanic Gardens, and a large variety of other nonprofits. This is my first Drupalcon, so I'm very excited to be here. I hope everyone else is. But Elevated Third is a digital agency. We're based in Denver, Colorado, and we basically help organizations solve technology and marketing problems. And I'm specifically there to help with the user experience and design for that. So everybody that is here wants to be here because they want to build a better website, right? And most projects start a little bit like this. The normal designer stock image, everyone's gathering around one computer. You're looking at a client website that you have an RFP out for. It's kind of hurting to look at that website. You're hoping that it'll turn out better in the end. And you get the great news from your boss that you guys won the RFP. You have a new client. The papers are getting signed. This is gonna be great news. It's a brand new project. Everyone in the site is thrilled. So you and the team are pumped. You're gonna create this brand spanking new website, something that's clean, engaging, gonna really help drive conversions. So what do you immediately do? You head over to Drupal because you saw some awesome gradients that you want to bring onto the site. You saw these slick interactions and brand new features that you're thinking are just gonna wow this client. So you start pulling the inspiration for a mood board. You have them saved to your desktop. This is all great, right? You're hitting the ground running and you haven't even had the discovery or briefing yet. You're way ahead of the game, right? No. Please stop. It's amazing that you're so excited about this brand new client, but you really haven't asked yourself the most important question. What is this website trying to accomplish? What are gonna be the metrics for success? So before you start any of that benchmarking or mood boarding or sketches, you really need to figure out what the purpose of the site is. What are the main results supposed to be? What are you gonna measure success by? Whether that's generating sales leads, getting increased signups for your newsletter, maybe getting membership increases as an event site. Everything on the goal, or the main goal of the site should really be some type of conversion. That's the main purpose you're creating the site. It shouldn't just be a pretty thing to look at. So before any of that strategy work can be done, you really need to understand those differences. So you need to understand not only what your user's goals are, but what your business goals are too, and kind of how those two correlate. So the most important thing to remember is you are not the user. Everyone tends to have this problem when they come to the site that they think they know how this should function, but you're not thinking about the main goal of the site is to make that a better user experience. So the way that you use the site is completely different from how your users are using it, and you need to focus on their pain points and what their goals are for the site. So you really need to figure out how you're gonna make this the best and easiest way for them to achieve their goals. So how do we do this? To start with, we use the core model. This was developed by Information Architect, Air Holland, and he was trying to solve this problem and introduce the core model, which he presented at the IA Summit in 2007, but it's still super relevant today. Basically, websites need to be designed from the inside out. The primary focus and the core tasks should be what its users are trying to accomplish on the site. So to start this process, you really need to map out the content and find out what on the site the pages overlap. So there might be business objectives and user tasks that are going to overlap, and that's where you can create those conversions from. So these business objectives should be somewhat measurable, and then the user tasks should be something that they're actually gonna be able to achieve on the site. So there's a wide variety of ways that you can get these potential tasks started to create it. One great way to start is by basically understanding what the company mission is and what the vision is, that's gonna help you understand the business objectives. But a great way to get the user's pain points is to gather the feedback from maybe customer service calls or surveys that they've had in user tests, and you can start to figure out what are the current problems on the site if one exists. Those are what you're gonna try and change on the next site going forward. And reviewing competitors' websites, that's a great place to benchmark your strategies too. See what else is going on in the arena, what's good, what's bad, what do you not wanna do, and so on. You can also observe the differences of who's visiting your site versus purchasing. Is there a reason that they're not buying? Is there something that is frustrating them that they're leaving before they're actually getting the purchase through? Another great one to look at is the audience insights. Sometimes on Facebook you can realize that very quickly what the audience is of, maybe it was a 16 to 30 year old you were trying to target, but actually it's people from 45 to 65 that are hitting the site, and that's a wide, wide gap of your demographic, and you need to know that you're targeting the right people. So basically, once you've determined what these business objectives are versus the user tasks, you can start figuring out the parallels and the differences of what someone close to the organization thinks the site should do versus what your users actually need to do on the site. So as an example, we have a tourism and an event website that we're working on, and the stakeholders of this organization believe that the company history and the leadership and the mission should be the most important things on the site. But is that really what's most important to your customer? For us, we identified that the tourism site's top tasks should be getting pricing for the events, buying tickets, finding out information about how you can attend these events, getting membership discounts. These are all gonna lead to conversions, which is the main reason you're creating the site. You're trying to make money, basically. And those tiny tasks, which might seem really important to leadership, and they're always kind of hard to try and explain to your client that that is important on the site, it shouldn't be buried too deep on the site, but that's not the main thing that's gonna drive the conversions on the site. You really need to focus on what the users are trying to accomplish. So the core method really helps keep your clients and the site purposes on track, and helps those to not derail. And you know, promoting these to the most important, importance on the site is what you want. So from our client example, the business objectives where they're trying to sell tickets, and they're trying to increase their memberships. Those were their two main points of conversion, which overlap with what the user was trying to do of just having a good time, getting tickets. They're trying to figure out how to get to the venue. So you can see that by taking all those top tasks and tiny tasks and trying to figure out where those conversions were overlapping, that's where you're starting to get sales from. So making sure that they're having the most hassle-free experience and everything that's gonna lead to your conversions. So focusing on those user tasks and needs instead of the business objectives is gonna really lead to noticeable conversions. The example I have pulled up right here is from Cisco's website redesign. You know, they originally had over 50 potential user tasks that they thought were relevant to who was coming to the site, but only three made the top cut of downloading software, configuring product setups and troubleshooting. And so from those three, they were able to put more strategy and planning into making what's gonna work the hardest on the site. So what was once a 15-step download process and took about 280 seconds to do, now only takes a four-step process in like 45 seconds and that's crazy. That's a crazy difference. The success rates went up by 30%. So you can imagine those pain points that the customer used to have are gone. They're able to achieve what they were trying to come to the site in a much easier way because we were focusing the strategy on that. So if you can make these tasks work really well, you're gonna be on the right track. But if you get them wrong, the chances are your customer is gonna leave. They're gonna be fed up and they don't wanna deal with it. So now that you've established those core site goals, you can start designing to optimize the best user experience. This is a great quote from Jason Goldberg. User experience matters a lot, but basically if you get too much in the way, people are gonna get angry, they're gonna leave and you've failed. That's not your purpose. Making sure that you're having the best user experience is what you're trying to design for. It shouldn't just be pretty. It needs to have function behind it as well. So to really achieve that high quality user experience, it needs to be a quick and painless way for them to achieve their tasks. So designers really need to create sites that follow web conventions and usability rules. These are the ultimate guides to navigating your site quickly and easily and if you break them, you're gonna confuse your users. So really simple things like having clear navigation, having the sign up in the top right-hand corner, icons that have meaning, having the cart in the top right. These are things that are standard on most sites that your customers are gonna know where they're at and if you confuse them by misplacing them in different areas, you're gonna lose people because they get frustrated. Designing with empathy is also something that we find very important. 15% of the world's population has some form of disability. This can be color blindness, low vision, hearing impairments, but the fastest growing population right now is 60 years of age and older. And so we need to be thinking about how we're designing and making these better experiences for everyone because accessibility really isn't a barrier to innovation. It's just introducing constraints that you can produce a better working website for everyone with that in mind. So as you move into these designs, you should be thinking about some of this stuff. This is a good example that I found that kind of like Snapchat, which I'm sorry, but I don't understand how to use very well. The interactions are really hard to understand what you're supposed to do next. You shouldn't be hiding gestural interactions. There should be a very clear way that your users should know what the next process or steps should be. 50% of site visitors have a less positive perception of a company after one single bad experience and that's huge. That's half of your customer base that you could be losing if they get angry and frustrated with your product. So no fancy amount of animation can fix that. You should really be keeping the interactions in mind and icons that have context and designing with contrast in mind. Also, you should be thinking about mobile first. The growth of mobile is huge. In a recent e-marketer study, by 2009 they predicted that 304 million mobile users will be in North America and that's huge. Like if someone's coming to your site, they're gonna expect that it's on mobile. So you should be thinking about how that's going to translate across mobile. It should be responsive. So it's no surprise that mobile is such an integral part of web design and marketing. So really your mobile experience has to do two things well. You need to consider why the customer has come to your site and also their intent. Users immediately expect things to be easy and on their terms. It's that quick satisfaction that they want and if they get angry, they will drop you. So ensuring success by designing with their context in mind is really how you're not going to sacrifice context or anything like that but create conversions. You also wanna give them just the right amount of choices. So giving them the right amount of filtering options and Airbnb does an excellent example of this. You know what might have been a really laborious task in the past of trying to figure out a vacation rental for a city you're going to visit is actually kind of fun now because they have implemented very easy filters. You can quickly find out if you want a place all to yourself, if you wanna share it with someone, how many bedrooms you need but you really need to create specific filters for those and that's how they've created this really amazing user interaction because they're creating the filters for the most popular categories and really differentiating what people want between the different various items that they have available on their site. So by putting those most important filters at the top they're letting you get down to a lower level and not get frustrated with all the choices that you're given. It doesn't need to be alphabetical or anything like that. The most important filter should be at the very top and then you can create those themed filter categories that are gonna help them find their and make their decisions more easy. You know, so if you have way too many options it's gonna become cumbersome. So there's always a fine line between how many filters you implement on site, and you don't wanna have too many or too few because it becomes more confusing. Just making sure that you have the right amount of choices. This one, I'm sure there's some people that are probably gonna disagree with me because I feel like this is a constant designer fight of keeping content above the fold. The Nielsen-Narman group showed that only 20% of people read below the fold but a lot of this has to do with content. Content is always king. You know, if you have really relevant and interesting content, people will continue to read. That's not gonna be an issue. So if you do have that content, you don't have to worry quite so much about that. But really there's no reason why you should be bearing what the benefits are that you have on the site. Have those immediately up on the site and don't hide that key information down the page. And lastly, with your CTAs, you don't wanna have that hard for them to take that next step. You know, why would you hide a buy button or a download button or anything like that? That's the main purpose of landing page that you're creating. You want that conversion for them to take the next step. So these are the things that you should just think about kind of always keeping above the fold but you can still use the rest of the page to have the more diving deeper content and everything to give them more context. You know, it's all about the motivation and how desirable your product sounds. Social proof is another great way to increase conversions. It's shown to be a 34% conversion boost when you're able to put these on your site. So it's kind of the lemming whole ideal that people follow and do things that other people do. You know, once they see that someone's done it, it's not as scary. You know, they're gonna see that it's improved the lives of someone else. So adding those reviews and testimonials makes it really clear that you're the real deal. You know, people trust you. And then having those number of signups and members, you know, when a site, you can see the high number of member numbers, you get that credibility. You know, Netflix does that. They'll put the number that they have in their base camp does that. These are all great ways to show the wide variety of client base that you have. And lastly, using client logos is another great one. It's kind of that they trust us and we trust them. We have the whole credibility back and forth. If you can put your client logos on your site, that's amazing. That's another way that you can get that credibility because you're showing that if your product was good enough for this one person, then it must be good enough for our company too. Personalization is another great way. You know, Amazon, if Amazon's doing it, they've got to be doing something right, right? They've got a ton of sales because I am kind of one of those people that has the one click shopping and that's come to be a problem sometimes when I'm on shopping late at night. But you know, everybody that's on Amazon sees a different version of these pages because it's curating the content based on what you were looking for or what you're buying. So they put a ton and ton of research and money and data behind that because it's shown to work. You know, if you're buying like a hair care product, they're gonna correlate what other hair care products might go along with that and you're gonna be more likely to buy it. You know, an article in Business to Community said that 50% or 56% of consumers were more likely to shop with retailers who offered personalization. That's huge. And they also said that a whopping 74% will get frustrated and leave when they see content that doesn't match what their interests are. So you can see there's a very wide gap there. So if there's any way that you can create personas or create location targeting or some way to tie products with each other, whether it's by tagging or filtering, that's a great way that you can create these relevant products that your users will want. Videos are also another great way to convert. 52% of consumers are more confident about a purchase when they have a video. And I know this is one that's kind of hard because it does require a bit of money. Clients don't always have the ability to pay for a video or have the resources for it. But one thing that I saw in Advanced Auto Parts is that they had how-to videos and it led to visitors staying on the site twice as long and they also visited twice as many pages versus the people that didn't see that video. So it's kind of creating that credibility again that they're seeing how do I use this product and getting those pain points out for you to understand their product a little bit better. Even Netflix is trying right now to remove all their static content on their site. They're trying to make every single video or movie that you see have some type of animation to it that's plain because they've shown that that converts. That's how people want to see their content. They want to know maybe a short five second clip of what this is going to be to make it a little bit more relevant to them. So with all those things in mind, you also need to be thinking about how you're tracking and making small adjustments to your site. We use Hot Jar at our company. We've just found that it's a little bit easier, especially for the design side, for us to understand how people are using our site. And this is an example of a heat map that they have. And it also allows you to see your click and scroll behavior and do user recording. But this is a great way to understand how people are using your site. We actually were using this for our recent new launch of our website. And we saw that about 50% of people were dropping off below our homepage video. That's not good. We don't want that. And then we realized it's because people couldn't see the content beneath the video. So by cutting it by about 100 pixels on the homepage, we saw a drastic change that people were no longer leaving the homepage. They were scrolling down further because they could see the content. So it's little things like that, that you can make these small adjustments to help your site work harder. That's what you definitely just want to keep doing. You know, a website should never be one and done and needs to be constantly lived on and refreshed. And that's something that we try to make sure our clients understand too. So it's these little things that are gonna help you get those conversions all along. So basically, to sum it all up, there are a lot of different avenues. I had to put the cat gif in there. I held out the entire time. But basically, there are a lot of different avenues for you to implement changes on your site. And these are not all of them, obviously. Trying to fit them all in here, but to give you guys a good idea of those that lead to conversions. But the main thing is you should always be keeping your users in mind and their tasks that they're trying to complete on your site. This is what should be driving the strategy of how you're creating your site. Always for your users. Giving them confidence in their actions, which is the personalization and testimonials and videos, those are all great ways to make sure they're confident in what they're about to do on your site. And also making sure that you're just creating a really hassle-free experience for them. Everyone gets so frustrated when there's a site that they just can't get what they were trying to accomplish done. They instead call customer service because they have no idea how to fulfill it. These are all things that you need to start thinking about when you're designing a site to make it cohesive. But the user should always be the key focus. If the user is happy and they feel like they fulfilled their task in the least difficult way possible, you're gonna have a happy user. And a happy user equals a happy client. So, to end that, I just wanna thank everyone for coming to this session. And if you have any questions, please let me know. And come visit our booth. Thanks for the presentation. Thanks. I have a question about the 20% of people read below the fold. Can I get a citation on that? And also, do you know the breakdown between people using mobile versus desktop? Between mobile, you said? Yeah, mobile and desktop. Yeah, mobile's always kind of hard, obviously, just since the images will always be longer on mobile and everything like that. This one was specifically for desktop, so I'd have to find a stat that would also prove that for mobile, because it would be different because you're dealing with a smaller screen size. But basically, if there's some way that you can maybe just have a smaller image on your mobile and have those benefits bullet pointed or something, it might not be as pretty, obviously, as it's gonna look on desktop. But again, you just don't wanna hide that key information and benefits. And the CTA, still, if you have your mobile screen, the CTA should be right in the middle there. It shouldn't be beneath, because on mobile, you're gonna lose even more people, because they get frustrated as easily. But I'll be sure to put the citations in there as well, so you can prove that. Right, right, thanks. Yep. Yeah, we, AB testing. Yep, AB testing, that was one I actually had to cut out because of time constraints, but yeah, that's something that you always wanna test, too. If there's any type of language for AB testing, the CTAs, if those change at all, CTA language we've found, if you just slightly change that, that can make such a difference in conversions as well. So that's always something you should be keeping in mind, too, just those little tiny changes you can make back and forth to see if that helps and track it for a couple of weeks to find out if they made any difference. Yeah, you know Google's everything on Google, so don't explore it. Yeah. Exactly. Yeah, if only. Yeah, I'm working on a project right now and they did some user testing with people that are low vision, so they're not using a screen reader, but they're zooming way, way into the screen. So instead of putting the call to actions in the right sidebar where they originally had them, they realized if they moved them over to the left side of the page, people could actually see them as they only scrolled up and down with a zoom way, way in instead of putting them on the right sidebar, they'll never make it to the right side. So the placement left to right also matters. It's that whole readability. People always usually read from left to right, so yeah, that definitely helps with the flexibility. Thank you. Thank you. By the way, I'm just like, everybody has to load it, you know. And they did like a wide, wide house and I went to the water and so the most reason