Featured Project
Written by:
  • Drew Henry

Avanti Financial Planning

Specialist advisors helping double income families achieve long term financial success whilst simultaneously having peace of mind today.

How it was done

The Avanti Financial Planning website is a custom progressive web app built with our Gatsby+Sanity starter template.

The key objectives for Avanti were speed to market, the ability to make content and layout changes without help from a developer, performance, SEO, and extendability of the website to meet future growth.

With the Gatsby+Sanity starter template we were able to tick all those boxes, and deliver the site within the required timeline.

The template provides a composable, modular framework (frontend and CMS) that allows us to quickly build a website, and to easily add custom, project specific features tailored to meet unique product requirements. The template is built to scale, allowing new features to be added as a business grows.

The template's exsiting modules gave us the ability to build out most of the Avanti page layouts, and to inject Avanti's branding. In addition, we modified the Blog module to match Avanti's preferred blog post layout, and we built another module to embed the '5 Minute Financial Health Check' into the website, rather than directing users away from the Avanti website.


Gatsby is a fast and flexible React.js based framework that makes building websites with any CMS, API, or database easier. Not only is it fantastic for building highly interactive and enaging user interfaces, but for also deploying websites with super fast page loads, that are highly secure, have great SEO, and are acessible to all.

What's more, the developer experience is top notch, giving us more time to focus on the website content and user experience. In this case, time saved in set-up allowed us to devote time to animating Avanti's 'Forward Together' tagline.


As the name suggests, our Gatsby+Sanity template that we used to build this website comes with a content management system (CMS) powered by Sanity - an open-source extensible CMS built with React.js. A benefit of using Sanity is rapid configuration and free form customization, allowing us to create a performant, user-friendly CMS that can optimise data-modelling and editor workflows for each unique project.

The flexiblity of our CMS allows us to meet the unique needs of the website's adminstrators, marketers and content editors. Multiple editors can collaborate in real-time from a clean and intuitive editing interface, from a variety of devices.

In this case, the Avanti content editors are able to easily create and publish content to the website without any technical knowledge. With real-time serverless previews, they can also see exactly what content updates look like before they are published.


We deployed the frontend of the website to Netlify's global Edge network - a globally distributed CDN designed for fast, low latency sites. Netlify also handles the contact form submissions.

The content management system (CMS), frontend and data store is hosted and deployed using Sanity's hosted service, an edge-cached global CDN.

Both the Netlify and Sanity services provide a generous free tier, in many cases good enough to meet the requirements of marketing and informational websites. Thereafter, if you need more resources, you only pay for what you need.


CMS: Dashboard
CMS: Site Settings Editor
CMS: Frontpage Editor
CMS: Frontpage Real-time Preview
CMS: Blog Post Editor
CMS: Blog Post Real-time Preview

Like to know more?


© 2022 Gramercy Studios Pty. Ltd. All rights reserved.