How can UX design affect your SEO?

The third Optimisey event was opened by UX Designers Nick Duffield and Kamil Kuczynski.

Watch the second talk: Craig Campbell on White Hat vs. Black Hat SEO

UX (user experience) and SEO (search engine optimisation) have, in recent years, become more and more closely linked.

Nick and Kamil have seen this first-hand and they shared their experiences, insights, tools and tips in their talk:

Don’t miss the next one

If you enjoyed that taster of what goes on at the Optimisey events make sure you don’t miss out on the next one! Get a (free!) seat at the next event:

Reserve Your Place

Video transcript

So welcome to our talk: How can UX effect your SEO? I’m Nick Duffield I’m a user experience designer for a company called eLife Sciences in Cambridge.

My path to UX is a very typical one: I started off as a graphic designer first of all, made my way into web design and then transitioned into UX design.

Some of the companies I work for: people like Microsoft Research in Cambridge I developed websites and mobile applications for that company for their research groups and both in marketing departments.

Right now I work creating tools for scientists to help them communicate their work. So today’s talk we’re going to tell you about an SEO project that both Kamil and I worked on, in particular the types of things that we learned doing this type of work and the insights that we gained.

I think an interesting thing about the project is that we changed our own ideas about SEO – we found that our own discipline of UX design played a bigger part in this stuff than we initially thought. I think a good place to start is for Kamil to give you his perspective on what UX design is.

Good evening ladies and gentlemen my name is Kamil.

I’m an experience designer at Cambridge English. I work on digital tools for… I help to build digital tools for learners and teachers and my background same like Nick’s – is in graphic design I’ve been doing this for over a decade now working on both printed and digital media and how I transitioned to experience design – or maybe the better question is why I transitioned to experience design – it’s because of situation I’m about to tell you.

So one day up I was given a brief for design a poster and it was pretty simple. Create an artwork for the event, include information of what it is, when it is, where it’s going to be held, simple job. I quickly completed the job and hand it over for approval.

And three days later eventually I managed to get some feedback from the stakeholders and first thing they asked me: to make logo bigger – it’s like because the logo cannot be big enough. And then they say ‘Can you move the headline a little bit to the top? And the support things a little bit to the left?’

And I’m thinking to myself ‘What difference is it gonna make? Why are you doing this?’ like and it’s pretty much same story throughout my career there’s always seem to be a person who was a specialist and better how to design and they knew how to do it better than me.

And it always made me think ‘Why did I do it? How can I prove that my work and what I do works?’ and so I started researching on internet how to prove to brahow to communicate my designs better how to how to create designs that work and more and more often I started coming across user experience design.

So I started learning and reading about it got into it and pretty much that’s how I got my transition to experience design.

What is experience design?

What is experience design? So it’s a design process. It’s a process where all the decisions are based around user needs and their behaviors.

And today we’re going to focus on mainly three elements because there’s plenty of stuff that’s included in experience design but today we’re going to focus on three elements that I think may have the biggest impact on your SEO ranking.

So it’s interaction design – oh I should have done it earlier – interaction design, information architecture and UI design commonly known as user interface design.

And some of the tools I use on a daily basis to achieve a greater information architecture or great visual designs: stuff like user research, user surveys, interviews, card sorting exercises or competitive analysis.

And one great tool – one more tool that I tend to use – there’s more internal stuff if before you go outside is workshop, design workshops.

This is trying to invite people from not only your own department where you work we’re trying to get people from other departments and brainstorm some ideas.

By having people who who are not familiar with the product that you are working on you kind of get a different perspective. And you can see how others understand product you’re working on and it’s quite helpful. And how the UX and SEO are connected how the two work together?

I’ll let Nick to share his insights and findings.

Where UX and SEO meet

[Nick] So an idea for a project: SEO and UX. I’d been doing a lot of training and stuff like that and trying to figure out how to turn research insights gathered through tools like Google Analytics and feed that into my design process.

I mentioned to Kamil that I was interested in this type of stuff and he suggested that I look at a course called the Digital Garage by Google.

So I don’t know whether you’re familiar with this course? But it’s, it’s very basic and it’s aimed at very small businesses to increase their presence on the Internet.

While working through the course a few things stood out to me: firstly the course recommended creating and crafting content in a meaningful way for site visitors. UX would call this information design or information architecture.

I think – and I’ll just mention something about that to you – it also recommended speaking to your customers and understanding how they describe your content and speaking to them so that when you do write and create this content you do it in a more meaningful way to them. It’s just typical user research there – we do it all of the time and we use that to inform our design process.

On top of that it recommends optimising your site and that’s, what they mean by that, is making it work in an expected way for users.

And you know like it when you make your journey through a website, clicking links and hitting buttons and all of that stuff that’s just typical interaction design. It’s just textbook UX.

A failing online business

So when we were getting started on the project we needed a guinea pig.

And what we wanted to do was speak to a local business and see if they would let us use their site to figure all of their stuff out and try new skills. My hope was – we were going to improve their site.

