Community

Integrations

Conferences

Development

Agency

Hack Projects

Design

Technical Account Manager

Andy Mardell

For over <a href="https://www.saasacademy.com/blog/saas-statistics" target="_blank" rel="noopener noreferrer">80% of businesses</a>, a SaaS system has become a core part of their day-to-day operations, with larger organisations of <a href="https://financesonline.com/saas-software-statistics/" target="_blank" rel="noopener noreferrer">10,000+ employees using an average of 447</a> SaaS systems within their businesses. This can quickly become an admin nightmare, a data disaster, and a costly expense. Check out the top time and money savings perks below.

Nobody likes tedious data admin, and managing data stored across multiple SaaS systems can be a chore to keep on top of and maintain. This could be product data stored in various systems, images and videos stored in a digital asset management system like <a href="https://sidigital.co/services/integrate/asset-management-software">Bynder</a>, and customer data stored somewhere else like <a href="https://sidigital.co/services/integrate/salesforce">Salesforce</a> or HubSpot. It can quickly become messy, clunky, and confusing.By automating tasks like data entry, invoicing, and reporting with an advanced SaaS integration, you can reduce the need for manual work, freeing up team members across different areas of the business so they can focus on more important things, like business growth and development. In turn, this also cuts back on labour costs, freeing up budget to be spent elsewhere.

Less manual labour = lower labour costs

It might not seem like a direct benefit for you, but integrating can improve your customers’ user experience when they’re browsing your website, portal, or app. We can dovetail various smaller integrations into your wider infrastructure, like ElasticSearch, which can help to bring users the data they’re searching for quicker. In doing so, your users are able to access information and products quicker, meaning there’s less time spent supporting customers behind the scenes.<a href="https://sidigital.co/work/harwin">We’ve done it for clients like </a><a href="https://sidigital.co/work/harwin">Harwin</a>, and they’ve seen some outstanding results. For example, thanks to the ElasticSearch database with Salesforce, we’re able to return filtered results of their 7,000+ products almost instantly.

Speedier user experiences

With so many SaaS systems available, it’s highly likely your business has the same data in multiple places. When this data needs updating, it has to be done manually, which often leads to mistakes that cost time and money.Integrating your SaaS systems helps to centralise all your data into one place, like Salesforce. So if there are updates, you only need to make the change once. This then synchronises across all the various different places the data is used, like your website. By only updating the data once, you massively reduce the risk of human error. It also means you know the data is always consistent and up-to-date across the board, so there shouldn’t be any discrepancies in data across different platforms.

Reduce costly errors

Did you know that <a href="https://zylo.com/blog/reducing-saas-license-waste/" target="_blank" rel="noopener noreferrer">over 50% of SaaS licences go unused</a> because of duplicated functionality? This costs businesses on average about £15m+ each year. A lot of SaaS systems provide similar tools and services, and with disjointed SaaS systems, you’re more than likely duplicating functionality, so you’ll essentially be paying twice (or more) for services that do the same thing. For example, both Salesforce and Sage CRM offer marketing automations and sales forecasting. But because they’re not talking to one another, you could be stuck using both systems.Integrating your SaaS systems means you’ll no longer need to juggle multiple platforms because you can consolidate some of them into one, which then reduces your software costs.There are more benefits here too. Beyond cost savings, you’ll also be cutting back on the risk of data entry errors and streamlining the tools your team needs to use to do their jobs.

Fewer software licences

Sign up for all the latest news and updates from Si digital.

Get the latest news and updates

When it comes to business decision making, time can be a key factor in ensuring the decision is relevant and effective. Sometimes, these decisions are based on data, so accessing up-to-date data quickly and efficiently can be make or break when it comes to decision making.With a fully integrated SaaS system, you’ll be able to access real-time data as it’s shared between each system, giving you the data insights you need—fast. This results in quicker, smarter decision-making, and fewer costly misjudgements.

Faster decision making

