{"id":11990,"date":"2025-12-04T17:59:56","date_gmt":"2025-12-04T17:59:56","guid":{"rendered":"https:\/\/www.cbwebsitedesign.co.uk\/?p=11990"},"modified":"2025-12-06T17:17:46","modified_gmt":"2025-12-06T17:17:46","slug":"user-centred-design-the-guide-to-ux-and-usability","status":"publish","type":"post","link":"https:\/\/www.cbwebsitedesign.co.uk\/design\/user-centred-design-the-guide-to-ux-and-usability\/","title":{"rendered":"User Centred Design A Guide to UX and Usability"},"content":{"rendered":"\n<p>What makes a good design? This is a very subjective question. Many would say cool animations, fun interactivity or engaging visuals, but by themselves, do these answers help the user with their needs? A better question would be to ask, what makes a good user-centred design?<\/p>\n\n\n\n<p>User Experience and Usability are essential to allow users the best possible results from their journey on a site, understanding your users is more important than understanding the technology behind the website.<\/p>\n\n\n\n<p>In this article, I will summarise some of the key processes and principles for UX and Usability to allow you to gain a stronger understanding of what user-centred design involves, and how it benefits you and your users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-user-centred-design\">What is User-Centred Design?<\/h2>\n\n\n\n<p>User-centred design is an iterative design process that prioritises the needs, wants and behaviours of the user at every stage of design and development. It involves analysis, such as identifying stakeholders, building the context of use by creating user profiles and identifying red routes, and creating the User Experience by developing informational architecture, evaluating usability and repeating the process.<\/p>\n\n\n\n<p>There are 3 main principles to remember when it comes to user-centred design:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users are involved throughout the design and development.<\/li>\n\n\n\n<li>The design is driven and refined by user-centred evaluation.<\/li>\n\n\n\n<li>The design team includes multi-disciplinary skills and perspectives.<\/li>\n<\/ul>\n\n\n\n<p>So what do we need to do to ensure users are considered throughout the process, what steps and tasks need to be taken? Let\u2019s take a look!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-users-in-context\">Users In Context<\/h2>\n\n\n\n<p>A key term to remember when understanding your users is always thinking back to the \u2018Context Of Use\u2019, this is a description of the users tasks, equipment and physical and social environments in which a product or system is used.<\/p>\n\n\n\n<p>Usability depends entirely on the context, you can\u2019t design usable software, technology or websites if you do not understand the context of use, this is because as designers, you don\u2019t:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>See things like your users;<\/li>\n\n\n\n<li>Know what your users know;<\/li>\n\n\n\n<li>Want what your users want, and;<\/li>\n\n\n\n<li>Work how your users work.<\/li>\n<\/ul>\n\n\n\n<p>Finding out what users want seems so simple then right? Just ask them what they want\u2026wrong! Users&#8217; opinion is subjective and it is far too risky to make design decisions based on this, instead, observe your users in their environment. Find out the goals they are trying to achieve and how the users currently handle the task. What people say isn\u2019t as useful as what people do, observing users and interviewing them while they work on their tasks and needs allows you to clearly see the parts they love about the system and the difficulties they come across.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1582\" height=\"823\" src=\"https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps.webp\" alt=\"\" class=\"wp-image-11992\" srcset=\"https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps.webp 1582w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps-300x156.webp 300w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps-1024x533.webp 1024w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps-768x400.webp 768w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps-1536x799.webp 1536w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps-576x300.webp 576w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/User-Experience-Design-Steps-1366x711.webp 1366w\" sizes=\"auto, (max-width: 1582px) 100vw, 1582px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-field-visits-observing-the-user\">Field Visits &#8211; Observing The User<\/h2>\n\n\n\n<p>To observe your users and discover their needs and behaviours, you perform field visits. Field Visits, or Contextual Inquiries as they are often otherwise called, allows you to find the people who really use the system, software or website you are working on, and gain insight into how they achieve their goals in a natural environment.<\/p>\n\n\n\n<p>The context in how people perform tasks reveals information you maybe wouldn\u2019t have thought to ask about. A key thing to remember is that users have a different set of knowledge to you, and may know very little about technology or a subject you are widely familiar with. At the end of the day, the best observations are things you\u2019ve seen or heard &#8211; not your interpretations.<\/p>\n\n\n\n<p>An observation could be anything from a direct quote, a user goal, an action they take, a pain point, or simply anything that surprised you when they attempted to perform their task.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-personas-designing-for-specific-needs\">Creating Personas &#8211; Designing For Specific Needs<\/h2>\n\n\n\n<p>The average user does not exist. Many design projects suffer from trying to design a system or website that fits the needs of every single person under the sun, but this is impossible to do. Instead of trying to please every single person, design for individuals with specific needs. You can do this by creating User Personas.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cI don\u2019t know the key to success, but the key to failure is trying to please everybody.\u201d &#8211; Richard Pryor<\/p>\n<\/blockquote>\n\n\n\n<p>A User Persona is a user archetype or stereotype of a customer, created by analysing and organising your field study data into key takeaways of needs, wants and behaviours. They are not an \u201caverage\u201d or a real user, but rather a cluster of multiple users with specific needs. 2-3 Personas are recommended to ensure you understand the most essential users with the most critical tasks, but how do you decide which persona is primary, secondary or even tertiary?<\/p>\n\n\n\n<p>Simple! Would a solution for Persona A also let Persona B and C achieve their goals? If not, A is not the primary persona.<\/p>\n\n\n\n<p>Would a solution for Persona B also let Persona A and C achieve their goals? If yes, B is the primary persona.<\/p>\n\n\n\n<p>Personas are essential, as they place emphasis on specific users instead of ALL users, and by limiting and focusing choices based on these personas needs and wants, it helps make better design decisions. There are also some considerations with personas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Don\u2019t have too many personas, they are designed to be focused on a range of specific users.<\/li>\n\n\n\n<li>Personas must be based on research, only create assumptions if you plan to test these with real users.<\/li>\n\n\n\n<li>Personas should be formatted as a story around a person.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-red-routes-critical-journeys-for-users\">Red Routes &#8211; Critical Journeys For Users<\/h2>\n\n\n\n<p>If personas are the operating room lights, then knowing who you\u2019re designing for is like switching them on! Red Routes are the surgeon&#8217;s scalpel, they provide insight and understanding. Every application, system or website has a small set of blockbuster tasks that deliver a huge amount of value. Successful development teams focus on improving the usability for their users&#8217; critical tasks.<\/p>\n\n\n\n<p>In Central London there are a series of roads with red lines, which tells drivers that they cannot stop at any time, allowing traffic to smoothly flow through. Your website has red routes too! They are the critical \u201cUser Journeys\u201d with the system. The sheer number of potential users can slow or even halt the design team&#8217;s progress, how can you understand everything everyone wants to do?<\/p>\n\n\n\n<p>Red routes avoid this issue, as you focus on critical scenarios and tasks enacted by the key personas. Make the easy things easy, and the hard things possible!&nbsp;<\/p>\n\n\n\n<p>A good example would be to consider this; what are the red routes for a mobile navigation system such as Google Maps?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Planning a route.<\/li>\n\n\n\n<li>Adding favourites.<\/li>\n\n\n\n<li>Changing the brightness.<\/li>\n\n\n\n<li>Alternative routes.<\/li>\n<\/ul>\n\n\n\n<p>By gaining an understanding of these specific tasks that users need met, you can design a software that focuses on these critical systems, with secondary systems being moved out of the way to reduce \u201cnoise\u201d for the user.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1582\" height=\"648\" src=\"https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example.webp\" alt=\"\" class=\"wp-image-11993\" srcset=\"https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example.webp 1582w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example-300x123.webp 300w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example-1024x419.webp 1024w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example-768x315.webp 768w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example-1536x629.webp 1536w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example-576x236.webp 576w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Red-Routes-Sat-Nav-Example-1366x560.webp 1366w\" sizes=\"auto, (max-width: 1582px) 100vw, 1582px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-usability-testing-creating-prototypes-for-users\">Usability Testing &#8211; Creating Prototypes For Users<\/h2>\n\n\n\n<p>Once red routes have been identified and the user personas are understood, you can create wireframe prototypes of your site to give to users in a form of usability test. There are two types of tests that can be done.<\/p>\n\n\n\n<p><strong>Formative Test<\/strong><\/p>\n\n\n\n<p>A form of iterative usability testing that aims to find problems with a system so they can be fixed.<\/p>\n\n\n\n<p><strong>Summative Test<\/strong><\/p>\n\n\n\n<p>A form of usability testing that aims to measure metrics such as effectiveness, efficiency and satisfaction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-so-how-are-usability-tests-carried-out\">So how are usability tests carried out?\u00a0<\/h3>\n\n\n\n<p>A participant uses the wireframe prototype to carry out a set of pre-defined tasks by the observer, they are encouraged to think out loud while they do this to provide insight to the observer as to what they are thinking during each stage of the process.You can practice thinking out loud with them before beginning to ensure the participant is comfortable with the concept, and prevents any details being missed during the test if they lack the confidence to speak aloud.<\/p>\n\n\n\n<p>It is essential to talk only when the participant has been quiet for a while. If the participant forgets to think aloud, you can probe them with questions or comments such as \u201cWhat are you thinking?\u201d and \u201cRemember to think aloud.\u201d to encourage them to speak on what they are doing while going through the test. This type of probing also prevents bias by giving questions that are open ended and do not lead the participant into going where you want them to.&nbsp;<\/p>\n\n\n\n<p>All data, good or bad, is essential in a usability test, there are no wrong answers the participant can give, just ways to improve the system. Here are some points that make a good usability test:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All wording and comments are expressed in the users language, don\u2019t use jargon.<\/li>\n\n\n\n<li>Be realistic, i.e. describe things that the user would normally expect to be able to do.<\/li>\n\n\n\n<li>Don\u2019t hint at the correct task, the purpose is to analyse the users behaviour in a natural environment and how they progress through the task.<\/li>\n\n\n\n<li>Have a correct solution to the scenario or task, so you know if the task was completed successfully.<\/li>\n\n\n\n<li>Have a poker face, users will naturally look to you for whether they have made the right decision, but you mustn&#8217;t give anything away that would lead them to an answer.<\/li>\n\n\n\n<li>If they question how a functionality is supposed to work, answer the question with a question.\n<ul class=\"wp-block-list\">\n<li>For example, a participant asks the observer \u201cWhere is this button supposed to go?\u201d, the observer can respond with, \u201cWhere do you think this button goes?\u201d<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1582\" height=\"729\" src=\"https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data.webp\" alt=\"\" class=\"wp-image-11994\" srcset=\"https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data.webp 1582w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data-300x138.webp 300w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data-1024x472.webp 1024w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data-768x354.webp 768w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data-1536x708.webp 1536w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data-576x265.webp 576w, https:\/\/www.cbwebsitedesign.co.uk\/wp-content\/uploads\/2025\/11\/Categorising-Usability-Test-Data-1366x629.webp 1366w\" sizes=\"auto, (max-width: 1582px) 100vw, 1582px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-iterative-design-repeating-the-process\">Iterative Design &#8211; Repeating The Process<\/h2>\n\n\n\n<p>Once usability testing has been done, you can go back and analyse the data you found, what worked best and how many participants completed the task.You also can detail any problems that were found, such as \u2018Is the problem of high impact?\u2019, \u2018Are many users affected?\u2019 and \u2018Is the problem persistent?\u2019, and categorise these into Critical, Serious, Medium, or Low improvements or changes that need being made.<\/p>\n\n\n\n<p>So\u2026we\u2019re done right? Not quite! When it comes to user-centred design, the task is never truly over. Even after you\u2019ve done rounds of usability testing and tracking real-world usage, continuously improving software, websites or systems is essential to ensuring the users needs, behaviours and wants are always considered and met. It comes back to that term the \u2018Context Of Use\u2019, always consider who the users are, what tasks they will perform, the tools they would use, and the environment they are in.<\/p>\n\n\n\n<p>This article only begins to scratch the surface of UX and Usability, as there are more finer details involved in each process that you can consider during user-centred design, from turning red routes into user stories, understanding effectiveness, efficiency and satisfaction in usability, card sorting and organising groups of data, to key usability heuristics for identifying problems within a design.<\/p>\n\n\n\n<p>There is so much more in the world of user-centred design out there, but one key takeaway is this, user experience is all about making a system easier to use. It\u2019s not about what you like, it\u2019s what works for your users.<\/p>\n\n\n<!-- faq -->    \n<section class=\"section faqs overflow-hidden pt-layout-sm pb-0\">\n\n  <div class=\"container relative\">\n    <div class=\"row justify-between\">\n      <!-- Heading -->\n      <div class=\"w-full sm:w-1\/3\">\n                              <\/div>\n\n      <!-- FAQ -->\n              <!-- Mark this block as an FAQPage -->\n        <div class=\"w-full sm:w-3\/5\" itemscope itemtype=\"https:\/\/schema.org\/FAQPage\">\n          <dl class=\"accordion is-open lg:mt-12\" data-chris >\n                          <!-- Each FAQ item is a Question, linked via mainEntity -->\n              <div class=\"accordion-item open\" data-cursor=\"hover\" itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n                                  <dt class=\"accordion-item-title\">\n                    <h4 class=\"long\" itemprop=\"name\">What does user centred design actually mean in practice?<\/h4>\n                    <div class=\"icon\"><\/div>\n                  <\/dt>\n                \n                                  <dd class=\"accordion-item-content\">\n                    <div class=\"accordion-item-content-inner wysiwyg\">\n                      <!-- Accepted answer content -->\n                      <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n                        <div itemprop=\"text\">\n                          <p>User centred design is about building a site or product around how real people think, behave and complete tasks. It means involving users early, researching how they work in context, and making design decisions based on evidence rather than personal preference. You keep refining the experience through testing rather than assuming you got it right first time.<\/p>\n                        <\/div>\n                      <\/div>\n\n                      <!-- Feedback UI is left as-is, not part of the schema answer -->\n                                              <div data-question-group>\n                          <div class=\"flex gap-4 mb-4\" data-question-ask>\n                            <strong>Did this answer your question?<\/strong>\n                            <span class=\"relative text-green cursor-pointer\" data-question=\"yes\">\n                              Yes\n                              <div class=\"faq-pop-up\" data-question-display=\"yes\">\n                                That\u2019s great glad we could help!\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">\n                                                                          Start a Project                                                                      <\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                            <span class=\"relative text-red cursor-pointer\" data-question=\"no\">\n                              No\n                              <div class=\"faq-pop-up\" data-question-display=\"no\">\n                                No problem, one of our experts can give you a more in-depth answer.\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">Ask our Experts<\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                          <\/div>\n                        <\/div>\n                                          <\/div>\n                  <\/dd>\n                              <\/div>\n                          <!-- Each FAQ item is a Question, linked via mainEntity -->\n              <div class=\"accordion-item open\" data-cursor=\"hover\" itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n                                  <dt class=\"accordion-item-title\">\n                    <h4 class=\"long\" itemprop=\"name\">Why is the context of use such a big deal in UX?<\/h4>\n                    <div class=\"icon\"><\/div>\n                  <\/dt>\n                \n                                  <dd class=\"accordion-item-content\">\n                    <div class=\"accordion-item-content-inner wysiwyg\">\n                      <!-- Accepted answer content -->\n                      <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n                        <div itemprop=\"text\">\n                          <p>Because usability depends entirely on the situation people are in when they use your site. You can\u2019t design something usable if you don\u2019t understand their environment, knowledge level, goals or constraints. Designers often assume users think and behave like they do, which is rarely the case. Observing users in real settings is the only way to bridge that gap.<\/p>\n                        <\/div>\n                      <\/div>\n\n                      <!-- Feedback UI is left as-is, not part of the schema answer -->\n                                              <div data-question-group>\n                          <div class=\"flex gap-4 mb-4\" data-question-ask>\n                            <strong>Did this answer your question?<\/strong>\n                            <span class=\"relative text-green cursor-pointer\" data-question=\"yes\">\n                              Yes\n                              <div class=\"faq-pop-up\" data-question-display=\"yes\">\n                                That\u2019s great glad we could help!\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">\n                                                                          Start a Project                                                                      <\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                            <span class=\"relative text-red cursor-pointer\" data-question=\"no\">\n                              No\n                              <div class=\"faq-pop-up\" data-question-display=\"no\">\n                                No problem, one of our experts can give you a more in-depth answer.\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">Ask our Experts<\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                          <\/div>\n                        <\/div>\n                                          <\/div>\n                  <\/dd>\n                              <\/div>\n                          <!-- Each FAQ item is a Question, linked via mainEntity -->\n              <div class=\"accordion-item open\" data-cursor=\"hover\" itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n                                  <dt class=\"accordion-item-title\">\n                    <h4 class=\"long\" itemprop=\"name\">Why can\u2019t we just ask users what they want?<\/h4>\n                    <div class=\"icon\"><\/div>\n                  <\/dt>\n                \n                                  <dd class=\"accordion-item-content\">\n                    <div class=\"accordion-item-content-inner wysiwyg\">\n                      <!-- Accepted answer content -->\n                      <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n                        <div itemprop=\"text\">\n                          <p>People will always give opinions, but opinions rarely reflect actual behaviour. What users say and what they do are often very different. Watching people complete tasks uncovers far more useful insights, because you see their workarounds, pain points and genuine goals rather than filtered answers.<\/p>\n                        <\/div>\n                      <\/div>\n\n                      <!-- Feedback UI is left as-is, not part of the schema answer -->\n                                              <div data-question-group>\n                          <div class=\"flex gap-4 mb-4\" data-question-ask>\n                            <strong>Did this answer your question?<\/strong>\n                            <span class=\"relative text-green cursor-pointer\" data-question=\"yes\">\n                              Yes\n                              <div class=\"faq-pop-up\" data-question-display=\"yes\">\n                                That\u2019s great glad we could help!\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">\n                                                                          Start a Project                                                                      <\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                            <span class=\"relative text-red cursor-pointer\" data-question=\"no\">\n                              No\n                              <div class=\"faq-pop-up\" data-question-display=\"no\">\n                                No problem, one of our experts can give you a more in-depth answer.\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">Ask our Experts<\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                          <\/div>\n                        <\/div>\n                                          <\/div>\n                  <\/dd>\n                              <\/div>\n                          <!-- Each FAQ item is a Question, linked via mainEntity -->\n              <div class=\"accordion-item open\" data-cursor=\"hover\" itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n                                  <dt class=\"accordion-item-title\">\n                    <h4 class=\"long\" itemprop=\"name\">What are personas and why do they matter?<\/h4>\n                    <div class=\"icon\"><\/div>\n                  <\/dt>\n                \n                                  <dd class=\"accordion-item-content\">\n                    <div class=\"accordion-item-content-inner wysiwyg\">\n                      <!-- Accepted answer content -->\n                      <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n                        <div itemprop=\"text\">\n                          <p>Personas represent groups of users with similar goals, behaviours and needs. They help you focus design decisions on the people who matter most rather than trying to please everyone. Good personas are based on research, not guesswork, and they keep the team aligned on who the primary user actually is.<\/p>\n                        <\/div>\n                      <\/div>\n\n                      <!-- Feedback UI is left as-is, not part of the schema answer -->\n                                              <div data-question-group>\n                          <div class=\"flex gap-4 mb-4\" data-question-ask>\n                            <strong>Did this answer your question?<\/strong>\n                            <span class=\"relative text-green cursor-pointer\" data-question=\"yes\">\n                              Yes\n                              <div class=\"faq-pop-up\" data-question-display=\"yes\">\n                                That\u2019s great glad we could help!\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">\n                                                                          Start a Project                                                                      <\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                            <span class=\"relative text-red cursor-pointer\" data-question=\"no\">\n                              No\n                              <div class=\"faq-pop-up\" data-question-display=\"no\">\n                                No problem, one of our experts can give you a more in-depth answer.\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">Ask our Experts<\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                          <\/div>\n                        <\/div>\n                                          <\/div>\n                  <\/dd>\n                              <\/div>\n                          <!-- Each FAQ item is a Question, linked via mainEntity -->\n              <div class=\"accordion-item open\" data-cursor=\"hover\" itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n                                  <dt class=\"accordion-item-title\">\n                    <h4 class=\"long\" itemprop=\"name\">What are red routes in UX?<\/h4>\n                    <div class=\"icon\"><\/div>\n                  <\/dt>\n                \n                                  <dd class=\"accordion-item-content\">\n                    <div class=\"accordion-item-content-inner wysiwyg\">\n                      <!-- Accepted answer content -->\n                      <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n                        <div itemprop=\"text\">\n                          <p>Red routes are the key user journeys that bring the most value. Every site or product has a handful of tasks that users absolutely must be able to complete quickly and without friction. Prioritising these routes keeps the design focused and prevents the experience from getting cluttered with secondary features that distract from what really matters.<\/p>\n                        <\/div>\n                      <\/div>\n\n                      <!-- Feedback UI is left as-is, not part of the schema answer -->\n                                              <div data-question-group>\n                          <div class=\"flex gap-4 mb-4\" data-question-ask>\n                            <strong>Did this answer your question?<\/strong>\n                            <span class=\"relative text-green cursor-pointer\" data-question=\"yes\">\n                              Yes\n                              <div class=\"faq-pop-up\" data-question-display=\"yes\">\n                                That\u2019s great glad we could help!\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">\n                                                                          Start a Project                                                                      <\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                            <span class=\"relative text-red cursor-pointer\" data-question=\"no\">\n                              No\n                              <div class=\"faq-pop-up\" data-question-display=\"no\">\n                                No problem, one of our experts can give you a more in-depth answer.\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">Ask our Experts<\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                          <\/div>\n                        <\/div>\n                                          <\/div>\n                  <\/dd>\n                              <\/div>\n                          <!-- Each FAQ item is a Question, linked via mainEntity -->\n              <div class=\"accordion-item open\" data-cursor=\"hover\" itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n                                  <dt class=\"accordion-item-title\">\n                    <h4 class=\"long\" itemprop=\"name\">How does usability testing fit into the design process?<\/h4>\n                    <div class=\"icon\"><\/div>\n                  <\/dt>\n                \n                                  <dd class=\"accordion-item-content\">\n                    <div class=\"accordion-item-content-inner wysiwyg\">\n                      <!-- Accepted answer content -->\n                      <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n                        <div itemprop=\"text\">\n                          <p>Usability testing validates whether your ideas work in the hands of real users. You give participants tasks, observe how they approach them and listen to their thought process. The goal isn\u2019t to lead them or fix things on the spot, but to understand what\u2019s confusing or slowing them down. You then improve the design and repeat the cycle. It\u2019s iterative by nature, not a one-off checkpoint.<\/p>\n                        <\/div>\n                      <\/div>\n\n                      <!-- Feedback UI is left as-is, not part of the schema answer -->\n                                              <div data-question-group>\n                          <div class=\"flex gap-4 mb-4\" data-question-ask>\n                            <strong>Did this answer your question?<\/strong>\n                            <span class=\"relative text-green cursor-pointer\" data-question=\"yes\">\n                              Yes\n                              <div class=\"faq-pop-up\" data-question-display=\"yes\">\n                                That\u2019s great glad we could help!\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">\n                                                                          Start a Project                                                                      <\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                            <span class=\"relative text-red cursor-pointer\" data-question=\"no\">\n                              No\n                              <div class=\"faq-pop-up\" data-question-display=\"no\">\n                                No problem, one of our experts can give you a more in-depth answer.\n                                <a href=\"\/contact-us\/\" target=\"_self\" class=\"btn btn-pink btn-small\" data-mp=\"\">\n                                  <span class=\"btn-bg\" data-mp-item=\"\" data-mp-scale=\"1.05\" data-mp-d=\"0.2\"><\/span>\n                                  <span class=\"btn-label\" data-mp-item=\"\">Ask our Experts<\/span>\n                                <\/a>\n                              <\/div>\n                            <\/span>\n                          <\/div>\n                        <\/div>\n                                          <\/div>\n                  <\/dd>\n                              <\/div>\n                      <\/dl>\n        <\/div>\n          <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>What makes a good design? This is a very subjective question. Many would say cool animations, fun interactivity or engaging visuals, but by themselves, do these answers help the user with their needs? A better question would be to ask, what makes a good user-centred design? User Experience and Usability are essential to allow users [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":11996,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[26,31],"tags":[],"class_list":["post-11990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design","category-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/posts\/11990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/comments?post=11990"}],"version-history":[{"count":9,"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/posts\/11990\/revisions"}],"predecessor-version":[{"id":13346,"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/posts\/11990\/revisions\/13346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/media\/11996"}],"wp:attachment":[{"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/media?parent=11990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/categories?post=11990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cbwebsitedesign.co.uk\/wp-json\/wp\/v2\/tags?post=11990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}