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? 

As mentioned in our related article, UI design is typically the fourth phase of the end-to-end process of web design.

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:

• 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.

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: 

• 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.

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:

1. Perceivable
2. Operable
3. Understandable
4. Robust.

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: 

• 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.

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.

SoBold is pleased to announce that they have renewed their contract with Transport for London to manage and support a bespoke Cookie Consent Management Tool for use across TfL’s portfolio of websites which includes 30 domains.

SoBold recently became only the 3rd Platinum Certified Cookiebot Partner in the UK having been an authorised Reseller of Cookiebot since the new General Data Protection Regulation (GDPR) came into place on 24 May 2018.

Transport for London’s desire to extend its relationship with SoBold for a further year, highlights the importance of the work SoBold are doing to manage its bespoke Cookie Consent Management solution across its portfolio of website which have missions of visitors per month. The contract renewal cements SoBold’s position as one of the leading Cookiebot resellers. 

For more information on SoBold’s work to date with Transport for London, see their case study.

SoBold Technical Director, Sam Phillips said:

It is great to see Transport for London renew its cookie management contract with SoBold for a fifth successive year. Over the last year we have continued to evolve their bespoke solution adding in full IAB TCF support as well updating the design to reflect TFL’s updated guidelines. We’re looking forward to continuing to support TfL over the next 12 months.

A content management system (CMS) is a type of software-based technology, used to build and manage websites and other digital products. A CMS allows you to easily create, edit, and publish digital content across a range of online channels, such as the web and mobile. This is the most common technology platform used by businesses to build assets such as websites, with almost two thirds (63%) of all sites on the Internet now delivered via a CMS. 

With that in mind, it’s clear why most businesses today are heavily reliant on this technology. Whether you’re developing something new from scratch or switching from an old platform to a new one, selecting your CMS is an extremely important decision with a lot riding on it. But with such a vast landscape of digital solutions to navigate, and so many different options available, finding the right CMS can be overwhelming. 

To help you through the process of finding the right CMS, this article compares four of the most common options for large businesses. We’ve also listed their pros and cons, and provided some additional considerations that will be useful for you to think about along the way.

First, the Criteria

A CMS can be used to build various digital products and assets, from websites and mobile apps to bespoke systems like staff portals and internal training platforms. Particularly in large businesses, it’s common to need to create some bespoke features, functionality, or digital processes as well. Whatever it is you need, you should aim to find a platform that’s capable of delivering on your specific requirements. 

Here are some points to include in your criteria when researching the options for your CMS:

• Bespoke development capabilities
• Easy integration with existing systems and legacy technology 
• Scalability and performance in peak traffic 
• Enterprise-grade security 
• Quick and easy editing capabilities 

Now we’ve covered what a CMS should be able to do when you start implementing it within your business, let’s look at the different platforms available to you.

Option 1 – Drupal 

The Pros: 

• Drupal is a highly secure platform, which is a crucial quality for a CMS to have. 
• It’s very intuitive for users who have coding experience or advanced content management skills. 
• It has a great community of users surrounding it, which contributes a lot of value and is able to provide support.
• It also has hundreds of unique thematic options to choose from when designing your site. 

The Cons: 

• Drupal can be hard to work with for non-technical users, as it lacks simplicity and provides limited customisation.
• It can take a long time to get up and running, which means your costs will be quite high if you work with an agency partner.
• It’s also worth noting that the version of Drupal most businesses use now (Drupal 7) will be reaching end-of-life soon.

Option 2 – Sitecore 

The Pros: 

• Sitecore is purpose-built for large businesses, guaranteeing an enterprise-grade experience. 
• Sitecore is a robust CMS with a high level of in-built security.
• It actually provides a fully-managed ‘digital experience platform’ that comes with more capabilities than the average CMS. 
• It also offers great personalisation and excellent pre-built features. 

The Cons: 

• Sitecore is an expensive option, even if you have a large budget to work with.
• It requires you to procure licenses to begin using it, and also restricts certain capabilities unless you progress to higher tiers of licenses. 
• It typically runs with hierarchical, complex workflows that might be frustrating for small or agile teams. 

Option 3 – Umbraco

The Pros: 

• Umbraco’s scalability makes it very suitable for large businesses.
• It’s free to use and open-source, with an active community of users supporting it.
• It allows you to manage a high volume of pages easily and efficiently.
• It’s another platform that comes with a high level of in-built security.

The Cons: 

• It can be difficult to work with for the average user. As with Drupal, Umbraco is mostly suitable for more technical users who have coding skills or some development experience.
• This complexity again increases the likelihood of higher costs with your agency partner (if you go that route). 
• It’s common for sites built with Umbraco to be reported as slow, for both back-end editing and the front-end user experience. 