Many CRM SaaS systems like HubSpot, Salesforce, and Monday.com can play a key role in your customers’ experience when dealing with your business, even if you think they don’t realise it.Disjointed SaaS systems often lead to an equally disjointed customer experience. Integrating your SaaS enterprise systems can help to improve this by streamlining support and communications, and simplifying and speeding up invoicing. Your customers will undoubtedly see the benefits, helping to retain your customers and reduce churn.

Better customer retention

While the upfront cost of integrating your SaaS enterprise systems might seem daunting, it pays for itself in benefits by boosting efficiency, reducing human error, and optimising resources. And all of this gives you and your team back the time to focus on growing the business and building on relationships with your existing customers and clients.At Si digital, when we integrate your SaaS systems, we use our <a href="https://sidigital.co/faraday">Faraday™ framework</a> to define tangible goals and KPIs that align with your business to help you maximise efficiency and effectiveness across the board.If you want to up your integration game, <a href="https://sidigital.co/services/integrate">check out our services</a> to see how we can help. Or <a href="https://sidigital.co/contact">get in touch</a> if you’re ready to start a conversation.

The bottom line

It’s estimated that <a href="http://pages.bettercloud.com/rs/719-KZY-706/images/2020_StateofSaaSOpsReport.pdf?mkt_tok=NzE5LUtaWS03MDYAAAF8LQdmoC7u54xbqxNwp0au4Zk7SiYaaqq2vupXFxCvaP5vY8gSQtlGFsUsRI8oj5Fl2m5PwIZUUAlzVZL_-hUEQ2RdNqgEzDAmZA5bZtowS_v-zMs" target="_blank" rel="noopener noreferrer">85% of business apps will be SaaS-based</a> by the end of 2025, so keeping all your data, information, and details in check could become a more time-consuming headache very soon. So it’s ironic that <a href="http://pages.bettercloud.com/rs/719-KZY-706/images/2020_StateofSaaSOpsReport.pdf?mkt_tok=NzE5LUtaWS03MDYAAAF8LQdmoC7u54xbqxNwp0au4Zk7SiYaaqq2vupXFxCvaP5vY8gSQtlGFsUsRI8oj5Fl2m5PwIZUUAlzVZL_-hUEQ2RdNqgEzDAmZA5bZtowS_v-zMs" target="_blank" rel="noopener noreferrer">54% of businesses</a> introduce SaaS systems to help improve productivity, but the more systems they add, the less productive they become. That’s why integrating your SaaS enterprise software could be the solution to reducing admin, cutting costs, and increasing productivity across the board. Goodbye admin, hello business growth.We’ve worked with various clients over the years to help them integrate their third-party SaaS services and CRMs into their business’s website, app, or portal. And we’ve seen just how beneficial it can be for the client firsthand.

A growing trend 

When it comes to deciding how to integrate, there are three options: out-of-the-box integrations that use the SaaS platform’s pre-built features, a standard API integration, or an advanced bespoke integration. Let’s break them down…

Types of integrations

An out-of-the-box integration essentially takes a SaaS platform’s pre-built features and connects it with your website. This can be a relatively straightforward task that’s easy to set up and could be implemented by internal teams or by working with some agencies. But there are some drawbacks, including:<ul class="list-bullet"><li value=1>Limited data handling</li><li value=2>Poor user experience</li><li value=3>Reduced security</li><li value=4>Single-direction data transfer</li><li value=5>Limited customisation</li></ul>While this might seem like a quick win, the limitations can become tedious and challenging, preventing your business from really utilising the full potential of your SaaS platform. And you could still be left with lots of backend admin and housekeeping, so you might not even save your company much time.

Out-of-the-box integration

Most SaaS enterprise software products will provide their own APIs that users can use to connect their SaaS platform with their website, portal, or app. Compared to an out-of-the-box integration, this can have benefits including:<ul class="list-bullet"><li value=1>Better data handling</li><li value=2>Improved user experience</li><li value=3>Tighter security</li><li value=4>Improved customisation</li></ul>But these integrations still have some serious drawbacks. For example, they’re very complex to set up, so your team will need a good level of technical knowledge about the API and platform you’re using. You may even need a specialist to help you out. And it gets even more complex if your business needs the API to connect to other third-party systems. So this can quickly become a complicated and time-consuming task that still won’t offer you the best utilisation of your SaaS platform.