Getting started we had a few questions. We knew the store that we that we were looking for would have would need to poor indexing.

If it did we needed to know why that would be. If users found these sorts of pages we’d need to know how they use them. If competitors were doing better with their indexing than them we need to figure out what that would be.

So with all of these questions we had a basic outline for our project.

We went and proposed this to a friend of mine who had a failing business. He had good footfall but the actual website that he had wasn’t performing very well.

To kick the project off we divided all of this work into interests for both myself and Kamil. He carried out certain parts of the project.

Things like analysing Google Analytics I was interested in, in the Google Search Console to figure out why this guy’s site was indexed so badly or their ranking was poor.

And we proposed all this stuff to the guy and then he was interested.

And we said look here’s the deal: we’re going to learn stuff by performing all of these things on your site and as a trade what we will do will write a report up and share this with you and you can do what you want with it.

You can give that to a developer if you want to make those changes that’s great and that’s that’s pretty much the trade we made.

I think it’s probably a good time for Kamil to tell you about the types of work that he was engaged in while doing that stuff.

The Golden Nugget: 90% drop out rate at checkout

[Kamil] So we kicked off with looking at – they gave us access to their analytics dashboard – and we kicked off by just having a general overview of how their website performs.

So we compared the data from 2015 and 2016 and the things we wanted to search for was potential problems; look at the flows we wanted to learn how many visits they get, how often the visits happen and the conversion – the basic conversion rate.

And the key findings from just looking at analytics we learned that the visits to online store and the physical store were pretty much – there was no surprises there – it pretty much matched so there was highs in January and December for for the sale period, then slight dip, slight increase in sales again over the summer period because this is an extreme sports shop – so kind of a muchness there was no surprises.

We had a look at demographics and from demographics we learned that most of the visits were quite local, which again although sad it wasn’t anything that would surprise us because we knew that they ranked quite poorly so we didn’t expect the website to reach distant customers.

But the big stat, the big discovery, it was like a golden nugget – at least for us – they had a 90% dropout rate at the checkout.

That’s one out of 10 people completing a purchase.

Obviously it was horrible news for the owner but great news for us. For us it was another piece of research we could do – prepare some hopefully works, work on some fixes and improve it.

So we got that all this insight, presented it to Nick’s friend, and we told him what work we’d like to do next. And he agreed for us to carry on with the project.

setting a goal

And the first thing we did – with help of the guys in the store – we organised a day of in-store usability studies.

So we got the script ready, because it’s useful to run studies by a script, we divided our roles. Nick was the interviewer, I was observer and note-taker. And we set up a goal.

And the goal on that day was to learn why people are dropping at the checkout.

And on top of it we thought, by observing, we can learn how people are using the website in general.

We managed to get eight or nine subjects – I mean subjects – people actually who came to the store and we asked them to purchase a product using the website.

Whether they’d wanted to use their mobile device – or we had the tablet available and computer – asked them to search for the product they came to buy and complete the purchase using the online store.

And the insights we got from this: we learned why there was a dropout rate: because people couldn’t – first – they couldn’t find the checkout button.

Second thing, once they found it, they couldn’t identify the pay button because it didn’t look like a button.

Another thing we learned, as an extra, it took quite a long time and a significant amount of pages for for people to scroll through to get to the desired item.

And there was a small problem with the oversized cookie message – so it is pretty much would fill the whole screen on a mobile device.

So we knew what’s wrong: then we had to fix it.

Wireframes and card sorting

So we again split the duties. Nick was going to go and create a set of wireframes to present a new checkout procedure, a new button how it would look. And what I wanted to do is to work on the information architecture of the website, that I was hoping, is going to reduce the search time of the items.

And in ideal world, where you have budget, stuff like that would be probably best to do with a group of 20 people in a room like this and and do something we call card sorting exercise.

But as our project was more for us to learn, it was pro bono, we didn’t have no budget. Our budget was zero. We had to be quite creative on it.

So I thought as the saying goes: ‘Good designers copy, great designers steal’ and I’m a great designer – I’d like to think – so [Nick: One of the best!] yeah!

