UX Design Best Practices (and how to get started)

Below is a guide for getting started with successful UX design, providing both free and paid options for each step, allowing you start implementing UX principles to your website regardless of your business size or budget.

There is no affiliation with the tools stated below, they are purely to provide guidance on some of the options that are available.

‍

‍

1 - Understand Your Users

Conduct User Research

• Free: You can start off this process by simply talking to your customers to discover their wants and needs. You could use free tools such as google forms to create surveys and receive feedback. Social media is another free tool available that provides you with direct access to your customers, whether it be through reviews or interaction with your content.

• Paid: There are paid tools available if you want to carry out an enhanced level of research. Tools like SurveyMonkey and Hotjar allow you to conduct a deeper level of analysis and gather data on user behaviour.

‍

Create User Personas

• Free: Develop simple user personas based on the information you gather during the user research. Include details such as age, occupation, goals, and concerns. The idea behind this is to paint a picture of your target customer, allowing you to think about how the website should be structured to suit their needs. Make My Persona provides free options for developing the ideal persona for you customers.

• Paid: Options like Xtensio have a large range of templates and documents available for your use. It is worth noting they they do offer some services for free (although there are limitations compared to the paid plans).

‍

User Journey Mapping

• Free: This involves outlining the steps that a customer will need to make to interact with your website. Essentially you are planning their journey from when they land on the page to when they complete the desired action (such as buying a product, or making an enquiry). This process allows you to identify key touchpoints and any points of friction (difficulties) they may experience when navigating the website. There are free options out there such as draw.io but you could also sketch these out by hand.

• Paid: Professional tools such as Miro or Lucidchart are available should you need (or want) to create intricate and interactive user journey maps.

‍

‍

2 - Prioritise Usability

Streamline Navigation

• Free: Keep your website streamlined by limiting the amount of menu options as this can overwhelm and deter users. You could test your navigation with friends or family to make sure it is intuitive to a range of people and technical abilities.

• Paid: There are many companies and agencies available (including Afflutech Web Solutions) who are able to carry out content audits to help test and streamline your website navigation.

‍

Design Intuitive Interfaces

• Free: To avoid confusion and frustration to the user, it should be clear that interactive elements are clickable, ensuring that they are intuitive to use. Things that aren't interactable should not appear as if they are.

• Paid: If you require assistance with designing the website interfaces, you could hire a web designer to take care of this. There are many agencies and designers available, Afflutech Web Solutions included (another shameless plug).

‍

‍

3 - Focus on Accessibility

Follow Accessibility Guidelines

• Free: Ensure that your content is readable, images have alt text (a hidden description allowing screen readers to determine what it is showing), and that there is enough contrast between text colours and the background. There are a number of free accessibility checkers online such as Accessibility Checker that scan your website and inform you of any issues that require attention.

• Paid: There are more powerful accessibility tools available that offer comprehensive accessibility audits and recommendations, an example being Siteimprove.

‍

Allow for Keyboard Navigation

• Free: To make your website fully accessible, it will need to allow for navigation by the keyboard alone. This can be tested yourself by going to your website and seeing if you are able to tab through and access all of the elements and information.

• Paid: For comprehensive accessibility testing, you can make use of solutions such as that offered by Perfecto, checking that your platform is usable by people with all levels of disability.

‍

Test with Assistive Technologies

• Free: There are free screen readers available that will allow you to test your website, helping you to identify issues. On Windows there is NVDA and on Mac there is VoiceOver available.

• Paid: As mentioned above, there are professional accessibility testing services offer by the like of Perfecto, that can provide detailed reports along with recommendations for improvements.

‍

‍

4 - Ensure Consistency

Consistent Visual Design

• Free: You can maintain consistent designs across your website by creating a simple style guide that will house your typography and colour schemes. There are free design tools available online, with Canva probably being the most popular at the time of writing this. My personal preference is to use Figma which offers both free and paid plans dependant of the level of functionality you require.

• Paid: As touched on just above, there are paid plans with Figma, but there is also Adobe XD which is another popular choice amongst UX designers. These paid tools allow for team collaboration so can be very helpful should you need more than one person accessing and working with the design file(s).

‍

Component Libraries

• Free: Similar to creating a style guide, it is also good practice to create component libraries. These house all of the separate design elements (such as buttons, form fields, icons etc.), creating reusable components that can be used across your website. Again, the Figma free plan would be my tool of choice for this.