Standard API integration

If you want to make full use of your SaaS platform, beyond standard form handling or CRM syncing, an advanced bespoke integration is the way to go. Using a completely custom API, you can connect more than just your core SaaS software to your website—you can also connect with Enterprise Resource Planning (ERP) software, Product Information Management (PIM) software, Digital Asset Management (DAM) software and custom APIs, creating a central, automated hub for all your data that then powers your websites, apps, portals and internal tools. This comes with countless time-saving and cost-saving benefits:<ul class="list-bullet"><li value=1>Flexibility – supports any custom use case</li><li value=2>Centralised – use your main SaaS system, like Salesforce, as a single source of truth for all your data across different systems</li><li value=3>Real-time – enables real-time, personalised updates</li><li value=4>Automated – enables the use of automation tools that are built into the SaaS system</li><li value=5>Complex relationships – supports complex object relationships and workflows</li><li value=6>Scalable – can be scaled up and down as your business grows and changes</li></ul>Advanced bespoke integrations are highly complex because they’re built around your business’s unique needs, so they need some level of ongoing maintenance to ensure the integration works efficiently and correctly all the time, but the benefits speak for themselves, especially when it comes to cutting back on tedious admin so you can focus on business growth.

Advanced bespoke integrations

Here at Si digital, we believe that if you pay for a SaaS service like Salesforce or HubSpot, you should be able to utilise every aspect of it, so fully bespoke integrations with your website, app, or portal are the way to go. But integrating your SaaS enterprise software can be a daunting task.We’ve been working with our clients for the last two decades to build them bespoke websites with complex integrations, and we use our <a href="http://sidigital.co/faraday">Faraday™ framework</a> to work efficiently and effectively. Faraday™ allows us to bring our clients solutions that help them to meet their internal business targets, KPIs, and goals—so they know we’re all working in the same direction.When it comes to <a href="https://sidigital.co/services/integrate">bespoke integrations</a>, we’ve built our own custom Si Middleware. It works a little like a connection hub for your computer. We use it as a central point to connect all your business’s SaaS systems to your website, app, and portal, so data can flow quickly and easily between your various systems and platforms. Our Si Middleware is also scalable and flexible, so if your business finds it needs to use a new SaaS system, we can easily connect it up with everything else. Check out the diagram below to see how all the different elements of our Si Middleware work.

How advanced bespoke integrations work

One of our biggest SaaS successes has been our <a href="https://sidigital.co/work/harwin">work with Harwin</a>, where we not only designed and built them a new website but also integrated their Salesforce system with their new website.Beyond the standard integration functionality, we built a bespoke integration that synchronises over 4,000+ products with their CRM and website, as well as integrating with other SaaS systems like Bynder (DAM), TraceParts (3D CAD models) and SnapMagic (PCB Footprints). And the benefits have been outstanding.

Results

The integration has also had benefits internally. It’s dramatically reduced the amount of admin the team has to carry out to update product details, allowing them to focus on growing their business and following up on valuable leads. Harwin proves exactly how a seamless Salesforce integration can help to drive business growth.Read more about <a href="https://sidigital.co/work/harwin">how we helped Harwin here</a>.If integrating your SaaS systems sounds like something your business could benefit from, you can <a href="https://sidigital.co/services/integrate">find out more about how we can help here</a>, or <a href="http://sidigital.co/contact">get in touch to book in a consultation</a>.

Have a read of some of our other articles

What is a SaaS enterprise system integration and how can it drive business growth?

Founder & Managing Director

Steve Piper

Compatibility is probably one of the most common issues when it comes to integrating your SaaS system, especially if you’re trying to integrate with other third-party software. So, compatibility problems like mismatched naming conventions, syncing issues, or poor lead segmentation can create endless headaches or require lots of fiddly admin to resolve. Some SaaS systems, like Salesforce, can also have problems connecting with some older versions of Microsoft Outlook.An advanced bespoke integration can help mitigate compatibility issues because you have complete control of where the data points to and from. And there’s also functionality to manually—as well as automatically—synchronise data, so data transfer is seamless.

