Skip To Content
Close-up of man designer hand holding a pencil sketching a web development of a smartphone | UX/UI with Web Design

UX/UI & Website Design: How To Create a Better User Experience

Jailyn Glass, marketing manager at Perfect Afternoon
Jailyn Glass

The Value of UX/UI with Website Design: Podcast Conversation

Website design is essential when considering a new or rebuilt website, but within that process, you should also consider the user’s experience with UX/UI testing. User Experience (UX) is essentially how a user interacts with anything online, the ease of doing so, and enjoyment from the website features, while User Interface (UI) is any digital layout intended for users to interact with – think dashboards, apps, and websites.

In this episode, Dwight talks with our Chief Operating Officer, Tyler Fraser, about how UX/UI with website design is critical in our process and why the data from testing allows you to design a better user experience. Interested in learning more about user testing and how to improve your website’s UX/UI experience? Contact us online or call us at 248.582.9210 to get started.

It’s driven by data, and I think that that’s the theme here, is, even if the designer does not have any experience with actually designing for UX, if they at least are going down the road of evaluating data that is gathered.

Read the full transcript from Episode 36: UX/UI with Website Design below.

Dwight:
As promised, hold me to it, swearing over my kids’ lives, we’re going to do podcasts. We’re going to definitely do them on a regular basis. And we got our old creative director on the line. He’s out in the Yukon territory, but he went ahead and built a big fire today and decided to have a conversation about UX and UI, Tyler Fraser. And you need to say hi. This is the point where you actually interact with us.

Tyler:
Hello. Hello. I am here. I am surviving the Yukon territory at the moment, but we’ll see how long that lasts.

Dwight:
And he’s got some big anticipation for a couple big life events that are coming up, but I’m not going to mention anything about those. But I welcome and thank him for taking the time, because this is something that is brought up topically a lot of times. Well, actually, the topic is not broached as much, but we want to talk the importance of really your user interface and the user experience on your website. Because people come to us, they want a website redesigned, they want it to look a specific way, and they’re not always motivated by the right directions or the right data, and that’s super important.

And so, if you are thinking about getting a redesign, if you’re thinking about putting together a new website, whatever those things are going to be considered right now, you’ve obviously looked at competitor sites, you’ve found some other sites in and out of your verticals that you like for different reasons, this is an important one for you to listen to. 15, 20 minutes here talking about UX, UI. Tyler has over 15 years experience really, specifically in the creative aspects of things. And why don’t you tell us why you’re qualified, or why don’t you sell yourself here?

Tyler:
Sure. I’ve seen just about every type of interface on the web, both good and bad, since the I first started coding and putting things together. Got a professional background in design. I’ve seen it all. And I’ve also seen what works and doesn’t work. And I’ve also seen plenty of situations where people don’t appreciate the need for a focus on user experience. So, I’ve definitely seen it from beginning to end, and I want to educate more people about the need for data.

Dwight:
You could parallel this, if we simplify it for you. If you’re getting a new roof or getting new windows, that technician speaking to you in a genuine manner, not trying to do the hard sell to you, this is not what we’re trying to do, but really educate you about the $1,000 windows versus the $3,500 windows. What is going to be the longevity? What is the benefit it’s actually bringing to you? Or is it some awesome trademarked, superficial names that were put onto this, argon inserted, whatever it is, but why this is important. And let’s define exactly your user interface between… Well, UX and UI, explain what the two differences are and why they matter.

Tyler:
Sure. User interface is more so what you actually output, what the site, or layout, or app, or whatever it is actually looks like. But the user experience portion is the actual gauge of how the user is going to be interacting with whatever that interface is. So, it’s a little bit more of a practice than an actual product, but you’re really just evaluating how someone is going to effectively experience your interface.