[tweetshare tweet=”But in a design world, or in the UX world we don’t call it stealing. We call it ‘recycling of well understood patterns’ yeah? #Optimisey” username=”_ku_design”]

So the best way to do it on the cheap, as in for free, I took top ranking for competitive websites, scan the the website, check how they group the items, how how they structure their information, mapped it out and look for overlapping patterns. And based on the findings I designed a brand new architecture for the shop we’re working for.

And because, in a situation like that, there’s no sense reinventing the wheel. Those guys ranking on the top, which means: their customers like it, it works for them, it’s gonna work for us.

And I’m gonna let Nick now speak about the whole journey of wireframes and Search Console.

Insights from Google Search Console

[Nick] Okay so for my part, the Search Console, it threw up a couple of recommendations. Stuff that needed fixing.

So that what happened is the staff, when they create new pages, have been doing a typical ‘Save as’ type of thing and what they hadn’t been doing was changing the page titles, things like the meta descriptions and the keywords they were associated with these pages.

So 65 pages had duplicate page titles, 822 – I don’t know how they managed to get that number – had duplicate meta descriptions and there were just like an abundance of duplicated keywords there. It just it resulted in completely inaccurate page information for search results.

Google called this out, I made a report for these guys and tried to write content in a structured way so they could use it.

Because, don’t forget, these guys are just regular shop owners. They don’t know anything about design, they don’t understand programming or any of that stuff they don’t really know anything about websites.

So what they needed was a structure that they could follow and work with when they were creating their content.

Simple process, simple fix

So my proposed fix was this: for each page title, to start that off with the brand of the item, the name of the item and then separate that with a hyphen and then describe the item in some way. There could be a detail of some sort, in this instance that was the color, and then to reference the title at the very end with the actual store name.

So the neat thing is about this it gave them a very, very simple structure to follow and they could just roll these things out as they needed to which cut down on all this duplication that they were seeing.

Hopefully that would, they would result in better indexing, better ranking hopefully and it should fix their problem.

And then you know my advice was to do this for a couple of sections of your website and see how this goes and if you start to see in an improvement in your in your indexing and ranking and stuff like that then you know you’re doing something right and you can continue this out through the rest of the site.

Another thing that I had to help with was this checkout experience issue that these guys had had.

So what was going on there is that um they had key call to actions just buried in side-bar navigation so it was just like a regular old link but it was the most important thing on a page.

What we found customers were doing is that they knew how to add items to their shopping cart but they just couldn’t get to the checkout because this thing was just a minor link like in their peripheral vision.

And so a fix for that was a set of wireframes – I mean they don’t look like anything special we didn’t have time or budget to do any any huge visual design improvements.

I don’t think they’d have accepted that sort of stuff even if we did because they had their way of thinking about their website – what I suggested was instead of turning this this little button here, which is just a piece of text, leaving it like that and then that sort of like highlighting or underlining in a very simple way – make that a huge great button so when something gets added to a cart this thing then lights up and we get some sort of ribbon strip that gets tacked to the bottom of the browser window showing that you’ve added an item to your cart.

There’s a secondary button there so if you miss that one you’re going to be able to see that and through that you’ll be able to navigate your way to the checkout  and then pick your gateway of choice and then follow that through to make your payment.

20% increase in sales conversions

By proposing this fix we saw over the following month like a twenty percent increase in sales conversions which was a massive win for those guys. So all of this work we completed there we handed our report to the shop, we got the developer to do some of this work in our report.

What we did we prioritised the stuff that they needed to do in order as fixes to their website. We said we know you don’t have time and money and experience and all of this stuff, so do what you can right? Just doing one thing off this list is going to help you. That was one of those things I think, currently they’re still working on improving their site.

Time, money, budget, people all of that stuff so you know over the next year hopefully though they will get their site in order. I think a key thing for them is better indexing.

[tweetshare tweet=”What I did explain to them: the being found is only part of the user’s journey. #Optimisey” username=”nick_duffield”]

Once they get to your site they need to be able to know how to use it. The content needs to make sense and it needs to work in a way that they expect it to. They can make purchases or do the things that they want to do, if it’s a blog they might want to read content and then find other bits of content that’s of interest to them.

So however you piece your site together it should make sense and the best way to do that sort of thing is to ask your customers what they want, understand the way that they think about your site, and then optimise your site accordingly.

So I think a good thing to do now I’ll hand you back to Kamil he can give you some wrap-up there so thanks a lot.

We are all UX Designers inside

[Kamil] So I think all of us it’s safe to say that although my job title is Experience Designer some of you are marketers, SEOs I think it’s safe to save that, deep inside, all of us are user experience designers.

Although our disciplines are slightly different we have the same goal.

The goal is to provide our customers, and people who use our products, with the best possible experience they we can get – with, we want to leave them with a smile on their face and we’re hoping that they’re gonna keep coming back to our – buy our product for more and more.

And all the stuff we describe and the research, although it sounds like it’s time-consuming and an expensive thing to do it’s not really. As I told you like you can do stuff like information architecture, you can do almost for free.

And there’s plenty of other resources available on the web and on the internet that can help you, other tools that can help you understand your users better.

And as long as all the decisions you guys make are based around user behavior and their needs, you should have plenty of successes.

And all it takes is to start a conversation with your customers.

And from my experience people are normally quite happy to talk – especially if there’s a problem – that they will tell you how to fix it. You don’t even have to think of it because sometimes they’ve already come up with the solution.

And I said as long as all the decisions are made around their needs you should be fine.

And one thing I think both of us would like you guys to take away from today’s talk:

[tweetshare tweet=”Optimise for your audience – not the search engines. #Optimisey” username=”_ku_design”]

Thank you very much – thank you for listening.

[applause]

Experience it live

Informative and packed with actionable advice. That’s the Optimisey events.

It was even better live – with the opportunity to ask the speakers questions in the Q&A which followed and mull over all that was covered with lots of terrific people.

You can get a free seat at the next event:

Reserve Your Place