1. Compatibility

Depending on the SaaS enterprise software you’re using, accessing API documentation can be tricky, and then trying to find the details you need within that can be time-consuming. This can cause lengthy delays, bugs, and other technical issues. This can be even more complex if you’re trying to share data between different SaaS systems, for example, HubSpot and Salesforce.When we build our advanced bespoke integrations, we use our custom Si Middleware to facilitate the connections, so we don’t need to track down API documentation, and more importantly, our clients don’t need to worry about finding it either. Our Si Middleware is built and maintained by us, so we know it like the back of our hand, so if there are any issues, we can quickly identify and fix them without having to refer to complex documentation.

2. API Documentation

As your business grows and expands, you’ll more than likely come to rely on your SaaS software more and more. So, your integration needs to scale and adapt to suit. This can bring with it some very technical challenges, and often out-of-the-box API integrations limit what you can do, or your agency will struggle to push beyond the boundaries of what they’re already using. This leaves you with one option: advanced bespoke integration.With an advanced bespoke integration, you can introduce or remove SaaS system connections, so as your business grows, you can keep your data flowing smoothly between your various SaaS solutions. And, if you find the business needs to move to a different SaaS system, that can easily be connected too. So you won’t need to go through the pain of a full rebuild, or spend more of your marketing budget on rebuilding parts of your existing system.

3. Scalability

When it comes to data capture via forms, out-of-the-box integration solutions seem like a great option, but what about security? Data that’s collected from forms using out-of-the-box integrations can easily be manipulated and modified, which creates all sorts of data security issues for businesses, especially when it comes to GDPR. These standardised forms are also susceptible to spam bots, meaning your database will quickly fill up with useless data.An advanced integration improves security by allowing for secure authentication and spam protection, so you won’t have to spend hours sifting through data to ensure it’s valid. You’ll also know the data is secure and safe. One less thing to worry about.

4. Security

In terms of performance, fetching and serving data is a key area where your integration needs to be quick and seamless. Relying on an out-of-the-box integration means you’re also relying on a third-party API, which can be slow at getting the data you and your users need to the right places.We’ve built our Si Middleware to handle all of this for us with our advanced bespoke integrations. We’ve streamlined the API so it’ll only be using what it needs, so data transfer is rapid with little to no delay. This has a huge benefit for both your business and your users. For you, it means the data you update elsewhere is virtually instantly updated everywhere else, and for your users it means they’re always seeing the latest, most up-to-date information available.

5. Performance

Maintaining your SaaS integrations is vital to ensuring it works at peak performance, is keeping data secure, and is aligning with any changes the SaaS system implements. But maintaining your integration can be complicated and time-consuming, especially when you’re dealing with a standard API provided by the SaaS developer.Here at Si digital, we provide ongoing maintenance and support to ensure your business’s SaaS integration with your website, portal, or app is always up-to-date and running efficiently. Thanks to our bespoke Si Middleware, this is mostly under our control, so we keep on top of maintenance for you regularly. Find out more about our <a href="https://sidigital.co/services/support/retained">ongoing support services here</a>.

6. Maintenance

When it comes to advanced bespoke SaaS integrations, we know it can be complex, and it has to be beneficial to your business’s growth plans. So we take a consultative approach to bringing your integration to life. Using our <a href="http://sidigital.co/faraday">Faraday™ framework</a>, we use our two decades of expertise to bring you a solution that aligns with your business goals and KPIs.We’ve worked with <a href="http://sidigital.co/work/harwin">clients like Harwin</a> and Norbain so they can maximise their SaaS software throughout their business to improve internal processes, reduce admin, and cut costs, leaving them with more time to focus on business development, new products, and lead generation.If you want to capitalise on your SaaS enterprise software integration, you can <a href="https://sidigital.co/services/integrate">find out more about how we can help here</a>, or <a href="http://sidigital.co/contact">get in touch to book a consultation</a>.

