As technology continues to evolve and advance rapidly, more of our daily lives are taking place in a digital-first context. When marketing your products and services, this means:
- Your target audience now has a shorter attention span, and less patience when browsing websites and services online.
- Your target audience also has more choice of options than ever before when choosing who to buy from.
Modern users demand the same speed and convenience they get from the industry-leading sites and apps they use every day. That means you only have a matter of seconds to make a positive, memorable connection with your visitors.
UX design, therefore, serves as a critical phase within the end-to-end process of web design. This is essentially the practice of creating a website that allows your visitors to complete a process, take an action, or fulfill their need in as few steps or clicks as possible.
Despite its ever-increasing importance, UX design is a process that many businesses, and even many agencies, still struggle to get right.
To ease this challenge, and help you ensure your own website’s UX is designed effectively, we’ve written this article to outline the process in detail. We’ll also provide advice and tips to help you ensure your website can provide your target audience with an experience that drives them towards your desired outcomes.
What is UX Design?
The aim of UX design is to make it quick, easy, and convenient for your visitors to complete a task or process, or follow a call-to-action. Your UX involves everything from functionality, navigation, accessibility, layout, structure, and even the site’s content itself.
Designing your website in a way that’s intuitive and easy-to-use will provide your visitors with a satisfying UX. It’s important to note here that UX design shouldn’t be confused or bundled up with user interface (UI) design. UI design is its own separate phase of the process that comes slightly later.
Understanding the Design Process as a Whole
Research and Planning
Earlier in the overall design process, before you approach the UX, you should’ve gone through a thorough research and planning phase with your design agency.
This is important in ensuring that every decision you make towards your UX and UI will produce a more effective website capable of meeting your business goals and your audience’s needs.
Working alongside your agency, you’ll use this research to define the full scope of your website and all its requirements. This will include the creation of user personas and user journeys. These will help you determine the most simple and efficient flow for your visitors to take through your website to each call-to-action, and this is how your UX is created.
This research will guide both your UX design and UI design processes.
Related reading: Understanding the Important Role of Research and Planning When Designing a New Website.
Visual Exploration
Your agency partner should then produce a set of mood boards that you’ll use to create the aesthetic style of your site in line with your brand. These mood boards help you visualise the way your website will look and feel when built.
This is a precursor to your UI design, and it’s done before the UX phase to ensure the overall style is correct before any more design work is completed.
This is another collaborative process, where your agency should advise you with their expertise and experience from delivering successful website projects in the past.
Related reading: What is Visual Exploration in the Process of Web Design?
The UX Process
Information Architecture
The information architecture of your website is devised by building a sitemap, which is a map of all the necessary pages across your entire website. You’ll likely have an existing one from your current site, but this will probably need updating based on all the new research and strategic planning you’ve done.
From the sitemap, you’ll have a list of all the pages and content required to populate your site. Your agency will then build out a content base framework, noting any content that you need support in developing.
The users’ navigation through the site needs to be tailored to the objectives you’ve set and the research findings from earlier. It also needs to be built in a way that allows for flexibility and scalability later, as your requirements evolve and your business grows.
High-Fidelity Wireframes
Wireframes are used to design the user experience of your website. This is essentially like creating a blueprint of your website’s pages prior to beginning the actual design work, detailing the site’s flow and the users’ journey through it.
These wireframes are used to determine how the user can reach their desired outcome, or reach your desired call-to-action, in as few clicks or steps as possible. Remember, the purpose of UX design is to optimise that journey.
Here at SoBold, we use high-fidelity wireframes that provide a clear, detailed representation of the users’ flow to all calls-to-action. This is directed and influenced by the things we learned in the research and planning phase.
These wireframes are typically built on a standard desktop size, but they can be done on a mobile device screen size if you want your site to be designed mobile-first.
Wireframes are used to create the UX so you don’t get distracted by the visual design when evaluating the user journeys. This allows you to focus completely on the flow and the experience the user will have when visiting your site, without worrying about the aesthetic elements. It proves to be a much more effective approach towards creating an experience that will satisfy your visitors and help you achieve your objectives.
Again, this will be a collaborative process in which you’ll work closely with your agency, providing feedback on the wireframes to ensure they align with your requirements.
Once the mood boards and the wireframes are approved, all that’s left to do is apply the design to the wireframes to bring your website’s design to life. This makes the UI design process very quick and easy from here.
A Quick Word on Accessibility
Accessibility is a crucial aspect of any user experience.
Accessibility refers to how easy and accessible technology is for all users, regardless of their physical ability, location, personal background, or any other factors. While accessibility is primarily a concern for the UI design team, it’s also important in optimising your UX as well. After all, a website that isn’t accessible simply cannot be considered to have a good UX.
If accessibility isn’t included as a core component of your web design process, you should raise this as a concern with your agency.
Here at SoBold, accessibility is a key part of all our design processes, as we believe that all technology must be fully inclusive and equally available to everyone.
Related reading: You can learn all about what it takes to deliver good usability through your website in our related article here.
Finding the Optimum Balance
As touched on earlier, your target audience will be visiting your site with a goal in mind, and the UX is what enables them to achieve that easily.
Of course, you also have business objectives to achieve through your website, which must also be supported by UX design. That creates the need for balance between a UX that serves your visitors and supports your business strategy simultaneously. Your design should also play the important role of directing visitors to the calls-to-action that you want them to engage with.
Finding this balance is a challenge, and one that could have a negative impact if you get it wrong. This is where the guidance and expertise of a specialist agency partner becomes so important. All design is collaborative and iterative, and UX design is all about compromising to find the right balance.
The Business Benefits of Great UX
Finding a design agency you can trust, and investing the time to work with them to craft a truly outstanding user experience, will prove well worth it in the long-run.
UX design is complex, but the right agency can guide you by demystifying the process and helping you make the right decisions at every step. Finding that aforementioned balance between your strategic objectives and your target audience’s best interests can have a transformational impact on the performance of your website.
Providing your visitors with a great UX can deliver a wealth of other benefits as well, not only to the performance of your website but to your wider business too. For instance, a study by
Some of these additional benefits include:
- Boost SEO and brand awareness
- Improve audience engagement
- Reduce bounce rates
- Increase conversions
- Drive more sales through your website
- Accelerate business growth
- Improve customer retention and loyalty
- Gain competitive advantages.
Your UX isn’t Complete Without User Interface Design
The key thing to remember is that good UX design is really just helping your website visitors travel from their entry point to wherever they need to get to as easily and efficiently as possible.
In the UX phase of your project, you need to consider who the user is, what they’re aiming to do, and then determine how to enable them to do that with an intuitive design.
Once your UX design begins to come together, and you’re satisfied with everything, the next step will be for your agency partner to begin to design your user interface.
While UX and UI are separate, they’re also intrinsically linked. They need to work together seamlessly and complement each other in order for your website to be successful.
If you’d like to take a step back and learn more about the overall process of web design, read our related article here.
Would you like these insights straight to your mailbox?
- Brainstorming and ideation
- Assistance in research and information-gathering
- Writing copy
- Writing code
- Image and video creation
- Data analysis
- Automating manual processes.
- GPT-4 was released as an upgrade to Chat GPT. GPT-4 can understand images, process 25,000 words in one go, earn a top 10% score on complex exams, and even demonstrate some advanced reasoning capabilities.
- Adobe released Firefly, which is a programme with a range of new generative AI features. It can create outstanding new content using simple language, with almost-unlimited creative options like turning 3D compositions into photorealistic images and automating advanced video editing processes.
- GitHub launched CoPilotX, which can supposedly boost coding speed by up to 55%. CoPilotX has similar features to Chat GPT, but will be used by software engineers and developers to boost productivity and time-to-market.
- And, just last week, Stability AI released its Stable Diffusion XL model, offering photorealism through an intricate editing interface. It’s reportedly built with around 2.3 billion parameters.
- 1,920px – This covers most external computer monitor sizes
- 1,366px – This covers most laptop screen sizes
- 992px – This covers most Notebook and iPad devices
- 768px – This covers most other tablet devices
- 375px – This covers most smartphones.
- Keep your design simple and your content succinct
- Prioritise the preferences and best interests of your target audience
- Make your design elements as clear as possible
- Maintain consistency
- Ensure your brand, and your company’s identity, have been accurately represented through the design
- Use power of visual imagery to capture and retain your visitors’ attention
- Make your call-to-action as strong and compelling as possible
- Don’t create anything that interferes with the goals of your UX.
- Perceivable
- Operable
- Understandable
- Robust.
- Use contrast and blank space to make your content easy to perceive
- Use bold colours
- Use font sizes no smaller than 14px for desktop and 13px for mobile across the whole site (although, this does depend on the font you use)
- Use headings and structure correctly to organise content clearly on each page
- Make all your content easy to both see and hear
- Write all your copy in plain, simple language
- Avoid any flashing or blinking imagery or video content
- Write simple, clear, and helpful error messages.
Digital Business
5 January, 2023
WordPress vs Sitecore – Comparing Both Content Management Systems
Large businesses and enterprises in need of a content management system (CMS) today are spoilt for choice, because there are plenty of excellent platforms available. From WordPress to Sitecore to Drupal, the technology currently on offer is highly intelligent and intuitive.
But so much choice can make the task of finding the right CMS for your own specific business complicated and time-consuming.
Selecting a CMS is an important decision that requires a lot of research, followed by careful evaluation of all the various options. Of course, those processes can be very time-consuming. When you’re already extremely busy juggling dozens of other priorities, it’s challenging to give this the attention and effort it deserves.
To solve that challenge, we’ve done the bulk of the hard work for you. In a new series of articles, we’ll provide you with direct, objective comparisons between some of the leading options for CMSs, helping you relieve the headache of researching and evaluating them yourself.
In the first article of this series, we’ll be looking at the comparison between Sitecore and WordPress.
How Does the Security Compare for Both Platforms?
As we face ever-increasing concerns with cyber security, data protection, and various other digital challenges, finding a platform with robust security should be a top priority.
Sitecore Security
Sitecore has a reputation of being the leading CMS for large businesses, guaranteeing an enterprise-grade experience that includes a high level of security.
Sitecore’s security is also strengthened by the vast range of in-built features within the platform, which we’ll discuss in more detail later. There’s no need to purchase more third-party software or plug-ins to enhance its functionality, which means you won’t be creating any additional vulnerabilities or risks. The platform also receives frequent security updates which bolster your protection even further.
If security is a concern for your business, Sitecore should be high on your list of potential candidates for a CMS.
WordPress Security
For a long time, many people believed the misconception that WordPress isn’t secure enough for large businesses. However, industry leaders such as global investment firm Blackstone, the NHS in England, global research and advisory leader Forrester, and multinational bank Standard Chartered now use WordPress for their CMS. This goes a long way to proving that wrong.
![](https://sobold.co.uk/wp-content/uploads/2022/12/Blackstone.png)
In fact, WordPress is already a secure, stable platform out-of-the-box. So, where did this myth come from?
Well, vulnerabilities can arise in certain scenarios. Firstly, strong security with any technology is dependent on a well-managed hosting environment. If you have WordPress hosted in a secure environment from an experienced provider, with proactive security measures in place, your risk will be extremely low.
Secondly, plugins are something to be cautious of when it comes to security, both in terms of where they come from and keeping them properly maintained. Security threats will be minimised if you only use plugins from trusted sources. You should also ensure you always keep them tested and updated, ideally working alongside security-specific plugins like WordFence.
We appreciate this may sound like a lot of work. That’s why all the examples of the businesses succeeding with WordPress have the support of an agency partner who ensures all these things are taken care of during the development stage. It’s worth noting, though, that this will also be the case when adopting any CMS in a business setting.
Which Platform is More Scalable?
One of the most important aspects of a CMS is its scalability. A CMS is a long-term investment, and this is one of the most influential factors in determining whether that investment will be successful or not.
You’ll need to ensure your site can evolve as your business grows and your needs change over time. This will require an infrastructure that can quickly and easily scale with more pages, additional functionality, and perhaps even more sites, without the burden of hefty costs for more development work.
How Scalable is Sitecore?
Sitecore is designed specifically for large businesses, so its scalability is up there with the very best. Sitecore is a robust platform that allows your digital presence to grow seamlessly as your business grows, even if you need to build multiple sites to serve different groups of users in different languages.
How Scalable is WordPress?
WordPress is another highly scalable platform. Despite some still mistakenly believing that WordPress is suited to smaller businesses, you can use the CMS to build sophisticated, industry-leading sites. Like Sitecore, WordPress is agile and scalable enough to grow alongside your business and adapt to your changing requirements.
How Capable are these Content Management Systems?
The main purpose of a CMS is to provide a software-based infrastructure upon which you can build and manage websites and applications. While most CMSs are similar on the surface, with the same fundamental functionality, they each have unique features and capabilities that differentiate them
For example, one critical indication of quality for a CMS is how easy it is to use. Once you’ve adopted a platform, you and your colleagues will need to feel immediately comfortable using it on a daily basis. If a CMS can’t provide good usability, it’s probably one you should avoid.
Sitecore as a Content Management System
Sitecore is actually considered a fully managed ‘digital experience platform’ that comes with more capabilities than the average CMS.
Most of its best features are readily available as soon as you begin using Sitecore. That allows you to get a high quality site live very quickly without additional work within the platform.
However, Sitecore typically provides quite hierarchical, complex workflows that might be frustrating for small or agile teams. This can also create longer development cycles than usual, giving you a slower time-to-market than more intuitive systems like WordPress.
WordPress as a Content Management System
WordPress is easily the most popular CMS in the world right now, with around 45% of all websites built on the platform. One of the main reasons for that is its ease-of-use, with simple and efficient content management
This usability allows you to get up-to-speed quickly and share responsibilities across several members of your team, even if they have no previous content management experience.
WordPress also makes it convenient to edit content on a page-by-page basis, saving you valuable time, with its block-based design an ideal method for customisation and site management.
How Much Personalisation do they Provide?
The ability to customise and tailor your site’s content to your target audiences is more important today than ever before, with so much of modern business now taking place online. Therefore, this is another important point to consider when choosing between your various CMS options.
Personalisation in Sitecore
When compared with other platforms, Sitecore’s personalisation is excellent. Sitecore will provide you with a great deal of control over the structure and design of your pages, allowing you to tailor your user experience and drive greater performance for your site.
This is particularly useful for larger businesses with high volumes of potential site visitors, delivering competitive differentiation and driving increased conversion rates.
Personalisation in WordPress
WordPress is also highly customisable. You can use its flexibility to get creative with your design, and build bespoke features and functionality to better engage with your audience.
There’s not much to separate Sitecore and WordPress in this area. The gap in personalisation becomes even smaller if you find an experienced agency with WordPress-specific expertise to help develop your site and improve your customer experience.
Integrating with Other Systems
Before your business invests in any digital platform, it’s important to ensure that technology can integrate easily with your existing software. Whether it’s your customer relationship management (CRM) or any other marketing systems, any digital tools you currently have should ideally be compatible with your new CMS.
How Sitecore Integrates with Other Systems
Sitecore integrates well with other systems. It allows you to achieve out-of-the-box integration with most of the leading CRM software, and plenty of other digital tools and platforms.
How WordPress Integrates with Other Systems
WordPress tends to be the easiest platform to integrate with your existing systems, because most brands and other SaaS products have already made themselves compatible.
This means you can deploy WordPress with minimal disruption, regardless of whether you’re building a new site from scratch or migrating your current site from a different CMS.
Total Cost of Ownership (TCO)
Of course, you’ll also want to ensure you’re getting a solution that will deliver good value for money. With a CMS, the total cost of ownership (TCO) can vary greatly from one platform to another, due to factors like licensing fees and update-driven maintenance.
Sitecore Initial Investment and Ongoing Costs
Sitecore is an expensive option, even if you have a large budget to work with. You’ll be required to purchase licences for the platform with an ongoing renewal fee each year. These licenses come in tiers, so if you want to access the full range of benefits from Sitecore you’ll have to opt for the most expensive offering.
On top of that, you’ll also need to account for development costs with an agency, hosting costs, maintenance and support fees, and various other expenses that give Sitecore a very hefty total cost of ownership (TCO).
Furthermore, Sitecore requires ongoing management and maintenance to handle regular large-scale updates to the platform. When updates occur, new versions of the software come with a big price tag and may cause you to pay for additional development work to get your site up-to-speed.
However, this could be a worthwhile investment if Sitecore’s features and capabilities are necessary for your specific requirements. If you’re looking for a quality, trustworthy enterprise-grade platform, Sitecore can justify the cost.
WordPress TCO and Value
Conversely, WordPress is a much more cost-effective solution with a drastically lower TCO. Licenses for WordPress come at no cost and the software is entirely open-source. That means your implementation costs would be limited to just hosting, agency fees, and post-deployment support.
If you decide to use any plugins or extensions of the platform, these will be licensed and paid for separately. However, businesses rarely need to bolt on many new tools or capabilities because WordPress is such a feature-rich platform already.
When WordPress is updated, unlike Sitecore, managing and testing your site can be done in just a few hours at a much lower cost.
![](https://sobold.co.uk/wp-content/uploads/2022/12/SoBold-Blog-Table-V02.png)
A Word on Agency Partners
One thing both Sitecore and WordPress have in common is the small selection of platform-specific agencies who can build high performance sites for large businesses using this technology.
A CMS becomes far easier to use, and easier to drive strong return on investment (ROI), if you have a specialist partner supporting you.
Finding an agency with the necessary experience and expertise to help you leverage these platforms to their full potential should be another important influence on your choice. From integration, to development, to maintenance, all the benefits and advantages of the platforms will require an agency to help you fully unlock them.
How to Make Your Decision
So, with all that information, how can you decide between the two?
Both of these platforms are excellent options that would serve most businesses extremely well. After all, there’s plenty of good reasons why some of the biggest companies in the world use Sitecore and WordPress.
Ultimately, when looking for a CMS that’s the right fit for your specific business, you should make a detailed assessment of your strategic objectives, unique requirements, budget, users, and other important factors. Use that to determine which solution is most capable of meeting those needs.
If you still need more help working through this process, read our comprehensive guide to understanding and evaluating the enterprise options for large businesses here.
Would you like these insights straight to your mailbox?
Industry News
25 April, 2023
The Changing Roles of Web Design and Development in the Age of AI
Summary
In the first few months of 2023, generative AI has burst on to the scene and begun to change our relationship with technology forever. Already, there’s plenty of evidence to suggest that people in a wide range of jobs will have to adapt quickly or risk being replaced. In this article, we explore the impact AI is having on the web design and development industry, as well as how businesses, and people, should approach working with this innovative technology.
———
AI tools are nothing new. We’ve all been using them for years, from chatbots to predictive text to voice-controlled assistants like Siri and Alexa. But the recent mainstream adoption of AI tools such as Chat GPT, and the rapid advancement of the technology itself, has caused huge disruption across a number of industries.
Many assumed that people like marketers, software developers, and UX and UI designers would be some of the last ones at risk of having their jobs taken by AI, due to their need for creative skill and use of human emotion. Ironically, these roles have been some of the first to come “under threat” over the past few months.
AI’s speed and efficiency is already forcing us to ask questions about the future of the web design and development industry. With that in mind, one question in particular has dominated discussion online so far this year:
Are our jobs in danger of being taken by AI?
By now, you’re almost certainly aware that AI offers incredible value by accelerating workflows and augmenting skills. Some of the most beneficial use cases lie in:
AI can also devise entire business and marketing strategies, solve complex problems, and even create its own AI-powered applications from scratch. Perhaps most importantly, it can do all these tasks in a matter of seconds, when most of them would take a human several hours, days or even months.
The Latest News and Tools (at the Time of Writing)
Over the past few months, there are more and more AI-powered tools being released on an almost daily basis.
The number of AI tools that have been released recently is staggering, and the capabilities of some of them is truly mind-blowing. Just last month, in March 2023:
It’s both exciting and terrifying to think these highly intelligent tools are just the tip of the AI iceberg. When you consider how common it’s now become to use AI to develop even more advanced AI, it seems that the rate of evolution will only continue to increase exponentially from here.
How is AI Transforming Design and Development?
While these AI tools are extremely impressive, it’s not as straightforward as simply plugging them in and sitting back while they literally do your work for you. It’s possible we may get there one day, but right now we believe we’re a long way off.
These tools are highly sophisticated and intuitive, and their adoption is probably going to change the way we all work forever. However, this should be seen as technology that will augment and enhance people’s ability to do their jobs, or create new jobs entirely, rather than “steal” them away from us.
The current use cases for AI are mostly just ways for you to do your work, much faster and more effectively. This could either be done by automating processes to save time, or by supplementing your existing skill-set with new capabilities with the help of AI. For example, if you wanted to convert your code from one language into multiple languages, you would be able to do this with the help of Chat GPT.
When it comes to user experience (UX) design, one crucial thing AI will always be missing is human empathy, emotion, and understanding. A company looking to create a high-performance website that supports their strategic business goals and engages their target audience will fail if they don’t take into account human understanding and collaboration between them and their web development agency.
Outlining the What and the How is important, but the Why is arguably what drives great UX and UI.
“Design is not just a visual experience, it’s an emotional one. It should make people feel something.”
Nathan Shedroff, Author and Professor of Design Strategy
UX design is a nuanced, collaborative process, focusing on the specific requirements of the business and the specific needs of the target audience. You can save a lot of time using AI to produce a high volume of early conceptual designs or accelerate your copywriting process. But without the human element, none of these things will be authentic or anywhere near the required standard.
Potential Concerns and Risks with AI
Of course, we’ve not even mentioned the rising concerns and risks associated with AI yet. Just last month, over 1,000 technology leaders and influencers signed a petition to halt the development of generative AI until more governance can be introduced to ensure its safety.
There are still some serious grey areas regarding the use of this technology in business as well, from regulations and legal implications to the copyright of creative work like logos and images. These are providing opportunities for a wide range of new forms of cyber crime, phishing, and “deep-fake” imitations which could spiral out of control if left unchecked.
There are also plenty of moral issues surrounding AI that we must consider. For example, what implications will there be for our society if global businesses do begin replacing humans with AI on a large scale?
A key concern is that Generative AI is also having a significant impact on the environment, which is a conversation most people seem to be avoiding for the time being. With the global fight to reduce carbon emissions intensifying, and more businesses placing sustainability at the core of their values, there needs to be some action taken to balance those priorities with the efficiency and speed enabled by AI.
The SoBold Perspective
From our perspective, as a leading design and development agency, we believe that people will always want and need to work with other people. Personable relationships, real-life experience, and critical thinking are all essential parts of our work. In many cases, that’s also what many of our clients value most about our services.
Granted, we’re always looking for innovative new ways to push the boundaries, and AI is an incredible tool that will help us do that. But it won’t replace crucial human characteristics like empathy, emotion, and subjective opinions.
It will, however, help us spend less time on low-value tasks, and more time to focus on building stronger relationships and gaining a deeper understanding of our clients’ needs. That will only result in improving the work we deliver, which is something we’re always striving to achieve.
The Verdict on AI (for Now)
This year will probably be looked back on as a turning point in history when AI was introduced to the world. But this technology won’t replace too many jobs just yet. Instead, it will enhance our ability to work smarter, faster, and more efficiently.
For now, the only people at risk of losing their jobs to AI are those who fail – or refuse – to adapt to this new way of working and embrace the change. Similarly, if you’re using AI because you’re being lazy or complacent, that will also cause problems. You should never use work produced by a generative AI tool without checking its quality and accuracy, and you’ll always need to add a human touch before considering it finished.
On the other hand, if you’re forward-thinking and agile, embracing AI will make you exponentially better at your job. Here at SoBold, we’re personally most excited by how AI has the potential to help us vastly improve the service we deliver for our clients.
Of course, this technology is evolving so fast that it’s difficult to predict where we’ll stand a year from now. We’ll be discussing this, and lots of other important trends, in our new monthly newsletter.
Would you like these insights straight to your mailbox?
Digital Business
2 March, 2023
Harnessing Your New Website’s Full Potential by Taking a Block-Based Approach With WordPress
Did you know you can use a block-based approach with your WordPress website to gain more value from the platform, with significant advantages in flexibility, scalability, and ease-of-use?
In this article, we’ll explain what blocks are, how they work, and how you can use them to build enterprise-grade websites quickly and efficiently, without compromising on quality.
—
WordPress is the most popular content management system (CMS) in the world right now, and it has been for a while. Unfortunately, though, some people still have the wrong impression that it is a CMS that can only be used to build more simple websites that do not have any real complex functionality or integrations, but this couldn’t be further from the truth.
In fact, WordPress is far more intuitive and robust than most realise. The fact that around 45% of all websites online today are built on the platform goes a long way to prove that. WordPress also provides more scalable, agile capabilities that are perfectly suited to building enterprise-grade websites if leveraged in the right way.
There are intelligent – but still very straightforward – ways to use WordPress that can unlock more value from the CMS. If done with the right guidance, this can make WordPress a far better option than the more traditional, rigid approach of building websites.
This is an opportunity most large businesses are currently missing out on. In this article, we’ll show you how using blocks is a more flexible approach that can provide you with a wealth of benefits.
Understanding How Using Blocks In Your Website Backend works
In 2018, WordPress released a new block-based design and editing user interface (UI), known as Gutenberg. Instead of the typical page creation and editing functionality of a CMS, where you’d input text and images into a rich text editor, you can now build your site by creating and using a set of components. Components are blocks of code which have pre-defined style and input types.
Each component is named, to denote what it is from the perspective of the front-end of your site on the web page.
Note: Some agencies only provide a list of block names, but here at SoBold we also provide screenshots of each block so you can see it first. This makes the process much easier and saves you a great deal of time.
Each part of each web page is made up of these components, as pictured below.
![](https://sobold.co.uk/wp-content/uploads/2023/03/Screenshot-1.png)
However, taking a bespoke approach, you can design and construct unique blocks that are entirely your own. Blocks or components can be built for you by your agency so they’re bespoke to you, your style guidelines, your design preferences, and so on. And, when building your site, you can go into your pre-built components and edit things, like changing background colours, adding images, adding text, and so on.
![](https://sobold.co.uk/wp-content/uploads/2023/03/Screenshot-2.png)
This can be set up for you by your agency, so you have everything you need to create, edit, and publish new pages with your pre-built blocks. Anytime you need to create a new page, you just have to pick the appropriate components and place them in the correct position to quickly and easily build the page.
The Business Benefits of Using a Component-Based Approach
Scalability
Scalability is one of the greatest benefits of using these blocks, especially if you are wanting to continue to build out your sitemap and build out the content.
This scalability is where WordPress really shines, enabling simple, rapid, virtually limitless scaling of your website with a high level of accuracy. This is a cost-effective way of growing without having to compromise on the quality of your design.
Flexibility
Blocks provide you with a great deal of flexibility in building, editing, and structuring of pages as well. The ability to customise all your components, along with the intuitive drag and drop functionality, allows you to effortlessly adapt and expand on your website.
Efficiency
Building components, and repurposing them repeatedly across your website, is a highly efficient way of growing your site. It also makes it very difficult to make mistakes or take a wrong turn.
This efficiency of reusing blocks across your website will free up time for you to develop innovative new features, or focus on improving the service and experience you provide your clients.
Ease-of-Use
If you have non-technical members of your team who would benefit from using WordPress, blocks will almost certainly improve the usability of the CMS for those people.
An easier design and editing function helps more members of your team create web pages within clear, pre-set brand guidelines. That’s another aspect that frees up more time and resources to focus on higher value tasks.
If you’re working with a design and development agency, this also makes it much easier for them to be able to train you and enable you to use the platform to manage your site.
Faster Time-to-Market
All this efficiency and ease-of-use will enable you to achieve a faster time-to-market for new web pages, extensions of your site, or even entirely new websites.
That can, in turn, create competitive advantages for your business, particularly if your competitors are working with CMSs that are slower and harder to use.
Whether it’s you or your agency handling this, you can create and publish new web pages quicker than you could with any other approach.
Lower Costs and TCO
As a result of all of the above, you can reduce costs on development and design, and achieve a much better total cost of ownership (TCO) with the WordPress platform.
Something that takes an inexperienced agency days to complete with the classic design approach can be done in hours using bespoke blocks. This drastically reduces development costs and gives you a lower TCO in the long-term.
The Importance of Finding a Capable Agency Partner
As mentioned earlier, bespoke blocks provide you with a proven way to unlock more potential with WordPress and gain greater value from the platform. However, in order to do that, it’s important to find the right agency partner. You’ll need an agency with enterprise-grade expertise and a certain level of skill to guide and support you through this process.
Taking this approach to building WordPress websites is nothing new, but the real value here comes in creating blocks that are completely unique and specific to you, then enabling your team to use those to scale your site.
Many WordPress agencies may lean on the generic block editor. But to get this right, you should push beyond that to find a partner who can educate you on the opportunities of using a bespoke design system to build a high-performance website that’s effortless to manage and edit.
A great partner will also facilitate this for you in a way that ensures you have control, removing the risk of any users making mistakes with the flexibility of this system. You won’t need to worry about the integrity or quality of your site being spoiled because all your components will be built specifically to prevent that.
You’ll gain tremendous value from receiving an intuitive, quality website that you can easily grow at will, but one that’s also managed and supported by an experienced partner. Sticking to these blocks helps you stay within brand guidelines, adhere to best practices, and keep your site consistent.
You then have the choice to manage, edit, and expand your site yourself, or rely on your partner to do it for you quicker, easier, and more efficiently than they would with a traditional CMS.
Making the Most of Your WordPress Platform
Modern businesses today require a powerful, sophisticated CMS that can deliver great websites at scale with enterprise-grade performance. WordPress is a platform that’s built to provide all those qualities and more. Embracing this block-based approach is the most effective and efficient way to achieve that.
With a skilled agency partner to help you maximise the value your business gains from the platform, you’ll quickly realise just how well WordPress can deliver agile, intuitive websites.
If you’re in the process of evaluating platforms to deliver a bespoke web development project, check our comprehensive guide to assessing and selecting the right CMS here
Would you like these insights straight to your mailbox?
UI Design
15 May, 2023
What Does Successful User Interface (UI) Design Look like?
As part of our web design series, we recently explained the process we follow when designing the UX of a website. If you’ve not read that already, it will be useful to go and have a look first before reading this article.
A study by Forrester Research has found that a well-designed UI has the potential to increase your website’s conversion rates by up to a 200% while UX design could raise conversion rates by a staggering 400%.
Whether you’re working with a web design and development agency or an independent designer, this process is equally important. Nailing the UI design process is a crucial step towards producing a website that will maximise engagement with your target audience and help you achieve your business goals.
So, let’s take a detailed look at how to run a successful UI design process.
User Interface (UI) Design at a Glance
The UI design process is the creation of the visual design elements of your website. Think about UI as the way in which you convey your brand’s visual identity and bring your UX to life. The UI is there to facilitate the UX.
How Does the UI Design Process Work?
Earlier in the process, we recommend conducting a visual exploration exercise, using mood boards to gain a clear understanding of how your brand will be conveyed and how your website will look and feel.
That visual exploration phase of the project is a pre-cursor to your UI design, as it creates the visual identity of the website, including use of colour, font, blank space, buttons, and more. Some agencies do this as part of the UI phase, but here at SoBold we like to keep it as its own stand-alone phase. You can learn all about the visual exploration phase and how it works here.
After you’ve been through the UX design process, you’ll have approved a set of wireframes, which give you a blueprint of your website’s structure and flow before anything is built properly.
Once you’ve approved those wireframes, then the visual design created with the mood boards will be applied to bring them to life. This is essentially how you create your UI.
Your agency will typically begin with the design of your website’s homepage. Like each phase previously, you can expect this UI design process to be collaborative. Be prepared to have all the stakeholders available to provide feedback to your agency, and work with them to perfect the design when it’s combined with the wireframes.
Once the homepage is approved, your design will then be applied across all the pages of your site. Again, this is an iterative, collaborative process based on feedback and revisions.
Responsive Design Testing
On completion of the desktop designs, your agency partner will work on designing the site across multiple break-points. To ensure your site is responsive across all the most popular devices, the following break-points should be tested as a minimum:
You’ll then reach the exciting part, where your website is fully designed for you to view, test, and play around with. Once you’re happy with the design across the different break-points, your agency partner will be ready to prepare the design for a development handover.
What Does Effective UI Design Involve?
Good UI design is something that should feel seamless and almost invisible to your visitors when they land on your website. The aesthetics and visual style should be simple and engaging, while not distracting from the UX.
These days, you only have a matter of seconds to make a positive impression that can retain your visitors’ attention, so it’s crucial you don’t over-complicate things. But what differentiates good UI from bad UI in practical terms?
Like with UX design, there are some best practices you can follow to ensure your website has an effective, attractive UI.
Follow these guidelines to create a UI that delivers the desired experience for your visitors and supports your website’s strategic objectives:
Check out our related article for seven helpful tips to ensure your website is designed with great usability here for additional guidance.
The Importance of Accessibility
Accessibility is the practice of making technology as easy to use as possible, and fully accessible to everyone. While web accessibility is largely intended to help people with disabilities gain better usage of technology, it’s also much broader than that.
There are people who have difficulty using certain types of, or aspects of, technology who don’t have a disability. For instance, someone with deteriorating eyesight may find it difficult to read small text on a smartphone screen.
It’s also important to ensure your website is as easy to use as possible for the average person as well, because you should always strive to deliver the best possible UX for all your visitors. Accessibility is a key driver of this.
The Web Content Accessibility Guidelines (WCAG), which are used to define what constitutes good accessibility, lists four key principles of web accessibility that should be followed by all websites.
This means your website must be:
Web accessibility is an important topic, so we’ll talk more about that in a separate article. For now, it’s worth noting that any web design and development agency you work with should consider accessibility a top priority when designing the UI of your website. If they don’t, you should challenge them and ask why not.
Here at SoBold, this is built-in to all our design processes. We believe that all technology should be inclusive and equally available to everyone, regardless of their physical ability, location, personal background, or any other factors.
Some design best practices that we’d recommend you always follow to ensure your website is fully accessible, from a UI design perspective, include:
Preparing Your Website for Development
As you can see, UI design is mainly a case of applying the visual design that was created with the mood boards to your UX wireframes with the agreed flow. Good UI is no more than a clean, simple design that accurately represents your brand identity. While it sounds straightforward, it’s important to remember this is just one phase in the holistic, end-to-end process of web design.
To conclude the design process after the UI is complete, your agency will prepare your site’s designs for development. To learn how this process works, understand what to expect, and ensure your own web development process runs smoothly, read our next article in the series here.
Would you like these insights straight to your mailbox?
UX Design
11 July, 2022
Speak our language: UX/UI Glossary
For designers, it’s almost an impossible task to effectively deliver a project without understanding the joint language of design. This terminology and jargon can often get thrown around in meetings, although it’s good practice to read the room and speak a mutual language it’s good to get a little insight. Below is a glossary of essential UX/UI terms grouped into topics.
General terms
Accessibility
A measure of a web pages usability for a range of people, including people with disabilities.
Design system
A document that houses design components and styles to use across a website or product, ensuring consistency.
Design thinking
The process of creating and executing strategic ideas that solve problems.
Flat design
A form of design that focuses on minimalism using 2D elements and strong colours.
Human-centred design
An approach that finds solutions with a human perspective in every step of the design process.
Information architecture
Or otherwise known as a sitemap, is the structural design of information.
Landing page
A stand-alone page that a person lands on after clicking from a digital location.
Onboarding
A flow that guides the user through a set of instructions such as choosing preferences, product usage and UI elements.
Responsive design
A design and usability process that adjusts content based on the device screen size.
UI Design
This determines how an interface will look and guide the user on how to interact with a product such a colour choices and layout.
Usability
The quality of the start-to-end user experience.
UX Design
The process of determining how a digital product should work based on relevant user research and best practices.
Acronyms
CTA (Call to action)
A graphical component that guides the user through the main flow and encourages them to take a specific action. Normally it will be the element that stands out most on a page.
CWV (core web vitals)
Are three metrics that score a user experience loading a page, those are: how quickly content loads, how quickly a browser loads the webpage and how unstable the content is as it loads.
GA (Google Analytics)
A web analytics service offered by Google that tracks and reports web traffic.
KPI (Key performance indicators)
A Performance measurement approach based on certain metrics over a certain time period.
MVP (minimum viable product)
A version of a product that is released with just enough features that deliver on the initial user needs to then improve and develop further.
PM (Project manager)
A person that leads a team in order to achieve all the project goals in a set of timelines.
SVG (Scalable Vector Graphic)
A two-dimensional vector-based graphical element that is scalable and widely supported across the web.
SWOT (strengths, weaknesses, opportunities and threats)
A marketing tool that identities assess your business and analyse your competitors.
Design Process
A/B testing
A UX method that involves showing two versions of a specific page or product to see which one works better.
Card sorting
A technique that can be used by both UX designers and users that help determine the information architecture of the product based on logical ordering.
Cluster mapping
In other words, an affinity diagram is for sorting UX user findings into organised sets to lay down the foundations for desirable features.
Competitor analysis
A research method that shows strategic insights into a competitor’s features, functions and even visual positioning.
Eyetracking
A study that allows researchers to evaluate the movements of a particular user when they are using a product.
Focus group
Typically a researcher will talk to a group of people to find out opinions and generate ideas on the product or service.
F shaped pattern
Is a layout designed to guide the user’s eye to specific information based on human behaviour.
Mockup
A visual representation of a product in an environment could be a concept or the finished product.
Moodboard/style scape
Is a collection of visual inspiration gathered from an initial concept to visually communicate an idea.
Prototype
Is an early version of a product that is simplified to test main user journeys and functionalities.
Sketch
There will always be a place for pen and paper. At this stage in the prototyping process, a researcher can quickly come up with design solutions and compare them to determine the best one.
Storyboard
A visual way of communicating the user journey.
Usability testing
An approach that is done typically throughout the whole design process, ensuring that the product has ease of use and matches the user’s requirements.
User flows
A flow that represents a users task from an entry point to a desirable end one.
User interview
A one-on-one chat that can gather information for a user persona and insight on their behavioural habits on a product and or service.
User journey
Like the user flow, a user journey is a route that maps out their journey from beginning to end, the difference is that a journey includes emotions and behavioural choices.
User Stories
A narrative-based resource that sums up the patterns of how they interact with the product, focusing on motivations and frustrations.
Wireframes
A low-fidelity design that focuses just on structure and layout without clouding the mind with visuals. Its purpose is to ensure the interaction between user and interface is solid.
Design elements
Breadcrumbs
A layered component that allows users to navigate through multi-level pages.
Contrast Colour
Ensuring there is enough visibility between two colours to the layer or text is legible and ideally meets WCAG standards.
Grid
Is a layout system with rows and columns, making it easier for designers and developers, also for making clean and symmetrical interfaces for users.
Layout
The order of certain content such as text and images are laid out on a page.
Navigation
An organised hierarchy of information allows the user to find the information they are looking for.
Typography
Typeface or Font. there is a difference. A Font is a weight or variation of a typeface and typography is the arrangement of those styles to ensure it’s legible and appealing.
White space
Or negative space is the strategic positioning of elements on a page so they have room to breathe and for people to absorb content.
Widget
A self-contained design component that has certain functionality.