• Paid: Figma paid plans and Adobe XD rank highly for UX Designers, allowing them to create component libraries and collaborate as a team.

‍

Brand Guidelines

• Free: Brand guidelines document the elements that make your brand unique - whether it be the logo, the values or the colour scheme, it is a good idea to keep these together in a brand guideline document, which then serves as a guide to ensure that any future work adheres to these guidelines. This is something that can be put together on a document or on design software.

• Paid: If you want a more polished guideline document, you could seek the help of a local design agency, or there are also brand management platforms available such as Frontify.

‍

‍

5 - Prioritise Content

Clear Hierarchy

• Free: Use the correct headings across your website, ensuring that the main headings are larger than the sub headings. It should be clear to the user which are the main headings and which follow as sub-headings. It is also good practice to use bullet points to make content stand out and easy to read. The user shouldn't have to spend a lot of time reading through blocks of text to find the important information.

• Paid: Getting the expertise of an experienced web designer / developer can help with ensuring correct hierarchy of content. If you have some technical knowledge around web development, you could use a professional content management system (CMS) such as WordPress alongside premium plugins to provide feedback on your content structure.

‍

Relevant Content and Concise Language

• Free: If you already have a website, regularly update your content to keep it relevant. Try and pay attention to any feedback from the customer to determine what they find valuable and what they don't like, enabling you to keep up to date with their needs and expectations. Google Analytics is a powerful free tool that you can leverage to capture insights into user behaviour. When you do create content, ensure you write in a clear, straightforward manner. Avoid jargon and try to minimise the complexity of sentences. A highly rated free tool to help with writing is Grammarly.

• Paid: You can use advanced analytics tools such as Semrush and Ahrefs to gain deeper insights into content performance, potentially highlighting opportunities for improvement. Both of these platforms do offer some free, albeit limited features, but they are worth checking out.

‍

‍

6 - Optimise Performance

Fast Loading Times

• Free: If you have a number of high resolution images across your website, you could consider compressing these to help with page loading times. Free tools such as TinyPNG are available to assist with this. Try to avoid any large files or unnecessary plugins, as the more you have on the page, the longer it will take to load. If you have a long load time, there is a good chance users will just leave instead of waiting. Google's PageSpeed Insights can be used to review any performance issues that may be present.

• Paid: There are premium options on the market should you want more detailed performance insights and recommendations. These include GTmetrix and Pingdom.

‍

Mobile Responsiveness

• Free: As the majority of web traffic comes through mobile devices, it can't be stressed how important UX mobile design is. Any designs undertaken by yourself or a dedicated web designer should ensure a seamless experience when viewed on a mobile device. There is now such a vast range of mobile sizes and web browsers, so it is crucial that your website is tested on as many different devices as possible to ensure that there is a great user experience on all of them.

• Paid: A powerful tool for ensuring mobile responsiveness is BrowserStack. This allows you to test how your website looks on a large range of screens and devices as it is able to emulate a vast range of devices and browser combinations.

‍

Minimise Distractions

• Free: Although they can make a website look visually appealing, you should avoid excessive animations. The focus should be on getting the essential information in front of the users a quickly and easy as possible. Another no-no in UX design is using excessive pop-ups. There isn't a great deal that's more distracting (and annoying) than numerous pop ups in your face when you land on a website.

• Paid: You could use a user testing platforms such as UserTesting if you want insights on potential issues. If you are considering a redesign of your website, a good web designer would also be able to offer suggestions on how to improve the user experience.

‍

‍

7 - Iterate Based on Feedback

Usability Testing and Analytics

• Free: In order to carry out useability testing you could request feedback on you website from your customers, potentially offering then a discount or special offer in return for their time. Take the feedback on board and implement the changes where possible. As it is a free tool, you should consider integrating Google Analytics to track user behaviour and build up a view of what is working and what is not working on your website.

• Paid: Consider a user testing platforms such as UserTesting for more in-depth and structured useability insights.

‍

Continuous Improvement

• Free: Always see UX as an ongoing process. You should be continuously gathering user insights and feedback and making adjustments to optimise your website based on this information.

• Paid: Should you have a large website, leading to the management of numerous UX tasks, you could consider the use of a management tool such as Jira or Monday.com.