How we can help your business solve these challenges

The top 6 SaaS integration challenges and how to solve them

How integrating your SaaS systems can save you time and money

Lead Backend Developer

Richard Keen

A SaaS integration is the process of taking a business’s SaaS enterprise systems and connecting them together to allow for seamless data exchange between each service and various different endpoints, like your website.

What is a SaaS integration?

With nearly <a href="https://ascendixtech.com/number-saas-companies-statistics/#:~:text=In%202024%2C%20there%20are%20currently,Number%20of%20SaaS%20unicorns" target="_blank" rel="noopener noreferrer">31,000 SaaS companies</a> offering their products to businesses, it can be difficult to know what services can be connected together or with your website, portal, or app. Here are a few examples of the different types of systems that can be integrated:<ul class="list-bullet"><li value=1>Customer Relationship Management systems (CRM) – Salesforce, Microsoft Dynamics 365 and HubSpot</li><li value=2>Enterprise Resource Planning systems (ERP) – e.g. Oracle, Infor and Workday</li><li value=3>Digital Asset Management systems (DAM) – e.g. Bynder and Canto</li><li value=4>Accounting systems – e.g. Xero, QuickBooks, Zoho and Sage</li><li value=5>Content Management systems (CMS) – e.g. Payload, Magento and Shopify</li><li value=6>Project Management systems – e.g. Asana, Jira and Trello</li><li value=7>Human Resource (HR) systems – e.g. Workday, Zoho People, SAP and BambooHR</li><li value=8>Payment Gateways – e.g. PayPal, Stripe and Adyen</li></ul>

What types of SaaS systems can I integrate? 

Your SaaS systems can integrate with one another to allow for smooth data transfer, but they can also integrate with digital products like your website, a customer portal, or an app. For example, you could integrate your DAM system to populate your website with product images, or you could integrate your CRM to capture lead data from your app.

What can I integrate my SaaS systems with? 

With a comprehensive SaaS integration, you can:<ul class="list-bullet"><li value=1>Automate workflows to save on admin time</li><li value=2>Sync data in real-time so you know data is up-to-date across the board</li><li value=3>Unify disparate SaaS tools for cross-platform communication</li><li value=4>Customise the integration to work with your business processes</li><li value=5>Create a scalable solution that grows as your business does</li></ul>All of these can be huge time and cost savers for your business.

What are the capabilities of SaaS integration?

Yes, you can integrate multiple SaaS systems with one another, as well as your app, portal, or website. We did exactly this for Harwin, where we connected their Salesforce system with their website, as well as their DAM and various other SaaS systems for seamless data exchange. By connecting multiple services, they felt the benefits even more, improving their workflows internally.

Can I integrate multiple SaaS systems?

Advanced integrations are generally very secure. We use our own Si Middleware, which features a private API, so it’s safe from prying eyes. Using secure authentication and data encryption also keeps data safe and secure.

Is integrating my SaaS systems secure?

To ensure a smooth integration, it’s worth defining clear goals and KPIs before you begin. When you integrate with us, we’ll run a workshop during the <a href="http://sidigital.co/services/discover">discovery phase</a> with you to determine what these are so everyone knows what we’re working towards. It’s also important to fully test an integration before it gets deployed. This ensures the data flows are working properly, reducing the risk of mismatching data entries or out-of-date data.

How do I ensure a smooth integration? 

The benefits of integrating your SaaS systems can be huge and have lasting effects on the way a business works and how efficient it is. Some of the top benefits our clients find are:<ul class="list-bullet"><li value=1>Less admin – there’s less time spent updating multiple data points. Simply update in one place, and the changes are reflected everywhere</li><li value=2>Reduce errors – with fewer places to update data, you minimise the chances of human error when entering data significantly</li><li value=3>Improved security – encryption and authentication reduce the risk of spam and data leaks, keeping your business’s data safe and secure</li><li value=4>Scalability – no need for a rebuild in three years’ time, our advanced integrations are fully scalable, so more SaaS systems can be added as your business expands</li><li value=5>Automation – data can be synced automatically, so you won’t have to worry about data updates being missed</li><li value=6>Always up-to-date – ongoing maintenance means your integration is always running smoothly, so less time spent fixing issues</li></ul>

