See how we built a high-performance headless WordPress website with Gatsby.js for Ocelot, an AI-powered student engagement platform used by over 400 schools.
Trusted by over 400 schools, Ocelot is a student engagement platform that colleges and universities use to connect, convert, and nurture prospective students.
Ocelot's suite of products includes an artificially intelligent chatbot, an on-demand video library, and a dynamically updated content knowledge base to answer students' questions.
To position Ocelot for growth, we translated their visual identity into a robust design system and developed a high-performance website with Gatsby.js and a headless WordPress backend.
Brands are more than a logo. Brands are complex and subtle. Brands are intentional.
Given Ocelot's incredible identity system, positioning, and brand manifesto, we needed to represent it across every touchpoint in a way that felt comprehensive and unified.
A design system is a collection of reusable design components that adhere to a clear set of brand guidelines and can be assembled to create a myriad of pages.
A modular visual identity system competes with type kits, buttons, icons, logos, form styling, widgets, pop-ups, and color palettes are the foundational building blocks with which any landing page can be designed to fit into the brand's design system.
Modern design systems are built out in Invision or Figma to allow decentralized design teams and remote employees the ability to easily access components in the cloud for mockups, redesigns, or new creative projects.
Every SaaS startup will require different design components for their website redesign, but there are a few standard components you should consider building.
For Ocelot, we built a library of reusable design components some of which include:
While our full process is a trade secret (shhh 🤫), what enabled our design and development teams to deliver a headless Gatsby website and a full design system launched in a few short months boil down to these three areas:
We communicate with our clients every day. If you've never worked with a website product team and are used to the traditional agency model, daily meetings sound crazy.
With 1-week sprints, daily check-ins, and shared Slack channels or designers and developers can immediately receive feedback on key decisions from stakeholders.
Because we aim to launch new websites in 90 days or less, a fast, iterative approach allows us to make decisions faster, and get a design system in front of our frontend engineers knowing that there won't be any major design revisions once development starts.
Overall, we're thrilled with how Ocelot's modular website design system elevates their brand and empowers their marketing teams to launch new pages on demand.
Core Web Vitals is a major update to Google's core search algorithm that introduces a new set of ranking factors designed to measure the overall page experience from a user's perspective. Core Web Vitals introduce new ranking factors that consider:
With so much business happening online in a post-COVID world, making a good first impression can make all of the difference, and optimizing for Core Web Vitals is how we measure success in this area.
Because a majority of the new Core Web Vitals ranking factors revolve around speed and stability, Ocelot wanted a modern frontend framework that met high-performance requirements while allowing developers to build a robust user experience.
Self-described, "the fastest frontend for the modern web," Gatsby.js met all of Ocelot's needs and offers a few distinct advantages over competing for frontend frameworks.
In a traditional WordPress installation, the backend that content authors use to publish blogs, and edit landing pages are connected to a WordPress theme on the frontend.
A headless WordPress site keeps the same familiar Content Management System employees are familiar with, but displays that content through a modern frontend framework like Gatsby.js using an API.
This is a win-win-win scenario for Ocelot, our developers, and website visitors because it doesn't disrupt content development, limit flexibility, or throttle the user experience.
Ocelot's marketing team continued working in business, as usual, and our development team had all the resources they needed to develop an amazing web experience, and visitors were met by a high-performance website from any device and location.
At Webstacks, we pride ourselves on moving as fast as our clients. For this project, we completed the entire migration, website redesign, and launch in just 90 days.
PageSpeed Insights has three tiers of website performance scoring:
As of today, the Ocelot website earns a 100% PageSpeed Insights rating on desktop. Our team will continue to improve upon their website to create an even better mobile and desktop experience for Ocelot's valued customers.
We've all heard horror stories of companies getting burned by a web development agency. This can happen for any number of reasons:
The list is long. At Webstacks, we hold ourselves to the highest client services standards, and this hands-on approach has resulted in incredibly collaborative and successful relationships.
Here is how we typically develop websites for SaaS companies to complete a total redesign and development project in 90 days and build genuine relationships:
These are just a few advantages SaaS companies can expect by working with us.
Have a project? Talk to our sales team today!
AI-driven communication platform that gets the right information to the right students at the right time.
Sacramento, CA
Artificial Intelligence
Mid-market (25-200 employees)