Dwight:
It’s a great point. So, traffic comes to your website, and they land on the homepage and you want them to do things. And you and your team, whoever it is, and your agency is coming together to determine what it is that’s going to make things happy. Now, your agency, or whoever that developer is, or whoever you’re working with is going to be motivated by a couple different aspects. Obviously, we want a great goal. We want a happy client. We want them to be very proud of what gets built and put out there to the world. And we want their clients to interface with it in a positive manner. You want them to pick up the phone and call you. You want them to figure out a lead form. You want them to buy something. Those are all great. But it’s really important, as we’re going to get into, is how people are navigating and running through your website and interacting with it. And we talk about user groups. So, users rule, and not every user is going to be the same. Elaborate a little bit on that to your background in that, Tyler.

Tyler:
Sure. Everyone has got an opinion. Typically, if you’re going in to evaluate how something should look, or the experience, there’s a lot of opinions by the ownership or by people involved. But ultimately, especially since we’re talking about web, but really any kind of retail environment, it is about the user, or the customer, or the client, whatever you call them, and how their experience is, because ultimately. They’re the ones that are be, ideally, converting, whatever that means for you. So, you want to make sure that they are doing what they’re supposed to do in order to achieve the goals that you have set out. And also, not every user is the same. I can’t gather a bunch of data or make an evaluation on how something will perform based on what someone else did or what I did a year ago. It is the user right now and it could be a diverse group of users.

Dwight:
How do you get some of that data? How do you end up determining who your users are? I guess, we know about analytics, and analytics breaks down every facet of everything that’s happening on your website. And some of it is very, very complicated and hard to understand. But going through that, you could look at, users could be people that are coming from an iPhone versus an Android, or a desktop or a tablet. It could be a region of the world. It could be a language that they’re actually interfacing or coming into. It also can be interaction that’s happening. Not everybody lands on the homepage of your website. Some people land in on internal pages and interact from there. You’ll see popularity of things like that. So, are all designers trained and know about user experience and how that takes into performance of a said web property?

Tyler:
No, and that’s the trouble. That’s the trouble. They may have some loose experience, they make some subconscious decision on something they figured out before, but in most cases, designers don’t look at that, from my experience. And again, it depends on the designer, but there’s a different type of approach that a designer needs to take to a design. There’s just not that formal education. There really isn’t.

Dwight:
And you bring up another point too as you get into… Well, I want to talk a little about user testing and experience that we have in regards to doing that and the benefits that can get out of driving a design. But then we’re bringing in another acronym here, an abbreviation, CRO, which isn’t some awesome heavy metal band plane at Harpos down here in Detroit, but it’s actually conversion rate optimization. And so, how do you get better conversion, better performing landing pages or conversion rates, and how do you optimize that experience? And that’s a whole ‘nother layer to the onion as you peel back. So, let’s talk about some different things about decisions you need to make, or designers should be taking, or the design team should be taking in regards to the new site.

Tyler:
It’s driven by data, and I think that that’s the theme here, is, even if the designer does not have any experience with actually designing for UX, if they at least are going down the road of evaluating data that is gathered. And when we say data, we’re talking about…

Dwight:
Talk about these data points.

Tyler:
Yeah. You were talking about analytics before because you can really understand and learn about activity funnels, the way that people are visiting and interacting with your site, but also, plenty of other tactics. There is some anonymous screen recording software where you can anonymously, even though nothing is really anonymous anymore, record a user’s behavior while navigating your website.

Dwight:
What does that look like?

Tyler:
You can actually watch a video afterwards.

Dwight:
I love that.

Tyler:
You can actually watch a video afterwards.

Dwight:
Yeah, I love that.

Tyler:
It’s pretty cool. It’s pretty cool.

Dwight:
Yeah. So, there’s-

Tyler:
Same thing with heat maps.

Dwight:
Yeah, for heat maps.

Tyler:
Heat maps are very much the same.

Dwight:
Those are two products we’ve used in the past. We were a early adopter with a data package called Hotjar. We left them, because they just got two greedy and too snooty and overpriced. And now we’re with Crazy Egg. And so, like Tyler is saying, you can record all the users walking across your website and actually watch them. You can play back afterwards, almost like a DVR, how people are interacting with different pages on your website, where they go, where they move their mouse, how quick they scroll, where they click. And then, they cumulatively collect all that data and then they lay over heat maps on different pages of your website to see where people are moving their mouse and when they’re potentially looking. A lot of awesome data that can help to drive whether or not the decisions you’ve made or decisions you need to make to have better conversion rate or get people closer to that goal.