What are the benefits of integrating?

If you’ve got any questions we’ve not answered, let us know in the comments. And if your business uses disjointed SaaS systems, <a href="http://sidigital.co/services/integrate">check out our integrations services</a> or <a href="http://sidigital.co/contact">get in touch</a> to book a consultation.

SaaS integrations: FAQs and everything you need to know

Lead Frontend Developer

Danny Walker

Payload is a modern headless CMS that uses powerful technologies like TypeScript, Node.js, and React—technologies that form the core of our frontend development stack. Its endless customisation options enable us to build tailored APIs and flexible content structures that perfectly match our clients' specific requirements.

What is Payload CMS?

We’ve seen countless benefits from Payload since we’ve been using it, and they’re benefits to both us and our clients. We’ve picked out our top seven benefits below:

The benefits of Payload CMS

A lot of our clients often come to us with a website and a few third-party SaaS systems they want to speak to their website, portal, or app, like <a href="https://sidigital.co/services/integrate/salesforce">Salesforce</a> or a <a href="https://sidigital.co/services/integrate/payment-gateways">payment gateway</a>. Payload’s headless CMS features an Application Programming Interface (API) endpoint, and when paired with our Si Middleware, we can integrate systems into websites, portals, or apps with ease. It means data can be fetched, updated, and created quickly and easily, so our clients can access their data from the CMS anywhere they like.<a href="https://sidigital.co/services/integrate">We integrate all sorts of third-party systems</a> into our client websites, and Payload makes the process a lot quicker and easier for both our clients and us. It’s a win-win situation.

1. Integration

Nobody wants to have to rebuild their website every year. Not only would it be costly and time-consuming, but it can be a jarring experience for your users too. Payload is a future-proofed CMS option. Using the latest TypeScript and Node technology, Payload is built to be secure and reliable. It receives regular updates as well, keeping everything running smoothly on your site.

2. Longevity

Websites can often be left in the same state for long periods of time, and this is often due to the pain of trying to get changes and code updated. Payload is built around flexible content modelling, which means it’s easier for our developers to quickly add features and fields to your website. This means websites can grow and scale at the same rate as your business, so your website never falls behind.

3. Flexibility

Security is normally our clients’ top priority. Over the last few years, cyber attacks and hack rates have rocketed, meaning there’s more focus than ever before on keeping your website’s sensitive data safe and secure.Payload is self-hosted, which means you have control and oversight of all the data that the website holds and accesses. This is a huge benefit for companies that have websites that contain sensitive user data such as personal information. Your data is fully controlled by you, not a third-party service.

Website performance is essential for success in the world of digital. Studies have found that around <a href="https://prerender.io/blog/page-speed-tips-and-statistics/" target="_blank" rel="noopener noreferrer">40% of desktop users</a> will leave a website if it takes more than three seconds to load - and this number rises to 53% for mobile users. It’s also worth noting that search engines like Google <a href="https://www.debugbear.com/docs/page-load-time#what-is-a-good-page-load-time" target="_blank" rel="noopener noreferrer">penalise websites that take over 4 seconds to load</a>, pushing you further down the results list. The message is clear: the faster your website performs, the better chance you have of keeping visitors engaged with your content.Payload's headless CMS is optimised to load content and images quickly, especially when combined with Next.js static site generation. Users expect to find content quickly and easily—it's a fundamental UX principle that leads to higher conversion rates, and this performance boost ensures your users are getting to where they want to be quickly.But it’s not just your website’s users that can benefit from the performance boost. The backend of the CMS is lightning quick as well. Building out new pages can take a matter of minutes. Adding in blocks is instant, uploading images is rapid, and saving your page between edits is speedy, meaning clients spend less time waiting around for content and blocks loading in.