Option 4 – WordPress 

The Pros: 

• WordPress is extremely scalable and dynamic. It can easily grow and evolve as your business grows, continuing to meet your changing needs.
• It’s renowned for its ease-of-use. Because of this, it enables you to deliver your projects quickly and efficiently.
• It’s highly customisable, making it ideal for bespoke development. With the right knowledge and skills, you can build almost anything with WordPress. 
• It also typically comes with a very low total cost of ownership (TCO). You won’t need to add on new features or capabilities, nor pay for costly extra work to handle platform upgrades or updates.

The Cons: 

• If you apply too many plug-ins, WordPress sites can slow down and experience dips in performance, but a good agency partner should encourage you to minimise the use of these.
• Some still see WordPress as an unprofessional platform used mostly for small blogs, but that old myth couldn’t be further from the truth today.
• WordPress is a secure platform, but plug-ins can create vulnerabilities if they’re not tested well or taken from untrusted sources. Again, a good agency partner should guide you with this to reduce the risk and prevent any issues.

Interested in learning more? Check out our related article here, where we explore the benefits of WordPress for large businesses in greater detail. 

A Brief Word on Agency Partners 

As touched on earlier, you’ll also need to consider whether you want to take the approach of working with an agency partner or not. For large businesses, most development projects tend to involve complex requirements that are almost impossible to manage without the support of an experienced agency. 

An agency partner can provide you with strategic guidance, platform-specific skills and tools, and expertise to help you gain as much value from the technology as possible. While it’s perfectly valid to decide to implement a new CMS without an agency working alongside you, doing so will probably make things a lot more challenging, a lot more expensive, or possibly both.

All the platforms mentioned here have their benefits. But they’ll each be significantly easier to use, and will deliver far greater return on investment (ROI), if you have an experienced partner involved. 

How to Choose the Best Option for Your Business  

Keep in mind that every business is unique and every web development project is different. These platforms are all good options in their own way, but a solution that works well for the majority of organisations might not be the right choice for you. 

Whether you’re building a bespoke website or migrating an existing site to a new platform, you have to be thorough in your assessment and make the right choice for your specific business.

To really understand the pros and cons of these options, you first have to be clear about exactly what you need and what you’re aiming to achieve. You’ll then need to determine which solution best aligns with your requirements, budget, and strategic objectives.

If you’re in the process of assessing solutions to help you deliver a bespoke development project, read our comprehensive guide to evaluating and selecting the right platform here.

Summary

In this article, we’ll outline the end-to-end steps of what takes place in a thorough user experience (UX) and user interface (UI) web design process and discuss what modern web design requires to be successful.

—

You may have read our in-depth guide to creating a brief for a web design and development project. A brief can be used to capture all your ideas and requirements before discussing your project with any web design and development agencies. 

Once you’ve completed your brief, and evaluated your options for agency partners, you’ll be ready to launch into your website project. 

An end-to-end website project is typically organised into phases, which will usually be structured as follows: 

1. Design
2. Development
3. Quality Assurance Testing
4. Migration and Launch.

We’ve provided a detailed breakdown of these phases in a recent series of articles. This series is intended to give you a clear understanding of the full end-to-end process involved when working with an agency to design and develop a website. This will help you remove any apprehension heading into this kind of project and set you up for success.

The Current State of Web Design

“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs, Co-Founder and former CEO of Apple.

While web design does focus on the visual aspects of the site, there’s a lot more to it than just the aesthetic elements like colour schemes and typography. 

Web design is a complex blend of branding, user experience (UX) design, user interface (UI) design, graphic design, content creation, layout and structure, accessibility, and much more.

The design of your website needs to be visually attractive but, more importantly, it also needs to be simple and easy-to-use. Your website needs to find the perfect balance between supporting your strategic objectives and serving your clients with a seamless experience. Of course, that’s much easier said than done, which is why it’s so important to find an experienced partner you can trust to guide you through the process. 

Outlining the Web Design Process 

Phase 1 – Research and Planning

The phase that underpins  EVERYTHING!

A good agency will have absorbed everything in your project brief. They should also have worked hard to understand your perspective and your requirements from your website, before you’ve even agreed to work together. 

Once you’re preparing to launch the project, the research and planning phase will then go beyond that initial information gathering exercise. 

The objective of this phase is to define the full scope of the website, including its design, its features and functionality, its content, and everything else involved. 

Your site will be discussed in extensive detail, and then research will be conducted into some key areas that will inform your design and development, such as:

• Strategy
• Website Data 
• Target Audience
• Industry Landscape
• Competitors.

Whether you’re making small updates to an existing design or completely rebranding your business, it’s equally important to use this research to inform every decision you make. That’s because every element of your site’s design must be made to support your business goals and serve your target audience with a great user experience (UX). 

This research and planning phase is essential in enabling you and your agency partner to do that. 

Phase 2 – Visual Exploration

This exploratory phase involves defining the most appropriate and effective visual direction to take with your site. 

The main tool used to help determine the right visual identity for your website is a set of mood boards. These are a visual compilation of different options for colour, typography, structure, images, and other visual components that are used to tell your brand’s story through your website’s design. 

A good agency partner will usually present around three mood boards to help shape the direction, then collaborate with you to narrow it down to one final version. 

Visual exploration, like most processes within web design and development, will be collaborative and iterative. You’ll be presented with ideas by your agency partner, then given the chance to provide feedback across several rounds of revisions. 

Phase 3 – User Experience (UX) Design

The UX design process is the phase in which you work with your agency’s UX specialist to create a blueprint of the website functionality. 

This involves creating wireframes (either low-fidelity or high fidelity) that help you visualise the design and outline your website visitors’ flow through the pages into your main calls-to-action. This is the way the website’s design works strategically to drive outcomes that align with your business goals.

This phase takes place before working on the site’s visual design to ensure the two separate aspects complement each other. 

Phase 4 – User Interface (UI) Design

From there, your user interface (UI) will be designed. The styles, fonts, and look and feel of the site from the mood boards will be applied to the wireframes. 

Your agency will likely present you with a design for your homepage before moving on to the rest of the site. This will typically be done on a desktop screen size, but it can be done on mobile if you want to take a mobile-first approach. Once this is complete, it will then be designed across the relevant breakpoints.

After completing this process, your agency partner will be ready to enter into developing your website.

Making Complex Processes Simple

As technology continues to become more advanced, more and more of our daily lives now take place in a digital-first context. 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. 

In order to succeed, your website’s design requires careful planning, research, and a strategic approach if it hopes to meet the demands of the modern client.

Working with a specialist design and development agency is a proven approach to ensuring you gain a website that meets your requirements and delivers on the expectations of your target audience. 

Completing a process like the one outlined in this article will enable you to design a website that can become your clients’ go-to online source when they have a need. 

As mentioned earlier, we’ve provided a step-by-step guide to each of these phases to make the process even easier for you. 

To learn how to easily navigate the research and planning phase of a web design and development project, read our next article here.

Cyber security and data protection should be top priorities for your business right now. Of course, this is particularly important for large businesses, and those in strictly regulated industries like financial services, where the outcome of a cyber attack or data breach can be catastrophic. 

As these security concerns continue to intensify, you must be increasingly careful and vigilant about the technology solutions you use. You should also take more proactive steps to ensure everything in your tech stack is built and managed in a way that minimises your risks.

When it comes to WordPress, there’s a common misconception that the platform isn’t secure enough for large businesses. This misunderstanding tends to come from the fact that it’s free-to-use, so it was originally more popular among smaller independent businesses and B2C blogs. 

Today, however, WordPress is the world’s most popular content management system (CMS), and for good reason. Considering a significant percentage of that user base includes global enterprises, you’d think such popularity would be enough proof that it’s a secure platform. 

On the contrary, large businesses still ask us on a regular basis, “Is WordPress secure enough for us?” 

Is WordPress Secure? 

The answer to that question is, yes, WordPress is a secure, stable platform, even in its “out-of-the-box” state. WordPress’s core code is thoroughly tested and quality-checked by a team of security experts continuously. Not only that, but the same team regularly releases security updates and reinforces any potential weaknesses before they can be capitalised on by cyber criminals.

In fact, the speed at which security updates are implemented in WordPress is arguably the fastest in the world today when compared with other CMSs.

Additionally, WordPress is open-source software, meaning all its code is available to the public. Users are constantly suggesting changes and updates, often to fix bugs in the code and minimise opportunities for cyber criminals. This keeps the platform safe and secure for everyone else. 

But while WordPress does have the ongoing support of some of the most talented and devoted developers in the world, it’s not immune to security vulnerabilities. No software is, unfortunately. 

That’s why it’s important to be aware of, and work with, some fundamental best practices for security. Listed below are some steps you can take to further strengthen the security of the WordPress CMS.

Best Practices to Strengthen WordPress Security 

1 – Secure Hosting

The hosting service you choose for your platform will determine how secure and well protected your data will be. 

It goes without saying that WordPress should be hosted in a secure environment, overseen by an experienced provider who prioritises security within their services. 

