How to Design A Website Using DATA
Published on: December 2 2022 by Ryan Stewart
How to Design A Website Using DATA
Table of Contents
How to Design A Website Using DATA
| startTime | durationTime | text |
| 00:00:00 | 00:00:04 | design is not all about fonts colors and |
| 00:00:02 | 00:00:06 | logos it's also about form and function |
| 00:00:04 | 00:00:09 | and even though you may be a marketer |
| 00:00:06 | 00:00:11 | who can't draw a stik figure you can |
| 00:00:09 | 00:00:12 | still be a great designer specifically |
| 00:00:11 | 00:00:14 | from the UX perspective and you can do |
| 00:00:12 | 00:00:16 | so by taking your knowledge of data and |
| 00:00:14 | 00:00:18 | applying that to how and why you should |
| 00:00:16 | 00:00:20 | be building website the way it's built |
| 00:00:18 | 00:00:21 | and I've got a perfect case study from a |
| 00:00:20 | 00:00:23 | recent client website that we just built |
| 00:00:21 | 00:00:25 | and I'm gonna walk you through how our |
| 00:00:23 | 00:00:28 | team that from the future analyzes data |
| 00:00:25 | 00:00:29 | as a part of the design process really |
| 00:00:28 | 00:00:32 | before we do anything else and how we |
| 00:00:29 | 00:00:34 | use that data to feed the look and feel |
| 00:00:32 | 00:00:36 | and functionality of that website so |
| 00:00:34 | 00:00:38 | let's jump on into my powerpoint let's |
| 00:00:36 | 00:00:41 | dive deep into how data should feed your |
| 00:00:38 | 00:00:43 | website's design as I said I'm gonna use |
| 00:00:41 | 00:00:46 | a case study from our agency from the |
| 00:00:43 | 00:00:48 | future about how our UX consultants |
| 00:00:46 | 00:00:50 | really dug deep into the clients |
| 00:00:48 | 00:00:53 | marketing data to build something |
| 00:00:50 | 00:00:54 | amazing both functional and beautiful so |
| 00:00:53 | 00:00:56 | unfortunately I can't give you the |
| 00:00:54 | 00:00:57 | client name but I'll give you a little |
| 00:00:56 | 00:00:59 | bit about them so you have some context |
| 00:00:57 | 00:01:01 | from what I'm gonna tok about they are |
| 00:00:59 | 00:01:02 | a large national loan provider with |
| 00:01:01 | 00:01:05 | hundreds of store locations across the |
| 00:01:02 | 00:01:07 | u.s. they had a horribly performing |
| 00:01:05 | 00:01:09 | website decreasing engagement terrible |
| 00:01:07 | 00:01:11 | stikiness high bounce rate conversions |
| 00:01:09 | 00:01:13 | were decreasing in organic search was |
| 00:01:11 | 00:01:16 | just falling through the floor mainly |
| 00:01:13 | 00:01:18 | from poor UX poor messaging poor on-page |
| 00:01:16 | 00:01:20 | and just an overall terrible user |
| 00:01:18 | 00:01:21 | experience the site was not delivering |
| 00:01:20 | 00:01:23 | on what it should be delivering from a |
| 00:01:21 | 00:01:25 | search point of view and from a visitor |
| 00:01:23 | 00:01:27 | and customer point of view obviously the |
| 00:01:25 | 00:01:29 | solution was to do a full website design |
| 00:01:27 | 00:01:32 | but the reason why I'm highlighting this |
| 00:01:29 | 00:01:34 | client out of the hundreds of websites |
| 00:01:32 | 00:01:36 | that we built is because this client |
| 00:01:34 | 00:01:38 | consistently asked why throughout the |
| 00:01:36 | 00:01:40 | process which really forced us to go |
| 00:01:38 | 00:01:41 | back in and this is why I love being a |
| 00:01:40 | 00:01:43 | part of an agency because you're |
| 00:01:41 | 00:01:45 | continuously learning continuously |
| 00:01:43 | 00:01:47 | growing to go back and really look at |
| 00:01:45 | 00:01:49 | the wat everything from your color |
| 00:01:47 | 00:01:51 | scheme to the pictures that you're using |
| 00:01:49 | 00:01:52 | to the messaging to the way that your |
| 00:01:51 | 00:01:55 | forms are structured your data should |
| 00:01:52 | 00:01:57 | inform that why for how and why your |
| 00:01:55 | 00:01:58 | website is built that way so where do we |
| 00:01:57 | 00:02:00 | get the data from |
| 00:01:58 | 00:02:02 | I dig heavily into Google Analytiks this |
| 00:02:00 | 00:02:04 | tells us to who what where is coming to |
| 00:02:02 | 00:02:05 | the website Google search console |
| 00:02:04 | 00:02:07 | specifically from an organic search |
| 00:02:05 | 00:02:10 | point of view but gives us more insight |
| 00:02:07 | 00:02:11 | of who what where and how people are |
| 00:02:10 | 00:02:13 | coming to your website through Google |
| 00:02:11 | 00:02:15 | obviously CRM or an email |
| 00:02:13 | 00:02:16 | for me if you can get access to this |
| 00:02:15 | 00:02:18 | data we can really dig into who that |
| 00:02:16 | 00:02:19 | customer is and who the conversion |
| 00:02:18 | 00:02:21 | target is right we really want to be |
| 00:02:19 | 00:02:23 | building things around who that target |
| 00:02:21 | 00:02:25 | customer is not just the target audience |
| 00:02:23 | 00:02:27 | and visitor to the website so as I said |
| 00:02:25 | 00:02:29 | the data informs the entire site's build |
| 00:02:27 | 00:02:31 | process it's a very high bird's eye |
| 00:02:29 | 00:02:32 | level view of our design and development |
| 00:02:31 | 00:02:34 | process |
| 00:02:32 | 00:02:36 | research is the first thing that we do |
| 00:02:34 | 00:02:38 | as a part of the UX process in the first |
| 00:02:36 | 00:02:41 | part of our research sub process is data |
| 00:02:38 | 00:02:43 | analysis and while our design practike |
| 00:02:41 | 00:02:46 | is relatively new we've been a marketing |
| 00:02:43 | 00:02:47 | agency for years now and our marketing |
| 00:02:46 | 00:02:50 | consultants have done an amazing job |
| 00:02:47 | 00:02:52 | pairing up with our UX consultants to |
| 00:02:50 | 00:02:54 | help them understand a website from a |
| 00:02:52 | 00:02:55 | marketing point of view as a marketing |
| 00:02:54 | 00:02:58 | asset so what I want to do is run you |
| 00:02:55 | 00:03:00 | through a bunch of different Google |
| 00:02:58 | 00:03:01 | Analytiks reports that's gonna help |
| 00:03:00 | 00:03:03 | answer these questions I want to |
| 00:03:01 | 00:03:05 | actually go through these reports and |
| 00:03:03 | 00:03:07 | show you how to dig into them and the |
| 00:03:05 | 00:03:08 | data that you can mine from them so the |
| 00:03:07 | 00:03:09 | first one I want to tok about is in |
| 00:03:08 | 00:03:11 | Google Analytiks and this is a |
| 00:03:09 | 00:03:13 | demographic reporting we can look at the |
| 00:03:11 | 00:03:15 | age and gender of the traffic coming to |
| 00:03:13 | 00:03:18 | our website so over here on the audience |
| 00:03:15 | 00:03:19 | side if we just go to the overview we'll |
| 00:03:18 | 00:03:21 | get this nice little report here that |
| 00:03:19 | 00:03:22 | again shows the age and the gender of |
| 00:03:21 | 00:03:24 | all the traffic coming to the website |
| 00:03:22 | 00:03:26 | but that what's really cool is you can |
| 00:03:24 | 00:03:29 | add on segments up here that will allow |
| 00:03:26 | 00:03:30 | us to look at again different segments |
| 00:03:29 | 00:03:31 | of the traffic coming to the website to |
| 00:03:30 | 00:03:33 | break down that traffic a little bit |
| 00:03:31 | 00:03:36 | further so here in blue this is all the |
| 00:03:33 | 00:03:37 | traffic this is just my website my blog |
| 00:03:36 | 00:03:39 | you can see here that 55% of the people |
| 00:03:37 | 00:03:42 | come in the website are between the ages |
| 00:03:39 | 00:03:43 | of 25 and 34 and a large majority are |
| 00:03:42 | 00:03:46 | male damn I need some more female |
| 00:03:43 | 00:03:48 | viewers so uh-huh then here in organic |
| 00:03:46 | 00:03:50 | traffic sixty-seven percent of traffic |
| 00:03:48 | 00:03:51 | mobile traffic 15% you can just see how |
| 00:03:50 | 00:03:53 | the traffic begins to change a little |
| 00:03:51 | 00:03:55 | bit and again this report is pretty |
| 00:03:53 | 00:03:57 | straightforward and helps us inform who |
| 00:03:55 | 00:03:59 | is coming to the website and this type |
| 00:03:57 | 00:04:02 | of information can help us inform things |
| 00:03:59 | 00:04:03 | about like site imagery site tone the |
| 00:04:02 | 00:04:05 | content you want to have on your website |
| 00:04:03 | 00:04:07 | you know if you skew very young or you |
| 00:04:05 | 00:04:10 | skew very male or female it's gonna |
| 00:04:07 | 00:04:11 | change and dictate how you want to |
| 00:04:10 | 00:04:13 | communicate with your audience |
| 00:04:11 | 00:04:15 | another interesting report I'm not gonna |
| 00:04:13 | 00:04:17 | show another interesting report if you |
| 00:04:15 | 00:04:19 | are building a local website another |
| 00:04:17 | 00:04:20 | interesting report to help you |
| 00:04:19 | 00:04:22 | understand where people are coming from |
| 00:04:20 | 00:04:24 | is again over here an audience and then |
| 00:04:22 | 00:04:26 | if we come down to geo and we go to |
| 00:04:24 | 00:04:27 | location we can see where people are |
| 00:04:26 | 00:04:28 | looking |
| 00:04:27 | 00:04:30 | and this might be a little bit better to |
| 00:04:28 | 00:04:32 | look at without the segment if you don't |
| 00:04:30 | 00:04:33 | know how to add segments you just come |
| 00:04:32 | 00:04:35 | up here to click Add segment and you can |
| 00:04:33 | 00:04:37 | come down here and you can search for a |
| 00:04:35 | 00:04:38 | bunch of ones that are pre-populated or |
| 00:04:37 | 00:04:40 | you can create your own they're very |
| 00:04:38 | 00:04:42 | easy to do it's not overly |
| 00:04:40 | 00:04:43 | self-explanatory but there's plenty of |
| 00:04:42 | 00:04:44 | information on the web that will show |
| 00:04:43 | 00:04:46 | you how to do it you can create custom |
| 00:04:44 | 00:04:48 | segments for whatever you want really |
| 00:04:46 | 00:04:50 | but this report here will show you your |
| 00:04:48 | 00:04:52 | breakdown of traffic and if you hit |
| 00:04:50 | 00:04:54 | these little things here you can break |
| 00:04:52 | 00:04:55 | down by city so if your local business |
| 00:04:54 | 00:04:57 | or if you're deciding if you want to add |
| 00:04:55 | 00:04:59 | different languages to a website built |
| 00:04:57 | 00:05:01 | this will help you to understand where |
| 00:04:59 | 00:05:03 | your traffic is coming from so let's go |
| 00:05:01 | 00:05:04 | back in the PowerPoint this is a very |
| 00:05:03 | 00:05:06 | simple device report it just shows us |
| 00:05:04 | 00:05:09 | the breakdown of traffic by device type |
| 00:05:06 | 00:05:11 | so mobile desktop and tablet so mobile |
| 00:05:09 | 00:05:14 | desktop and tablet this can help us to |
| 00:05:11 | 00:05:15 | inform how we start the design process |
| 00:05:14 | 00:05:17 | in regards to what we're designing |
| 00:05:15 | 00:05:19 | either mobile first or desktop first you |
| 00:05:17 | 00:05:21 | can see this website here is about 60% |
| 00:05:19 | 00:05:24 | mobile let's look at the analytiks |
| 00:05:21 | 00:05:26 | report this is also under audience |
| 00:05:24 | 00:05:30 | mobile overview you can see here that my |
| 00:05:26 | 00:05:31 | website is 83% desktop so you're looking |
| 00:05:30 | 00:05:33 | at a website in the PowerPoint that's |
| 00:05:31 | 00:05:35 | 60% mobile we'd probably want to skew |
| 00:05:33 | 00:05:37 | that to obviously being a mobile first |
| 00:05:35 | 00:05:39 | design whereas for this website that's |
| 00:05:37 | 00:05:41 | overwhelmingly desktop we're for sure |
| 00:05:39 | 00:05:43 | gonna want to design the desktop |
| 00:05:41 | 00:05:45 | experience first and again this is |
| 00:05:43 | 00:05:48 | another great place to add segments on |
| 00:05:45 | 00:05:49 | for traffic source to better understand |
| 00:05:48 | 00:05:51 | who and how is coming to the website |
| 00:05:49 | 00:05:53 | from what device if we want to |
| 00:05:51 | 00:05:55 | understand how people are getting there |
| 00:05:53 | 00:05:57 | this is a very simple report to look at |
| 00:05:55 | 00:05:59 | the breakdown of traffic source let's |
| 00:05:57 | 00:06:01 | look at analytiks I'll show you access |
| 00:05:59 | 00:06:04 | it this is gonna be the acquisition tab |
| 00:06:01 | 00:06:05 | overview so this helps us to understand |
| 00:06:04 | 00:06:07 | how people are coming to the website in |
| 00:06:05 | 00:06:08 | another report I'm going to show you how |
| 00:06:07 | 00:06:11 | to segment by the landing page so we can |
| 00:06:08 | 00:06:13 | see how landing page and the entry page |
| 00:06:11 | 00:06:14 | is also affected by traffic source which |
| 00:06:13 | 00:06:16 | is going to push in a little bit more |
| 00:06:14 | 00:06:18 | into the UX experience for when we're |
| 00:06:16 | 00:06:19 | building our landing pages again |
| 00:06:18 | 00:06:21 | something else that we can segment on |
| 00:06:19 | 00:06:23 | here is to look at mobile you could |
| 00:06:21 | 00:06:25 | easily just select mobile down here |
| 00:06:23 | 00:06:27 | playing with different segments to see |
| 00:06:25 | 00:06:29 | how that impacts the incoming traffic |
| 00:06:27 | 00:06:31 | source as I just said there's a page |
| 00:06:29 | 00:06:33 | that will show us the landing page this |
| 00:06:31 | 00:06:34 | is actually one of my favorite reports |
| 00:06:33 | 00:06:36 | whenever I'm looking at analytiks I |
| 00:06:34 | 00:06:38 | usually start with this page and I'll |
| 00:06:36 | 00:06:39 | add a little segment to show the traffic |
| 00:06:38 | 00:06:40 | source as well because this helps me |
| 00:06:39 | 00:06:42 | understand |
| 00:06:40 | 00:06:44 | where people are coming the most popular |
| 00:06:42 | 00:06:46 | page is the traffic source and then all |
| 00:06:44 | 00:06:48 | the different engagement metrics here |
| 00:06:46 | 00:06:49 | percentage new sessions this is actually |
| 00:06:48 | 00:06:50 | really important when it comes to |
| 00:06:49 | 00:06:52 | toking about designing a website |
| 00:06:50 | 00:06:54 | because when we can start to do is see |
| 00:06:52 | 00:06:55 | which types of pages the blog posts the |
| 00:06:54 | 00:06:57 | home page you can see here the |
| 00:06:55 | 00:06:58 | percentage of new traffic here is 90 |
| 00:06:57 | 00:07:00 | percent where the percentage of traffic |
| 00:06:58 | 00:07:02 | that's the new traffic on the home page |
| 00:07:00 | 00:07:04 | is 60 percent so why is that important |
| 00:07:02 | 00:07:06 | so when we're designing a blog posts and |
| 00:07:04 | 00:07:08 | blog templates if most of the traffic |
| 00:07:06 | 00:07:09 | come to these pages is new it means that |
| 00:07:08 | 00:07:10 | they're not going to be familiar with |
| 00:07:09 | 00:07:12 | the brand and that we're probably gonna |
| 00:07:10 | 00:07:14 | want to put some sort of maybe sidebar |
| 00:07:12 | 00:07:17 | on the post that might tell them about |
| 00:07:14 | 00:07:19 | the website or some sort of email |
| 00:07:17 | 00:07:20 | capture to get them to opt-in to get |
| 00:07:19 | 00:07:22 | them to come back to the website |
| 00:07:20 | 00:07:23 | eventually versus the home page if most |
| 00:07:22 | 00:07:24 | of the people are coming back they're |
| 00:07:23 | 00:07:26 | already familiar with it then we might |
| 00:07:24 | 00:07:27 | be able to make the assumption that we |
| 00:07:26 | 00:07:29 | don't have to go as hard on the |
| 00:07:27 | 00:07:31 | educational copy on the site but this |
| 00:07:29 | 00:07:32 | needs to be further segmented down to |
| 00:07:31 | 00:07:34 | traffic source as well which will I'll |
| 00:07:32 | 00:07:36 | show you in a second so the access the |
| 00:07:34 | 00:07:38 | landing page report is under behavior |
| 00:07:36 | 00:07:40 | site content landing page so this is the |
| 00:07:38 | 00:07:41 | same report that we just looked at and |
| 00:07:40 | 00:07:43 | if you want to get a little bit more |
| 00:07:41 | 00:07:45 | surgical with it you can come up here to |
| 00:07:43 | 00:07:47 | secondary dimension type in source |
| 00:07:45 | 00:07:49 | medium and now like I said it's gonna |
| 00:07:47 | 00:07:51 | segment the landing page in the sessions |
| 00:07:49 | 00:07:53 | by the source and there's also this |
| 00:07:51 | 00:07:55 | really important data here like bounce |
| 00:07:53 | 00:07:57 | rate pages per session session duration |
| 00:07:55 | 00:07:58 | and then of course conversions which |
| 00:07:57 | 00:08:00 | we'll tok about more in detail because |
| 00:07:58 | 00:08:01 | it's probably the most important thing |
| 00:08:00 | 00:08:03 | that you can look at when we're toking |
| 00:08:01 | 00:08:04 | about building a website for the right |
| 00:08:03 | 00:08:06 | people so something else we want to |
| 00:08:04 | 00:08:08 | understand is not just how the arriving |
| 00:08:06 | 00:08:10 | to the website and where but are they |
| 00:08:08 | 00:08:11 | dwelling there are they staying on these |
| 00:08:10 | 00:08:13 | pages are they bouncing are they leaving |
| 00:08:11 | 00:08:15 | let me show you that accesses report in |
| 00:08:13 | 00:08:16 | real time let's jump in analytiks so |
| 00:08:15 | 00:08:18 | this is also gonna be under behavior and |
| 00:08:16 | 00:08:20 | then it's gonna be under content drill |
| 00:08:18 | 00:08:21 | down and so let me break down the |
| 00:08:20 | 00:08:23 | difference between this and the landing |
| 00:08:21 | 00:08:25 | page report the landing pages report is |
| 00:08:23 | 00:08:27 | gonna show you any time the page was |
| 00:08:25 | 00:08:28 | viewed as an entry to the website |
| 00:08:27 | 00:08:31 | content to roll down this is gonna show |
| 00:08:28 | 00:08:32 | you any time that the page was viewed so |
| 00:08:31 | 00:08:34 | they don't have to come in through this |
| 00:08:32 | 00:08:36 | page they could have just passed to this |
| 00:08:34 | 00:08:37 | page from another site from another page |
| 00:08:36 | 00:08:39 | of the website so the reason why this is |
| 00:08:37 | 00:08:41 | important is I really like to look at |
| 00:08:39 | 00:08:43 | these three metrics here average time on |
| 00:08:41 | 00:08:45 | page bounce rate and percentage of exit |
| 00:08:43 | 00:08:49 | this tells me the quality of that page |
| 00:08:45 | 00:08:51 | and does that page deliver on what the |
| 00:08:49 | 00:08:52 | user and the visitor is looking for so |
| 00:08:51 | 00:08:53 | the average time a page is pretty |
| 00:08:52 | 00:08:55 | straightforward it tells us |
| 00:08:53 | 00:08:58 | along there on this specific page for |
| 00:08:55 | 00:08:59 | and this is also a different metric than |
| 00:08:58 | 00:09:01 | session duration don't get them confused |
| 00:08:59 | 00:09:03 | average time on pays tells you |
| 00:09:01 | 00:09:05 | specifically the time that somebody |
| 00:09:03 | 00:09:06 | spends on this page you can only get to |
| 00:09:05 | 00:09:09 | that metric through the content drill |
| 00:09:06 | 00:09:11 | down in the reason why this is important |
| 00:09:09 | 00:09:13 | is you can see here that this post here |
| 00:09:11 | 00:09:15 | google index people are staying on this |
| 00:09:13 | 00:09:16 | page for 15 minutes that tells me that |
| 00:09:15 | 00:09:19 | with this number of people people are |
| 00:09:16 | 00:09:23 | really reading this page but you can see |
| 00:09:19 | 00:09:24 | here the exit rate is 91% so if you were |
| 00:09:23 | 00:09:27 | to look at this metric here first exit |
| 00:09:24 | 00:09:28 | rate at 91% that might tell you that |
| 00:09:27 | 00:09:29 | there's something wrong with a page |
| 00:09:28 | 00:09:31 | right people are coming to this page and |
| 00:09:29 | 00:09:34 | then leaving but when you segment it |
| 00:09:31 | 00:09:37 | with this this actually tells me that |
| 00:09:34 | 00:09:38 | this page is probably suffice exactly |
| 00:09:37 | 00:09:40 | what that person needs because they're |
| 00:09:38 | 00:09:41 | coming here spending a lot of time and |
| 00:09:40 | 00:09:42 | then leaving so they got the information |
| 00:09:41 | 00:09:44 | that they need it and then they left |
| 00:09:42 | 00:09:46 | these two metrics here bounce rate and |
| 00:09:44 | 00:09:47 | exit rate are also really important |
| 00:09:46 | 00:09:49 | because bounce rate tells you that the |
| 00:09:47 | 00:09:51 | percentage of times that somebody comes |
| 00:09:49 | 00:09:53 | to the page and then leaves right away |
| 00:09:51 | 00:09:56 | exit rate is a different metric it tells |
| 00:09:53 | 00:09:58 | you that this is not the first view of |
| 00:09:56 | 00:09:59 | the page somebody came to this page from |
| 00:09:58 | 00:10:01 | another page this is a percentage of |
| 00:09:59 | 00:10:04 | time that somebody did not bounce and |
| 00:10:01 | 00:10:06 | then left on this specific page so |
| 00:10:04 | 00:10:07 | bounce rate is the percentage of times |
| 00:10:06 | 00:10:09 | if somebody visited this page from |
| 00:10:07 | 00:10:11 | social from organic search and then left |
| 00:10:09 | 00:10:12 | right away exit rate is the percentage |
| 00:10:11 | 00:10:14 | of times if somebody viewed this page |
| 00:10:12 | 00:10:16 | and then left again |
| 00:10:14 | 00:10:17 | so not entering the page but viewing the |
| 00:10:16 | 00:10:18 | page and then leaving and the reason why |
| 00:10:17 | 00:10:19 | this is important is because we want to |
| 00:10:18 | 00:10:22 | really look at this from the point of |
| 00:10:19 | 00:10:24 | view from a design of key landing pages |
| 00:10:22 | 00:10:25 | on the website so Dukey landing pages |
| 00:10:24 | 00:10:27 | this is a blog post this is not a key |
| 00:10:25 | 00:10:29 | landing page this tools page this is a |
| 00:10:27 | 00:10:31 | key landing page service page this is a |
| 00:10:29 | 00:10:33 | key landing page if the exit rate was |
| 00:10:31 | 00:10:34 | 90% on this I would be very concerned |
| 00:10:33 | 00:10:36 | because that's telling that somebody's |
| 00:10:34 | 00:10:38 | getting to my mid bottom of the funnel |
| 00:10:36 | 00:10:40 | pages and then leaving likely without |
| 00:10:38 | 00:10:41 | converting unless the conversion takes |
| 00:10:40 | 00:10:43 | place on that page which for the site it |
| 00:10:41 | 00:10:44 | does not so this is a good sign here |
| 00:10:43 | 00:10:46 | that somebody's coming to our service |
| 00:10:44 | 00:10:48 | page and they're not exiting on it |
| 00:10:46 | 00:10:49 | they're not bouncing on it they're going |
| 00:10:48 | 00:10:50 | and they're passing deeper in the |
| 00:10:49 | 00:10:52 | website to discover more this is telling |
| 00:10:50 | 00:10:53 | me that this page is probably doing a |
| 00:10:52 | 00:10:56 | pretty good job so we might not want to |
| 00:10:53 | 00:10:58 | alter a copy too much but for the client |
| 00:10:56 | 00:10:59 | that we did this for their landing pages |
| 00:10:58 | 00:11:01 | were performing terribly which I'm gonna |
| 00:10:59 | 00:11:02 | show you right now so we actually built |
| 00:11:01 | 00:11:04 | this chart custom all we did was pull |
| 00:11:02 | 00:11:06 | the data out and then do a little |
| 00:11:04 | 00:11:06 | segmentation of the pages so what we did |
| 00:11:06 | 00:11:08 | is |
| 00:11:06 | 00:11:10 | looked at those key landing pages so as |
| 00:11:08 | 00:11:11 | I said there are loans provider these |
| 00:11:10 | 00:11:13 | are gonna be there essentially they're |
| 00:11:11 | 00:11:15 | service pages and we wanted to look to |
| 00:11:13 | 00:11:17 | see how they are performing against the |
| 00:11:15 | 00:11:18 | rest of the site so you can see here the |
| 00:11:17 | 00:11:20 | rest of their site's performance the |
| 00:11:18 | 00:11:21 | average time on page was almost twice as |
| 00:11:20 | 00:11:22 | high |
| 00:11:21 | 00:11:24 | the average bounce rate was lower and |
| 00:11:22 | 00:11:26 | the average ex rate was about the same |
| 00:11:24 | 00:11:28 | but what this is telling us is but what |
| 00:11:26 | 00:11:30 | this told us was that when we looked at |
| 00:11:28 | 00:11:31 | the front end of these pages we could |
| 00:11:30 | 00:11:33 | see that the pages are really thin they |
| 00:11:31 | 00:11:35 | didn't have much content they didn't |
| 00:11:33 | 00:11:36 | have much information and this is in an |
| 00:11:35 | 00:11:38 | industry loans where people are really |
| 00:11:36 | 00:11:40 | looking to get a lot of questions |
| 00:11:38 | 00:11:41 | answered right if you're gonna go out |
| 00:11:40 | 00:11:43 | and take a loan it's a pretty big deal |
| 00:11:41 | 00:11:45 | you're gonna need a lot of content and a |
| 00:11:43 | 00:11:46 | lot of information we're gonna want to |
| 00:11:45 | 00:11:48 | try and triple or quadruple this number |
| 00:11:46 | 00:11:50 | at least by adding a lot more content to |
| 00:11:48 | 00:11:52 | the page and I'll tok about that in a |
| 00:11:50 | 00:11:53 | second about how we did that how are |
| 00:11:52 | 00:11:54 | they performing this is the most |
| 00:11:53 | 00:11:56 | important metric that we can look at if |
| 00:11:54 | 00:11:58 | it's an e-commerce site we want to look |
| 00:11:56 | 00:11:59 | at ecommerce conversion rate and |
| 00:11:58 | 00:12:01 | obviously revenue generated if it's a |
| 00:11:59 | 00:12:03 | lead generation website we want to look |
| 00:12:01 | 00:12:05 | at goal conversions in goal conversion |
| 00:12:03 | 00:12:06 | rate so when we're in analytiks we can |
| 00:12:05 | 00:12:08 | just come down here to conversions and |
| 00:12:06 | 00:12:10 | if it's a goal website just come here to |
| 00:12:08 | 00:12:12 | overview and what I really like to do |
| 00:12:10 | 00:12:14 | here is add segments so I like to add in |
| 00:12:12 | 00:12:16 | here I like to add in the mobile segment |
| 00:12:14 | 00:12:18 | and then male or female segments so what |
| 00:12:16 | 00:12:20 | we can see here is the breakdown of |
| 00:12:18 | 00:12:22 | conversions based on the different |
| 00:12:20 | 00:12:24 | demographics and then mobile so again |
| 00:12:22 | 00:12:25 | what form what we're looking this from a |
| 00:12:24 | 00:12:26 | design point of view not from a |
| 00:12:25 | 00:12:29 | marketing point of view we want to |
| 00:12:26 | 00:12:31 | understand how these different demos are |
| 00:12:29 | 00:12:33 | impacting the conversion of the website |
| 00:12:31 | 00:12:35 | who is the most valuable customer to the |
| 00:12:33 | 00:12:36 | website and granted this is based on the |
| 00:12:35 | 00:12:38 | current build if the website is |
| 00:12:36 | 00:12:40 | completely skewed and botched then this |
| 00:12:38 | 00:12:41 | data is not going to be great but we |
| 00:12:40 | 00:12:43 | want to understand who their core |
| 00:12:41 | 00:12:44 | customers and we want to try and build |
| 00:12:43 | 00:12:47 | and optimize a website around that and |
| 00:12:44 | 00:12:49 | again these things feed the design the |
| 00:12:47 | 00:12:49 | look the feel the functionality of the |
| 00:12:49 | 00:12:52 | website |
| 00:12:49 | 00:12:53 | another cool report is to analyze if |
| 00:12:52 | 00:12:55 | people are finding what they need is |
| 00:12:53 | 00:12:58 | internal site search so if you have this |
| 00:12:55 | 00:12:59 | report set up on a website you can check |
| 00:12:58 | 00:13:01 | to see how many people are searching |
| 00:12:59 | 00:13:03 | once they come to the website so if |
| 00:13:01 | 00:13:05 | people are using the internal search you |
| 00:13:03 | 00:13:06 | don't want to jump and say hey people |
| 00:13:05 | 00:13:07 | can't find what they're looking for but |
| 00:13:06 | 00:13:09 | we want to look at these keywords and |
| 00:13:07 | 00:13:11 | try and understand if they're searching |
| 00:13:09 | 00:13:13 | for things that are not on the website |
| 00:13:11 | 00:13:14 | that obviously needs to feed the |
| 00:13:13 | 00:13:15 | structure the architecture and the |
| 00:13:14 | 00:13:17 | content that's going to be on the |
| 00:13:15 | 00:13:19 | website another kind of advanced report |
| 00:13:17 | 00:13:20 | here is this pathing report so we come |
| 00:13:19 | 00:13:22 | over here to behavior |
| 00:13:20 | 00:13:23 | and then behavior flow we can see the |
| 00:13:22 | 00:13:25 | different ways that people are |
| 00:13:23 | 00:13:27 | interacting and flowing through the |
| 00:13:25 | 00:13:28 | website and I really like to look at |
| 00:13:27 | 00:13:30 | this from specifically from a mobile |
| 00:13:28 | 00:13:31 | point of view because I like to see how |
| 00:13:30 | 00:13:33 | people are navigating through the |
| 00:13:31 | 00:13:35 | website and this should be informing |
| 00:13:33 | 00:13:36 | your website's architecture your |
| 00:13:35 | 00:13:38 | navigation structure and how you're |
| 00:13:36 | 00:13:39 | going to design those layouts to help |
| 00:13:38 | 00:13:42 | people find the information that they |
| 00:13:39 | 00:13:44 | need so another cool report is if you |
| 00:13:42 | 00:13:46 | add on the Google Analytiks chrome |
| 00:13:44 | 00:13:48 | plugin and you're logged into your |
| 00:13:46 | 00:13:49 | analytiks account you can click on it |
| 00:13:48 | 00:13:51 | and it will show you how people are |
| 00:13:49 | 00:13:54 | clicking on the front end of that page |
| 00:13:51 | 00:13:55 | so again if we don't have a heat map set |
| 00:13:54 | 00:13:58 | up on a website which a lot of people |
| 00:13:55 | 00:14:00 | don't this will help you understand how |
| 00:13:58 | 00:14:03 | to set up the website had a set of |
| 00:14:00 | 00:14:05 | internal links and again for informing |
| 00:14:03 | 00:14:07 | that overall architecture navigational |
| 00:14:05 | 00:14:08 | structure to help people find what |
| 00:14:07 | 00:14:10 | they're looking for when they're on a |
| 00:14:08 | 00:14:11 | specific page so even just looking at |
| 00:14:10 | 00:14:13 | the home page and seeing how people are |
| 00:14:11 | 00:14:15 | clicking around and what they're looking |
| 00:14:13 | 00:14:17 | for on the home page should help you to |
| 00:14:15 | 00:14:19 | understand what should be on that page |
| 00:14:17 | 00:14:21 | and what people are really looking for |
| 00:14:19 | 00:14:23 | when they come to that page so this gets |
| 00:14:21 | 00:14:24 | into a little bit more surgical with |
| 00:14:23 | 00:14:26 | organic search this is a screenshot from |
| 00:14:24 | 00:14:27 | Google search console let's jump in |
| 00:14:26 | 00:14:29 | there and let me show you a little bit |
| 00:14:27 | 00:14:30 | in here so this is a new version of |
| 00:14:29 | 00:14:32 | search console what I really like to |
| 00:14:30 | 00:14:34 | look at here is I like to dig out things |
| 00:14:32 | 00:14:36 | like branded search so if we come down |
| 00:14:34 | 00:14:38 | here to queries and then we come up here |
| 00:14:36 | 00:14:40 | to new filter go to query queries |
| 00:14:38 | 00:14:42 | containing the brand name so web rus' |
| 00:14:40 | 00:14:45 | and now what I'd like to do is go to |
| 00:14:42 | 00:14:47 | pages and I like to see where people are |
| 00:14:45 | 00:14:49 | coming into the website through branded |
| 00:14:47 | 00:14:50 | search versus unbranded search and I'm |
| 00:14:49 | 00:14:52 | gonna cover more in a second why that's |
| 00:14:50 | 00:14:53 | really important so to drive this home |
| 00:14:52 | 00:14:55 | again through the context of that client |
| 00:14:53 | 00:14:58 | campaign these are some of the things |
| 00:14:55 | 00:15:00 | that we reported to them when we began |
| 00:14:58 | 00:15:01 | the design process so these are some of |
| 00:15:00 | 00:15:03 | the learnings that we dug out from the |
| 00:15:01 | 00:15:05 | exact process that I just showed you so |
| 00:15:03 | 00:15:06 | a little bit over 6% of websites traffic |
| 00:15:05 | 00:15:08 | was female |
| 00:15:06 | 00:15:11 | that trend held true when it came to |
| 00:15:08 | 00:15:14 | conversions as females were much more |
| 00:15:11 | 00:15:16 | likely to convert at 61% to males at 39 |
| 00:15:14 | 00:15:18 | person and almost 60% of that websites |
| 00:15:16 | 00:15:20 | traffic was between the ages of 25 into |
| 00:15:18 | 00:15:22 | 44 so what does this mean it means that |
| 00:15:20 | 00:15:24 | messaging and imagery on the site should |
| 00:15:22 | 00:15:25 | reflects it should reflect this does |
| 00:15:24 | 00:15:28 | that mean that everything should be pink |
| 00:15:25 | 00:15:30 | no absolutely not but it should be taken |
| 00:15:28 | 00:15:32 | into consideration that their target |
| 00:15:30 | 00:15:33 | customer should be female so that |
| 00:15:32 | 00:15:34 | extends not just to the website but also |
| 00:15:33 | 00:15:36 | to market |
| 00:15:34 | 00:15:38 | and again it's really important when it |
| 00:15:36 | 00:15:39 | comes to messaging and also for general |
| 00:15:38 | 00:15:41 | product understanding well as I had |
| 00:15:39 | 00:15:44 | mentioned that mobile made up about 6% |
| 00:15:41 | 00:15:46 | of traffic but about 70% of goal |
| 00:15:44 | 00:15:48 | conversions for them occurred on mobile |
| 00:15:46 | 00:15:49 | so again when we're toking about |
| 00:15:48 | 00:15:51 | optimizing the website for the most |
| 00:15:49 | 00:15:53 | important things which is conversions |
| 00:15:51 | 00:15:55 | clearly people are coming there from |
| 00:15:53 | 00:15:57 | mobile devices first so the design |
| 00:15:55 | 00:15:59 | process should really start there with |
| 00:15:57 | 00:16:00 | layouts in wireframes this is what I |
| 00:15:59 | 00:16:02 | touched on before that there are key |
| 00:16:00 | 00:16:04 | service pages and landing pages had a |
| 00:16:02 | 00:16:06 | high bounce and exits rate from all |
| 00:16:04 | 00:16:07 | traffic sources and since those pages |
| 00:16:06 | 00:16:09 | made up a large majority of their |
| 00:16:07 | 00:16:11 | traffic and represent the largest |
| 00:16:09 | 00:16:13 | decrease in traffic one of the main |
| 00:16:11 | 00:16:14 | goals of the campaign had to be |
| 00:16:13 | 00:16:17 | increasing the stikiness of those pages |
| 00:16:14 | 00:16:19 | and that can be done from anything from |
| 00:16:17 | 00:16:21 | design to copy to just adding more |
| 00:16:19 | 00:16:22 | content in context to those pages we |
| 00:16:21 | 00:16:25 | found that their top level navigation |
| 00:16:22 | 00:16:27 | through click behavior did not support |
| 00:16:25 | 00:16:29 | the customer journey only highlighted |
| 00:16:27 | 00:16:31 | the two loan options that's sends a |
| 00:16:29 | 00:16:32 | signal to search engines and to users |
| 00:16:31 | 00:16:34 | that the other pages are not as |
| 00:16:32 | 00:16:35 | important as they were only listed out |
| 00:16:34 | 00:16:36 | and the footer which I'm going to show |
| 00:16:35 | 00:16:37 | you in a second and the recommendation |
| 00:16:36 | 00:16:39 | there was to move the experience to a |
| 00:16:37 | 00:16:41 | megamum and really importantly - we |
| 00:16:39 | 00:16:43 | needed to rethink the customer journey |
| 00:16:41 | 00:16:45 | by traffic source and page and content |
| 00:16:43 | 00:16:47 | type I looted this in a previous report |
| 00:16:45 | 00:16:49 | there and we needed to build out |
| 00:16:47 | 00:16:51 | customer persona Jenners to help |
| 00:16:49 | 00:16:53 | illustrate this so here they are these |
| 00:16:51 | 00:16:55 | are some sample personas that we did and |
| 00:16:53 | 00:16:57 | again this all came from the data in |
| 00:16:55 | 00:17:00 | some light competitive research but just |
| 00:16:57 | 00:17:02 | putting together buyer journeys based on |
| 00:17:00 | 00:17:03 | the data that we had collected for how |
| 00:17:02 | 00:17:05 | they could and should be passing through |
| 00:17:03 | 00:17:06 | the website leading to the goals that we |
| 00:17:05 | 00:17:08 | wanted so we usually - put together |
| 00:17:06 | 00:17:09 | three to four of these depending on the |
| 00:17:08 | 00:17:12 | size of the climb the size of the |
| 00:17:09 | 00:17:14 | website nothing overly complicated here |
| 00:17:12 | 00:17:16 | again just based on the date that we |
| 00:17:14 | 00:17:18 | discovered we also always put together a |
| 00:17:16 | 00:17:21 | site map and site architecture based on |
| 00:17:18 | 00:17:22 | the data again navigational elements are |
| 00:17:21 | 00:17:24 | really important when we're getting |
| 00:17:22 | 00:17:26 | started with website it really helps |
| 00:17:24 | 00:17:28 | inform the entire design process and |
| 00:17:26 | 00:17:29 | really the scope as well so this is what |
| 00:17:28 | 00:17:31 | I alluded to in regards to building out |
| 00:17:29 | 00:17:33 | a mega-money this was their current |
| 00:17:31 | 00:17:36 | navigational structure as I said they |
| 00:17:33 | 00:17:38 | only had a few top-level links to these |
| 00:17:36 | 00:17:39 | key landing pages and everything else |
| 00:17:38 | 00:17:41 | was linked to in the footer which you |
| 00:17:39 | 00:17:42 | can see here in the top right so what we |
| 00:17:41 | 00:17:45 | did is we put together a few options for |
| 00:17:42 | 00:17:47 | them with this mega menu drop-down to |
| 00:17:45 | 00:17:48 | highlight all the different loans |
| 00:17:47 | 00:17:49 | is that they had and really pushed the |
| 00:17:48 | 00:17:51 | importance back to the top level |
| 00:17:49 | 00:17:53 | navigation and to get people visiting |
| 00:17:51 | 00:17:55 | these pages and of course we always do |
| 00:17:53 | 00:17:57 | an alternate version of everything that |
| 00:17:55 | 00:18:00 | we design as well so SEO considerations |
| 00:17:57 | 00:18:02 | for us are everything especially as a |
| 00:18:00 | 00:18:04 | tiknical SEO agency I mean the main |
| 00:18:02 | 00:18:06 | reason why we do so many websites is |
| 00:18:04 | 00:18:08 | because people need our SEO expertise |
| 00:18:06 | 00:18:10 | and they really do go hand-in-hand and |
| 00:18:08 | 00:18:11 | inform each other as I'd said their key |
| 00:18:10 | 00:18:13 | landing pages were trending downward |
| 00:18:11 | 00:18:15 | from organic search and this is in their |
| 00:18:13 | 00:18:17 | industry is detrimental to the business |
| 00:18:15 | 00:18:18 | model and again one of the things that |
| 00:18:17 | 00:18:20 | we really found was that their landing |
| 00:18:18 | 00:18:22 | pages were too thin and what we did is |
| 00:18:20 | 00:18:23 | we went to answer the public and we |
| 00:18:22 | 00:18:27 | decided to build out these really uh |
| 00:18:23 | 00:18:29 | basically FAQ trees and push that into |
| 00:18:27 | 00:18:31 | the websites design so you can see here |
| 00:18:29 | 00:18:33 | how we took these questions and started |
| 00:18:31 | 00:18:35 | building out FAQ templates this is just |
| 00:18:33 | 00:18:38 | kind of standard copy here but these |
| 00:18:35 | 00:18:39 | would all be personalized based on the |
| 00:18:38 | 00:18:42 | type of loan that people were looking |
| 00:18:39 | 00:18:44 | for and as mentioned to just building |
| 00:18:42 | 00:18:46 | out more content in context on these |
| 00:18:44 | 00:18:48 | landing pages really pushing some nice |
| 00:18:46 | 00:18:50 | little iconography that shows people how |
| 00:18:48 | 00:18:53 | these loans work in very simple |
| 00:18:50 | 00:18:54 | illustration terms and of course product |
| 00:18:53 | 00:18:56 | understanding and reviews and |
| 00:18:54 | 00:18:59 | testimonials always help especially in |
| 00:18:56 | 00:19:01 | an industry like this so that's all I |
| 00:18:59 | 00:19:02 | have for this presentation again using |
| 00:19:01 | 00:19:04 | your data to inform your website's |
| 00:19:02 | 00:19:06 | design is incredibly important if you |
| 00:19:04 | 00:19:07 | guys have any questions please leave |
| 00:19:06 | 00:19:09 | them in the comments if not you can |
| 00:19:07 | 00:19:11 | visit us at FTF dot agency and we can |
| 00:19:09 | 00:19:13 | chat about your website needs and your |
| 00:19:11 | 00:19:15 | next project if not hit that subscribe |
| 00:19:13 | 00:19:17 | button I'll see you guys in the next |
| 00:19:15 | 00:19:17 | video |