Quality is at the heart of everything we do here. Payload supports TypeScript, a powerful enhancement of JavaScript created by Microsoft, to ensure our code meets the highest standards. Its strict typing system helps us catch errors early and write more reliable code, resulting in robust and maintainable websites for our clients.

6. Quality

It’s important as ever to ensure your site performs well from an SEO perspective to ensure the correct users are finding your site. Improving rankings on Google and other search engines means more traffic to your site. Payload comes with a whole host of SEO tools built-in as standard, and they’re super easy to use.Its visual-led design tells you how your meta descriptions and images are performing, as well as giving you an SEO check score out of three. You can upload a custom meta image too to maximise impact. Payload will even give you a preview of how your page will look when it shows up on search listings.

7. SEO

Thanks to Payload’s flexibility, it’s a great option for many different types of websites across all sorts of industries. We’ve built massive websites with complex SaaS integrations like Harwin, to smaller brochure sites like our own. But Payload CMS is also a great option for content-rich websites and blogs, membership platforms, internal enterprise tools, and much more.

What type of site would benefit from a Payload CMS?

From flexibility to security to SEO, Payload excels at being a slick, optimised CMS for our clients that lets them reap the rewards of a fully optimised website. Moving CMS is never an easy decision, and usually involves a full website rebuild and redesign, but the benefits can be huge. Payload is an excellent example of how a CMS should be, and as a modern agency, we’ve loved every minute of our move across to Payload.If you’ve got a website you’re thinking of rebuilding and want to move across to Payload, <a href="https://sidigital.co/contact">get in touch</a>.

Conclusion

The benefits of choosing Payload CMS for your business’s next website

Lead Designer

Sam Leonard-Rendell

It’s estimated that around 1 in 12 men (8%) and 1 in 200 women have some form of colour blindness. In the UK, this means that there are approximately 2.7 million people affected, a considerable amount of the population, but they are often forgotten when it comes to designing websites and user interfaces.Here at Si digital we consider user experience and accessibility throughout every project. We use a variety of tools and techniques to help us understand visual impairments and use this knowledge to make our websites more usable and less frustrating for people who are colour blind.

Who is affected?

There are many types of colour blindness with different degrees of severity. It’s a common myth that people with colour blindness only see in black and white. Although this can be true, monochromacy – also known as total colour blindness – is extremely rare, with an estimated 1 in 33,000 people affected. This severe visual impairment only allows an individual to see in greyscale.An important factor to remember is that for most people with colour blindness, distinguishing between different colours is not too difficult; it’s telling the difference between shades and brightness levels of similar colours which causes issues.The more common condition is red-green colour blindness, which is split into two groups. A person with protanomaly has reduced sensitivity to red light. Red, orange, and yellow hues tend to shift towards green and appear less saturated. A person with deuteranomaly has reduced sensitivity to green light and will have difficulty distinguishing between blue, yellow, violet, reds, blues, and greens.

What is colour blindness?

For a long time, the difficulties that arise from colour blindness have been ignored, not only in website design, but also television, movies, and especially video games. There are many cases of users not being able to play a game or being unable to progress because of essential UI elements being indistinguishable to somebody who suffers from colour blindness.Take this example from The Witcher 3...

Colour in the wild

See how the red markers on the floor become near invisible when switching to red-green colour blindness.The game features an ability to use heightened senses to follow scents, track footprints, and find clues. However, the game developers chose a deep red colour as a marker, so there have been many users complaining that they couldn’t see these markers very well (or at all). A simple colour change or the option to change colours would have made this game more accessible.Colour blindness is a matter which needs to be taken seriously due to the high percentage of the population with vision impairments. If your website or application is particularly unoptimised, you could be losing a large amount of customers. For example, if a user can’t differentiate between a series of icons because of clashing colours and lack of contrast, that user could get frustrated and find an alternate service. If that is the experience of every potential customer who suffered from colour blindness, you’re losing over 8% of potential sales – for a business with £10,000,000 in revenue, that company could potentially lose a huge £800,000 in sales.

