User experience (UX) is a design process focused on your users. As we are talking about websites, your users are the people who visit and engage with your website; Buy your products, search your site and read your blog posts. Think of UX as the why behind your website's design.
When making a website, you start with the UX, discovering who your users are, what their problem is and how you will help them.
Table of contents
- Is UX design the same as web design?
- How you can start thinking about UX today
- Collecting data
- Identifying your website's users
- Review your information Architecture (IA) – Your site's navigation and structure
- Open card sorting
- Creating website wireframes
Is UX design the same as web design?
Web design commonly refers to user interface (UI) design, which is the visual design of a website: Colours, typography, branding and style. UX is the logic behind that, the rationale for your website's menu, your layout and the intended journey users will follow through your pages to a desired outcome, like submitting an enquiry or buying something.
Airbnb attributes UX for taking them from being a near-failure to being valued at $10 million
Source – First Round Review
When diving into making your own website using a no-code solution, whether that's something like Squarespace, a customisable WordPress theme you've installed or a page builder like Divi or Elementor, you will probably be very focused on the UI design. The look and feel, which these services all help you with by providing widgets to drag and drop, colours, fonts and options to customise.
There are countless blog posts and guides about choosing the right brand colours and fonts. But I'm here to tell you that none of that will matter if you overlook the UX of your website. If your customer can't find their way to your product, no amount of perfectly on-brand stock imagery is going to convince them to continue clicking aimlessly, when they could hop over to a competitor and buy it there.
If your users don't notice your call to actions, they're going to bounce off and sadly the colour palette you painstakingly selected after hours of consulting Pinterest isn't going to be enough to get them to hang around.
88% of users are less likely to return to a site after a bad experience
Source - Toptal
Think of it like this: You find the perfect bag for you, it's your favourite colour and style. You can't wait to wear it so put it on straight away, but everything you put in it falls out, as there's no bottom to it. This bag couldn't look better in your eyes, but are you going to wear it, given it isn't fit for purpose? Style over substance will never win trust, conversions or subscriptions.
How you can start thinking about UX today
UX design is a specialist skill and I'm only scratching the surface of introducing it in this post. In an ideal world, the UX design of your site and the subsequent UI designs and coded site created from them would be made bespoke, but I am aware that the cost and time of getting that done can make it impossible for smaller new businesses and creative projects; However that doesn't mean that you can't still consider and improve your site's usability yourself.
Without full control over your website there will be some limitations to the changes you can make but I have outlined below some actionable small –but important!– ways you can begin improving your site's UX, no matter how it has been made.
UX is a major ranking factor for Google, so overlooking it will not only impact your user's experience on your site, but potentially your search ranking too.
Collect as much data as you possibly can. Setup and install Google Analytics to begin tracking data about your website traffic, in addition to accessing whatever inbuilt stats your platform of choice provides. Ensure you have a business profile on the social sites you use so you can access the statistics they offer too.
Consider running a paid ad campaign with social sites and Google Adwords, even if paid advertising isn't part of your initial strategy this can give you invaluable additional data.
Identifying your website's users
It's crucial that you know who is using your website. What country are they browsing from? How old are they? What hobbies and interests do they have? What do they do for a living? What device are they using? How much time do they spend online? What other sites and apps do they use frequently? You get the idea.
If you have a community of regular readers or customers, you could consider running a survey to find out more about how they use your site.
Knowing who your users are will help with every change you make to your website. For example if you view your site on desktop most of the time, but the majority of your traffic comes from mobile devices and tablets, you might want to check your site out that way yourself so you can pick up any issues. And it would make sense to make future changes 'mobile first', considering the mobile experience first and then optimising for desktop.
The more information you have about your users the more you can tailor the experience you deliver to their specific needs.
61.5% of users leave websites with a poor navigation
Source – GoodFirms
Review your information Architecture (IA) – Your site's navigation and structure
Your website's navigation (menu / nav) is so important. WordPress and many other content management systems will add new pages to the navigation, unless you opt to manually select which pages are listed. You really do not want to do that and have a navigation which is simply a meaningless list of links.
Think about the different types of users who use your site, what are they trying to do? How can you ensure they can get to where they need to go, as quickly and as easily as possible?
Open card sorting
One method UX designers use when looking at IA is an open card sort. I love this exercise and do it both when working alone on my own small projects and on client projects with multiple stakeholders. It's a really nice way to think about how your content is related and how best to categorise it so it makes sense. Open card sorting can also help you better name your categories / pages and decide what to put where.
You can either work with Post-it Notes or using software, I like to do the latter as it's less wasteful. I use Miro which you can use for free to do a digital card sort. FYI – it's really handy for brain storming and planning too.
Set a timer for however long you want –say 10 minutes– and start by adding each page, category and section of your site as a new Post-it Note.
Once you have all of your site's content represented on the Post-it Notes, set another timer and begin grouping related ones together. You should end up with several piles of Post-it Notes which will represent different parts of your site.
The next exercise is to name these sections in a way which describes the content. Eg. 'about me', 'about my blog' and 'my story' might be labelled 'About'. 'Rates', 'Our process', 'Portfolio' and 'Testimonials' might come under 'Work with us'. Once you have your new sections, you can begin prioritising them to create your new navigation.
Creating website wireframes
A key deliverable of the UX design process would be a set of wireframes. Wireframes are like a blueprint for your website. They outline all the functionality and content, but don't touch on the visual design. Designing a site as wireframes first allows the designer to focus entirely on the user's journey through the site and spot any dead ends and issues. Without the distraction of colours, fonts and branding, which all come later.
Wireframes are made using design software but often start out as a simple sketch. I like to use dot grid paper for sketching wireframes as it's easier than drawing freehand.
Before jumping into Canva or the editor of your website builder, try sketching out your page, on paper first. Consider who your users are and how they will be using the site. If most of your traffic comes from mobile devices, sketch out the mobile view first. Think about the purpose of that page and how easily your users can carry out their tasks there. How easily can they navigate to that page? Are your call to actions clear? Is anything going to interrupt their task?
You will be surprised at the clarify this simple step can bring. Whilst a full set of wireframes or a prototype for your website may not be needed (for example if you are using a premade theme with a set layout), it is still a good idea to carefully consider any changes you want to make to your website in this way. Just as you might scribble down the outline of a blog post in your Notes app or in a notebook.
Edit your website with intent
As you work on your website, focus on your users and ask yourself what you're hoping to achieve and who you are doing it for. You will hopefully find that by working on your website with more intent, you make better changes which are based on your user's needs.
Keep an eye on your analytics and the other user data you are collecting, to see how these changes affect your traffic and user's behaviour.