So, you talk about content placement as well. And I think another layer we have to look at here too is going back to the analytics in the beginning, what are the devices that are using your website the most? How are your consumers, your audience, visiting your website? Is that a mobile device? That’s responsive design, usually in a vertical manner. Is it tablet? Those are probably the less amount of them all. Or is it desktop? And that is based all around your audience. But how are you displaying the data, or how are you displaying content in what order it needs to be driven by what the user expects to see and not what necessarily looks pretty, as we like to say in this industry, in a lot of ways. There can’t be.

Tyler:
But also, I will say, with that, you also need to be driving them down your journey that you want them to take. Maybe it is about what they are going to resonate most with, but ultimately, you have company goals. So, what path do you want to walk them down, and how are they most successfully going to walk that path?

Dwight:
Truth. Truth as it is. So, gathering data, analytics is continuously getting those. You have calls that are coming in. You might have third party call tracking software and recording those. Maybe you’re running ads or any other type of third party segment. You have CRO data platforms that are collecting some of those data points for you too. But that’s the easy part. What are you going to do with it that’s going to make a difference? Walk us through those steps.

Tyler:
And that’s where partnering with someone who has the experience and knowledge and the know-how is important, because you can look at that data and not really understand how to apply it to your situation. Assume that you have a website that you constructed six months, a year ago, whether you personally were involved in it or not, if you don’t have someone that’s looking at that data objectively with your goals in mind, you’re probably not going to be able to be effective with it. So, hiring, or engaging with, or bringing someone around the team that actually has that designer/UX experience will help you map that out appropriately.

Dwight:
Now, some of the things we’ve done in the past as well is doing user testing. And that might be a starting point is, looking at the data, what you have, helping to comb through it, summarize it, giving you points that are easily to consume and take the sea levels to get them to understand the bullet points or the headlines to what the situation currently is. Talk about user testing and what that process looks like, and what type of information that can provide to help give you basis for future decisions.

Tyler:
I love curated user testing. It’s one of the best methods for collecting data. But it is not the only method. And I say that because we were talking about heat maps, we were talking about anonymous screen recording, we were even talking about analytics before, those are all the anonymous side of things, and that’s more of a quantity versus quality situation, because you’re getting a lot more data, but you don’t really know much about the users themselves. You know generally, maybe their region, or maybe what browser they came in on, but you don’t know them.

Whereas this user testing, and it’s curated user testing, and just to explain that a little bit more, it’s really about engaging, for us, it’s engaging with our clients, understanding what they want to garner from the user as far as who they are, what their behaviors are, what they’re looking for, outlining a list of questions or scenarios is what we like to call them, where we can then engage with a focus group, or there’s several services online that will actually give you testers that are within that certain demographic per your requirement, and have them go through in and complete these scenarios. And you’re able to record audio, sometimes record video if they agree to it, and record their screen, and just see how they handle those scenarios. Because now you can really visually understand what they’re doing just like you were sitting right next to them at their computer.

Dwight:
Imagine that you’re coming together with a design with your team at your office, whatever, you need to present to your CMO, or you need to present to higher ups, this is going to be the new design and you’re going to want to present and have quick answers to why we’re going to design something this way, what’s driving all of these reasons. Now that’s another data point to present. Here’s what analytics, traffic to our website has shown us. Here’s industry information of how trends have changed from quarter to quarter in our vertical. And now we have third party user testing, actual people that we’ve summoned, and give them a list of very vague tasks to go through to see how they interact with things in comparison to an old design or an alternative design. And then you have all of this data to make decisions out of. Is that a smarter way to potentially go about it? I think nobody can disagree with that, right? It’s adding a lot more components to it.

Tyler:
I wouldn’t think so.

Dwight:
What does that add to the cost?