Although colour blindness can cause huge problems for users, it’s actually quite simple to combat. If you’re aware of the issues, then you’re already halfway there.<h3>1. Use contrasting colours</h3>Even people who have monochromacy still have a sense of contrast – the scaled difference between light and dark. To ensure your website is readable for people with visual impairments, you must make sure your content contrasts well with your background. For example, black text on a white background will have a high level of contrast and readability. Whereas yellow text on a white background has a low level of contrast and will be barely readable, even for people with full vision!

Designing with colour blindness in mind

<h3>2. Use different shades rather than multiple colours</h3>A monochromatic colour scheme — not to be confused with full colour blindness, monochromacy – makes use of multiple shades of one colour, rather than using various different colours. This will effectively minimise colour-related frustration, and is a great way to include contrast in your designs. A monochromatic colour scheme doesn’t have to be black and white; using multiple shades of blue, we can create a visually pleasing design with complete readability.

<h3>3. Experience colour blindness yourself while designing</h3><h4>Colour blindness simulation in Adobe Photoshop</h4>There are many free tools available that can mimic the effects of colour blindness, allowing you to understand how a colour blind person would see to ensure that your user interfaces work just as you intended them to. Photoshop has its own — slightly hidden away — proof setup feature; simply go to View > Proof Setup, and then you can choose between protanopia and deuteranopia. When you’re done testing, simply switch back to monitor RGB.<h4>Colour blindness simulation in Figma</h4>Unfortunately, there is no native support for Figma colour testing; however, there are various plugins that allow you to do the exact same thing. We recommend <a href="https://www.figma.com/community/plugin/1115550442410459794/color-blind" target="_blank" rel="noopener noreferrer">Color Blind</a>, a free plugin that shows you in real time what people with common colour vision impairments will see.<h4>Colour blindness simulation in Browser</h4>We use a Google Chrome add-on called <a href="https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?pli=1" target="_blank" rel="noopener noreferrer">Colorblindly</a> that lets you simulate colour blindness on live websites or in a testing environment. This is a handy tool for colour and contrast testing as it offers multiple viewing modes, including full monochromacy.

<h3>4. Choose colour combinations carefully</h3>Unfortunately, as designers, we don’t always get to choose the colours that we use in our designs; sometimes, we’re limited by brand guidelines. But where possible, it’s wise to choose and test your primary and secondary colours before you establish a brand. Below is a chart of colour combinations that you should avoid using.If in doubt, avoid colour altogether and go for a simple black/white, high-contrast colour scheme!

<h3>5. Use texture in place of colour</h3>When designing things like graphs and infographics, consider making use of texture or visual patterns to help differentiate between two colours. For example, take the pie chart below. A user with protanopia would find it hard to differentiate between the different slices due to the colours being too similar. However, if we simply add some texture or patterns, the graph is 100% more readable.

<h3>6. Avoid using colour alone as an indicator</h3>When designing elements like forms and complicated interfaces, you shouldn’t use colour alone as an indicator. Take the forms below as an example. The one on the left only uses colour as an indicator that something went wrong. A person with normal vision will be able to see that the email field has turned red, indicating there has been some kind of error. However, to a person with deuteranomaly, the green of the success field is indistinguishable from the red of the error field. The best way to combat this issue is to use some kind of icon, symbol, or label to indicate that an error has occurred, as seen on the right.

The most important lesson to learn here is that unless you’re absolutely certain that somebody with colour blindness can differentiate between the colours you have chosen, then you should never use colour alone to indicate something important. Where possible, use icons, text, shapes, textures, or other visual cues as well as colour when communicating information to users.There are many ways to test for accessibility; however, these tools aren’t always fully accurate – ultimately, the best way to see if your design is suitable is to perform real UX audits. It’s likely that you know somebody who is colour blind; why not get them to review your design?What we see as designers and developers isn’t always what your users see; they could be colour blind, using a screen reader, or looking at your website on a 3″ smartphone from 2007. Creating websites that are accessible to everyone is essential and should be part of any good design process.If you would like to speak to us about your new project and how we ensure we always deliver the ultimate, accessible user experience, please <a href="https://sidigital.co/contact">get in touch</a>.

Lab Notes