OcelotOcelot

Developing a High-performance Gatsby Website for Ocelot

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.

Developing a High-performance Gatsby Website for OcelotDeveloping a High-performance Gatsby Website for Ocelot

Developing a high-performance website

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.

Designing a modular brand identity built for the web

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.

What is a design system?

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.

What's included in a design system?

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:

  • Background colors and color shades
  • Page templates including blogs, internal pages, and landing pages
  • Typography for headers, CTAs, and body copy
  • Testimonial widgets
  • Accordions and sliders
  • Button styles and hover effects
  • Custom branded icons
  • Form and chatbot styling
  • Blog and webinar carousels

The Webstacks Design Process

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:

  1. 1.Fast design sprints
  2. 2.Immediate client feedback
  3. 3.Rapid iterations

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.

Meeting the needs of Core Web Vitals

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:

  • Loading performance, or how quickly your pages render on mobile and desktop devices
  • Interactivity, or how quickly the browser can respond to clicks and user inputs
  • Visual stability, or how little the content on the screen shifts during the page load

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.

Developing a High-performance Frontend with Gatsby.js

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.

Advantages of Gatsby.js

  1. 1.Uses static files that can be deployed without a server for near-instant load times
  2. 2.Loads images progressively and responsively to increase visual stability
  3. 3.Partially compliant with WCAG 2.0, an important accessibility standard in higher ed
  4. 4.Out-of-the-box integrations with over 70+ systems

Migrating to a Headless WordPress Installation with no Down Time

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.

Build for Speed with Speed

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:

  • 0-49 is poor and fails to meet a majority of the Core Web Vitals metrics
  • 50-89 needs improvement in a few select areas to meet Core Web Vitals requirements
  • 90-100 indicates good user experience, and a level all websites should strive to meet

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.

How We Work

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.

Our Process

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:

  1. 1.Shared Slack channels provide clients with direct access to our team.
  2. 2.Weekly sprints allow us to be fully agile and hit our timelines on time.
  3. 3.Multiple check-ins a week to review work and blockers.

These are just a few advantages SaaS companies can expect by working with us.

Have a project? Talk to our sales team today!

Ocelot
About

AI-driven communication platform that gets the right information to the right students at the right time.

Location

Sacramento, CA

Industry

Artificial Intelligence

Company size

Mid-market (25-200 employees)

Tech stack
Gatsby