Some things you should consider essential for a hosting provider include: 

• A fully-managed service with 24/7 support
• Automated monitoring and alerts
• Back-up and disaster recovery
• 99.99% up-time
• 100% pass-rate for data centre audits.

Before choosing your hosting provider, do plenty of research to ensure they’re able to provide these measures. Most businesses will work with a development agency partner for WordPress, and that agency should be able to help you with this process.

2 – Back-Up and Disaster Recovery 

Following on from the previous point, any good hosting provider should also offer back-up and disaster recovery services. These are like safety nets that will allow you to protect, save, and recover all your data in the event of any losses. 

3 – Be Careful with Plugins 

Plugins are a great way to enhance the WordPress platform with new capabilities and features. But you should only ever use plugins from reputable, credible sources, otherwise you could experience security problems.

It’s also important to keep all your plugins regularly tested, maintained, and updated. Again, this is an area where a WordPress agency partner will help you.

4 – Always Keep Your Platform Updated 

When you’ve built a website with WordPress, you’ll often receive software updates from the platform. Any time this happens, it’s because a bug has been fixed or some improvements have been made to the software.

Keeping up with these updates is so important from a security perspective, because they’re designed to keep your site secure. By letting your site run on an outdated version of the platform, you leave yourself at risk of a known issue being exploited by a cyber criminal or some malware. 

This is another thing that a good agency partner should take care of for you, so you don’t need to worry about keeping your platform up-to-date.

5 – Never Auto-Update Your Plugins 

You have the option to enable auto-updates within your WordPress platform. While this may seem like an easy way to keep your CMS up-to-date, doing so can create technical issues and security risks that simply aren’t worth the convenience. 

Each plugin you use will have its own button for you to turn auto-updates on or off. Any good agency will advise you to turn those auto-updates off and instead opt for a more secure approach to your updates, to maintain the resilience of your platform. 

6 – Use Security-Specific Plugins

Another way to reinforce the security of WordPress is by implementing security-specific plugins like WordFence, Sucuri, or Defender Pro. 

These handy tools will do a lot of the hard work for you, monitoring your platform and spotting potential vulnerabilities so you can fix them before they’re allowed to have any negative impact.

7 – Enable SSL 

A secure sockets layer (SSL) is a protocol which encrypts the transfer of data between your website and your users’ browsers. Enabling SSL makes it more difficult for cyber criminals to steal or compromise data online. Don’t worry, though, as this will be taken care of by your hosting provider as a standard practice. 

8 – Avoid Tools that Open Direct Access to Your Site Database from the Dashboard 

Some tools and plugins will enable direct access to your site’s database from within your CMS dashboard. While this can make certain aspects of website management easier for you, it also creates security vulnerabilities. This is something you should always avoid, because these additions are often severe security risks.

9 – Encourage Your Users to be Mindful of Security 

The biggest security risks, and many opportunities for cyber criminals, come from unsafe user behaviour, poor platform maintenance, and badly built sites.  

Your behaviour, and the behaviour of your end-users – and your agency – should always be mindful of security. If it’s not, sooner or later you’ll encounter problems. Some security best practices you can introduce include making strong passwords compulsory for all users and implementing measures like two-factor authentication.

10 – Find a Trustworthy Agency Partner to Support You 

We understand that following all these steps sounds like a lot of work. Of course, when you’ve got your own job to focus on, the last thing you need is to be spending time struggling through complex website security processes.  

That’s why it’s so valuable to find a reliable, trustworthy agency partner when using WordPress to build and manage websites. A good agency will ensure everything is secure and up-to-date for you, so you can spend more time providing outstanding services and experiences to your customers.

It’s always worth taking time to find an experienced agency with a strong track record of building robust, secure sites, to give you the peace of mind you deserve. That means they should handle your secure architecture, testing, monitoring, updates, and ongoing support for you as part of their services.

Being Truly Secure is an Ongoing Process 

When you’re selecting a content management system (CMS) to build critical digital assets like your website, security must be a top priority. It’s for that very reason more and more large businesses are looking to WordPress as their platform of choice. 

However, it’s equally important to choose an agency you can trust, and one that has these security best practices incorporated into their approach. This doesn’t just stop at the delivery of your website, either. True security is a constant ongoing process, and your agency partner should help you through that. 

Following the tips listed here will give you everything you need to build a resilient, secure website on WordPress, suitable for the enterprise. 

Interested in learning more about WordPress? Discover how a global enterprise achieved game-changing results by using WordPress to build a secure, innovative, bespoke solution. Check out the story of RedeWire from Rede Partners LLP here.