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:
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
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:
Fast design sprints
Immediate client feedback
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.
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.
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.
Uses static files that can be deployed without a server for near-instant load times
Loads images progressively and responsively to increase visual stability
Partially compliant with WCAG 2.0, an important accessibility standard in higher ed
Out-of-the-box integrations with over 70+ systems
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:
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.
We've all heard horror stories of companies getting burned by a web development agency.
This can happen for any number of reasons:
A failure to deliver on promises
Poor communication
Inability to hit deadlines
Lost search visibility
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:
Shared Slack channels provide clients with direct access to our team
Weekly sprints allow us to be fully agile and hit our timelines on time
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!