Building a Serverless Website for Northland’s Leading Field Technology Consultant.

WhiteRata is enjoying a fast and secure serverless website with a modern design.

The Challenge

WhiteRata is a leader in providing field based technology solutions to Northland and wider New Zealand assisting in project planning, monitoring, surveys and more.

WhiteRata reached out to KiwiSprout because they needed a website that reflected their experience with technology and modern solutions while providing a user friendly design that was easy to navigate.

The Process

Planning

The first thing we do for every project is take the time to learn more about the client so recommend the best tools for the job, this involves getting familiar with:

• Their branding and core values
• Their goals for the website
• Their target audience, and how they will interact with the website.

After learning more about WhiteRata, we knew that loading time and security were two big factors. Because of this, we knew that a serverless website that uses GatsbyJS to render the website and Prismic as the Content Management System (CMS) was the best fit.

Serverless websites are great at keeping a low loading time because they scale with demand, so that the experience is just good when there’s 1 user browsing or 10,000 users browsing. GatsbyJS also pre-renders each page, so that the page can load incredibly quick without needing to wait for a response from a server or database.

Using Prismic with Gatsby is also choice for security because the CMS is decoupled from the website that people browse. This means that there’s no way hackers can get into the admin through the website, providing the best security and ease of mind.

Design

With a website plan put together that fit their goals and brand, it was time to start visualising the end result with a design.

To create the designs, we used one of the fastest growing design tools, Figma. Figma allows us to create professional designs quickly for every type of page we need on both desktop and mobile devices.

We knew that communicating the solutions they provided was key, and we created a design that reflected that while maintaining their brand colors.

When the designs are ready, we sent them to WhiteRata for review.

Development

With the designs signed off, we began developing the website in GatsbyJS. Gatsby uses GraphQL to pull our content from Prismic into the page, then we make it functional and pretty following the designs.

As experts in SEO, we make sure every page is optimised as we develop them. The great part about Gatsby is how fast everything loads, and Google loves that.

When the website's ready to preview, we set up a staging URL and send that to the customer for feedback.

Launch

With the staging website signed off and everything ready to go live, we set up a continuous integration and continuous deployment workflow using GitLab CI/CD so that any future changes are tested and seamlessly synced with the live website after they've passed our rigorous tests.

As part of the go-live process, we perform a full quality assurance with a fine tooth comb. Every website we make is a reflection of us as an agency and we want to make sure we're delivering the best quality experience possible with every new website.

After the website passed all of our QA tests, we deployed it live onto AWS using AWS S3 to host the website on a serverless architecture that scales with demand, AWS Route53 to manage the domain and AWS CloudFront to give that extra performance boost by automatically compressing and keeping a fresh copy of the website around the globe.

The Results

With the launch of their new website, WhiteRata achieves loading in under 1 second with an average loading time of 655 milliseconds, WhiteRata's new website has passed all of the tests to achieve the status of a Progressive Web App, meaning it's proven to be:

• Fast - Smooth animations that respond quickly to user input.
• Reliable - Loads instantly even in uncertain network conditions.
• Engaging - Works as smoothly as an app would on mobile devices, providing an immersive user experience.