Tyler:
Well, if you think about putting together a garbage product and then putting it out there, what’s the difference? You need to plan. Plan before you cut, because you’re going to pay for it later, if you don’t pay for it upfront. In terms of actual cost, it really depends on the size of what you’re putting together and the audience that you’re trying to gather data and cater to. But it’s all relative.

Dwight:
That process needs to be thought about. When you’re serious about really tackling something, your website and the initiatives that you have going on with your website is a segment of your business that is going to help it to grow or slow, or it’s going to cause more problems. It’s essentially, a online brochure that has a lot of functionality, can collect a lot of awesome data that allows people to interact with your business, your mission, your products, your services, all of those aspects, digitally, at their even well with no hard sales push on them. You couldn’t ask for a better scenario. And you can collect all data of everything that’s going on in regards to that, to actually get a good summary of sentiment that’s going on. Why wouldn’t anybody want to take advantage of that and make that a part of their complete marketing schema that they have going on, on an ongoing basis? I don’t know.

Because if you’re just appeasing a design and a look and a feel that the owner, or some CMOs, or some other people want, well, again, it comes down to the point of who has got the check, who has the say-so, what’s the pecking order, and they end up getting what they get. But if you’re looking at ultimate performance of all those things, it seems like you’d want to have as many of these data points to help really show and forecast the return on investment longer term.

And I think the last thing I want to wrap with too here, Tyler, is technology as a whole. Man, everything is still continuously moving so quick and so fast. So, I just want to catch on a couple things of when we’re going through a process doing UX, UI, and possibly user testing, how are we forecasting out the current environment historics, and then how technology or what’s emerging, what’s coming out, and how do we make sure that we can have some type of longevity off of what we’re doing? Encapsulated with that, cost to go ahead and continuously maintain, manage, and modify and grow from that property you’re working on. Is this an pivoting point to make a lot of those decisions now so that you can really look at costs long term in regards to those things?

Tyler:
You have to start someplace. And it’s one of those things that you can’t remain stagnant on, because it’s going to change tomorrow. And we can’t predict where technology is even going to be in week, let alone six months or a year. That’s why this regular collection of data and doing something with it is important. I mean, you should be collecting data nonstop and making decisions on a regular interval and just altering your costs from it-

Dwight:
So, it has to be

Tyler:
… otherwise, you’re going… Yeah, you’re going to remain stagnant. You’re not going to see the results that you would expect, and ultimately, someone is going to look like the failure.

Dwight:
And so, that’s no different than your personal 401(k), your investments, your company’s balance sheet, the P&L, where expenses are being. You’d be looking at those things to forecast out, to guide you what you need to change, what you need to modify in order to get things better. And there’s no reason why you shouldn’t be doing that with your web investment, your creative investment that’s going on there.

And I think the last important part too is of the continuity of all of your brand touchpoints. So, if you have guidelines that are set up. If you don’t, shame on you. Any business should have some type of brand book and should have guidelines on how they’re being represented, and what is the mission statement, what’s being told on a regular basis. All the touchpoints from emails, to what’s going on in your web, to what’s being sent, automated through a CRM or HubSpot. All of those things should have some continuity in how all those work. And those all have data measurement points as well, which is completely interesting that it just keeps going back and through this, what is the word I’m looking for now? Now I’m at a loss for words. It’s infinity, Like an infinity scarf. If you wear infinity scarfs, I guess.

Tyler:
And again, the data collection is the easy part. And truthfully, it’s the cheap part. So, there should not be any barriers to do that on a regular basis. A lot of these softwares or systems that we’re talking about, the actual collection of the data is either free or very inexpensive. Obviously, there’s time that needs to be invested in analyzing it, but again, there’s no excuse for not collecting date.

Dwight:
And you’re going to get the yield out of it, because it’s going to tell you a better story so that you can guide and make changes as things go on and use your money better.

Tyler:
100%.

Dwight:
That’s where we’re going to go with this one here. I want to thank you for taking time out of the day there, Mr. COO, and sharing some of that greasy knowledge.

Tyler:
No problem. Thanks for having me.

Photo Credit: Envato Elements

Join us in brightening your digital future