Digital Agency Cucumber Uses Directus to Achieve 100% Lighthouse Scores for YIA WebsiteBy Benjamin Haynes on June 15, 2022
Founded in 2004, Cucumber is based in New Zealand that uses technology and innovation to solve complex real-world problems of all kinds for customers, with solutions that drive efficiency, sustainability and productivity. The company works across government (from local to central), research, and national and multinational enterprises.
Cucumber works in partnership with both large and small enterprises from simple websites to complex front and back end data systems. “Our team provides analysis and strategy through design, execution and management, for both the frontends and backends of complex platforms,” said Matt Skinner, at Cucumber.
A Project Close to Their Hearts
One project that’s been important to the team at Cucumber for more than a decade is designing and maintaining the website for a local initiative called Young Innovators Awards (YIA). YIA is integrated into schools’ curriculum and leads to an annual awards night that celebrates the work the students produce. It is designed to develop the innovation economy within the Bay of Plenty region.
Cucumber was tasked with modernizing the YIA website for the 2022 awards, and improving its performance and SEO based on measurements provided by Lighthouse, an open-source, automated tool for improving the quality of web pages. “We rebuilt YIA’s entire web presence to make it easy for students to find the information they need and upload their entries,” Skinner said.
However, because many disparate data sources were feeding the site, and data and content were provided in various formats, optimizing the site’s performance was challenging. “The existing website was achieving a Lighthouse score of about 80%, and we wanted to increase that as much as possible,” Skinner said.
Skinner and his team evaluated multiple solutions before choosing Directus. “We looked at numerous NodeJS-based CMS solutions and narrowed down the list until only Directus was left,” he said. “Other solutions either had a buggy interface, were too opinionated, or just didn’t make the data as open and as free as we needed. Directus is unopinionated, open and flexible, so it was the perfect fit.”
Directus Delivered Essential Flexibility and Simplicity
Directus democratizes data across organizations with an easy-to-use, intuitive platform for technical and non-technical users alike. It eliminates the need to architect, provision and maintain the backend infrastructure, and provides an intuitive no-code app for creating highly customized digital projects in minutes.
Directus connects to new or existing data sources via REST, GraphQL APIs, a CLI or an SDK, providing the flexibility to leverage an array of data connection options. It supports various authentication methods, as well, and enables granular role-based permissions for access control.
According to Skinner, many of Cucumber’s clients have monolithic solutions in place. “They have datasets from dispersed sources, multiple APIs and a wide variety of data types, and they haven't really thought about that process evolving,” he said. “Directus unlocks access to all that data by enabling a website’s UI to reveal data from multiple sources through a single API. There’s only one external source to worry about, rather than having to connect to multiple APIs to pull the data.”
A New Paradigm for Content and Data Management
Using Directus, Cucumber has created a modular, repeatable approach to design using ready-made components, which reduces development time and costs while enabling bespoke output. “We can implement understandable blocks of code in a consistent manner, so that our content managers don’t have to think through how an entire page renders – they just need to imagine how and where blocks of content render on the page,” Skinner said.
Skinner added that this approach to content management is a different paradigm compared to monolithic platforms. Clients benefit from greater control along with commercial-grade consistency and safety, and the ability to render content appropriately for different UIs and devices. “You can't set up templating with that level of granularity with WordPress – but Directus makes it easy,” he said. “Directus keeps out of the way in a good way so we can do what we want to do with the UI.”
While the team is aware of the Directus platform’s capacity for customization, they have yet to use it, because all the functionality they need is included in the core platform. “As our templates and components become more complex, we might leverage some of the customization available in Directus; but for now, the core platform has been more than adequate.”
100% Lighthouse Score Across the Board
Using Directus to create the new YIA website has enabled Cucumber to achieve 100% Lighthouse scores across all five parameters: performance, accessibility, best practices, SEO, and progressive web app (PWA). Skinner said achieving a perfect score is almost unheard of, and he credits Directus. “Directus enabled us to make our own choices and set the YIA website up in the right way, whereas other more opinionated situations prohibit that freedom of choice,” he said.
Skinner added that decoupling the content from the site is key to making this work, and far different from typical monolithic CMS platforms, where the content is essentially built into the site itself. By taking this open data approach, Directus enables a wide range of use cases, which benefits Cucumber as they look to solve various business problems for their enterprise customers.
“There’s a lot of potential in using Directus for a variety of use cases, as we look for ways to meet the needs of clients requesting mission-critical internal applications and other digital projects,” he said. “We’re thrilled with what we’ve been able to do with YIA, and we’re excited about the opportunity to leverage Directus for our enterprise customers moving forward.”
Attention all Digital Agencies - learn how you can reduce costs, create new revenue streams and acquire new business with our partner program.