Toucanberry Tech is a boutique software consultancy specialising in Reinsurance. They take their customers on a journey from manual process, disparate systems, unorganised data to automation, cohesive tech, and digital innovation.
The previous Toucanberry Tech website was built on Squarespace but the client wanted to move to WordPress. Their new branding and website designs were created by Maddy Russell who I’ve previously worked with on other projects, including Pilates East and Paiv Creative. We also worked alongside copywriter Ebony-Storm Halladay.
Let’s take a closer look at some of my favourite features and functionality of the Toucanberry Tech website:
Filterable blog page
On the blog page, you can filter blog posts by category. This functionality is powered by Ajax which means when you click on a category, the blog posts update immediately on the page without the page needing to refresh.
Customisable blog design
On the main blog page, the posts are displayed in a grid format, with the most recent post being full width.
Each blog post has a featured image, and the post title, excerpt and “Read More” button sit on top of the image. However, because the client can upload any image as the featured image, we need to ensure that the text on top of the image will always be easy to read, regardless of the image.
Some images will be lighter and will require a darker text colour, and some images will be darker and require a lighter text colour. So to resolve this issue, I added custom fields to each blog post so that the client can easily customise the colour of the text. They can choose from either “Light” or “Dark” for the text colour.
The client can also customise the “Read More” button for each post. They are able to change the colour of the button, the colour of the outline that shows when you hover over the button, and the text on the button. No coding required on their end!
Animations built with SVGs and CSS
Animations can be a fun way to add movement and interaction to a website. However, if done incorrectly, animations can have a hugely negative impact on the loading time of the website.
One of the best ways to add animations to a website without causing any issues is to use SVG files and add animations to the elements within the SVG using CSS.
Here’s an example of an animation that shows at the top of the home page:
Even though this image and animation are above the fold, they don’t slow down the website at all.
I also love this cheeky little winking toucan who makes a couple of guest appearances across the website:
And speaking of speed…
Speed optimisations for fast loading times
I always build my WordPress websites with speed in mind, and Toucanberry Tech was no exception. Just look at these speed test results from GTmetrix: fully loaded in 0.8 seconds!
The new Toucanberry Tech website utilises the WordPress block editor which, unlike third-party page builders, doesn’t have a negative impact on the loading time of the website.
Here are some kind words from Maddy about what it’s like to collaborate with me…
“Holly is a pleasure to work with. I have worked with her on both my own website and websites for my clients and have always been thrilled with the results. Holly makes the process really clear and easy and is a pleasure to work with. As a designer it’s always great to work with people who can help bring your vision to life and Holly has definitely done that so thank you.”
Are you ready to outsource your website development?
If you’re a web designer who loves creating beautiful websites but hates the coding side of things, I can help!
I specialise in turning designs into fully-functioning WordPress websites that not only look beautiful but that are also functional, strategic and fast.
Learn more about collaborating with a developer
Join my free email community for regular insights into working with a web developer, advice for designing strategic websites, and other behind the scenes bits and bobs.
