Shopmonkey Increases Website Speed 43% Migrating to Gatsby.js

Modernizing the Auto Repair Industry With All-In-One Shop Management Software

Shopmonkey is an auto repair shop management software startup that empowers mechanics and shop owners to simplify their business operations with a full suite of cloud-based tools.

Whether you run a small detail shop, perform motorcycle repairs, or refurbish boats and bicycles, Shopmonkey's cloud-based tools give shop managers a single solution for all their needs.

As a rapidly growing, Series C funded startup, Shopmonkey had a big vision for their website and needed a trustworthy development partner to bring it to life using the best tech stack.

Discover how our team of designers and developers migrated Shopmonkey from Webflow to a headless CMS using Gatsby.js and DatoCMS to create a more personal and user-friendly site.

Designing the Future of Auto Repair Shop Software

The automotive industry is massive and over 100 years old.  Ask anyone with a car and they will tell you that when industries are big and old, meaningful change happens slowly.

Because the internet has given consumers more control and choices, they naturally seek out mechanics and repair shops that are good value and provide a helpful customer experience.

With legacy shop management systems, paper records, and sometimes invisible digital presence, small auto body shops struggle to earn new business and scale their operations.

Shopmonkey changes everything.

5 Ways Shopmonkey Improves the Customer Experience

Getting work done on your car is like being without your smartphone. Most of us would prefer not to be in that position. That said, routine checkups and repairs keep us safe.

Shopmonkey offers is a suite of feature-rich tools that empower shops to improve their customer's experiences, and meet the new demands of today's younger drivers.

1. Streamline operations

Easily schedule appointments, manage customer information and their vehicles, track their vehicle repair history, and quickly create and attach estimates to their contact record.

2. Communicate better

Provide customers with real-time status updates, follow-ups, and notifications through text or email so they can plan around their repairs better.

3. Find parts

By integrating with partners like MOTOR, Carfax, PartsTech, WorldPac, and more, estimators can easily look up and track parts, fluids, maintenance schedules, inspections, and inventory.

4. Manage payments

With QuickBooks Online and QuickBooks desktop integrations, owners can seamlessly track customer aging, invoice customers, and run payroll for their techs.

5. Optimize time

Repair shops have tight margins. Shopmonkey's time tracking features enable techs to clock in and out, track time per project and allow owners to run reports per tech or project.

Our Product is Your Website

This is a common problem in SaaS startups: product development always takes priority.

To help Shopmonkey scale, Webstacks provided a full team of web designers and engineers to build a website that restored autonomy to Shopmonkey's sales and marketing teams.

By offloading web development and marketing technology implementations to Webstacks, Shopmonkey's internal software engineering team could stay focused on developing the best auto shop management software and be confident that their growth team was supported.

Note

Shopmonkey, being an early stage startup, needed to initiate operation "Turn on the lights." They got us on the road to success. Can't recommend the team over at Webstacks enough, they know what they are doing.

Ryan van Niekerk, Senior Account Executive

Implementing Custom Website Designs on Gatsby.js

Before partnering with Webstacks, Shopmonkey was using Webflow, a "no code," drag and drop website builder that is a great option for new startups who need something online in a hurry.

For an ambitious and rapidly growing automotive SaaS company like Shopmonkey, they quickly outgrew Webflow's limitations. Needing something faster, built for scale, and which could accommodate their specific design needs, Shopmonkey chose a headless CMS and Gatsby.js.

Note

It has been a seamless journey of taking our design files and very specific notes on responsive behaviors and making it all come to life on the live site! Another thing I greatly appreciate is that they were very communicative and responsive all along the way — even troubleshooting with us at the last minute once the pages went live.

Kyle Marks, Art Director

What is Gatsby.js?

Gatsby.js is a modern, React-based frontend framework that uses GraphQL to generate static websites and load in record time. Because of Gatsby's fast page load time, it is one of the top choices for a headless CMS implementation.

Designing a website that speaks to shop owners

Because choosing a new piece of business-critical software has large switching costs, Shopmmonkey's new website needed to make this big decision feel like a no-brainer.

One of Shopmonkey's design goals was to find a balance between who they were, a high-tech SaaS startup, and their clients who were auto shop owners and managers. 

Nicolas Mansfield, the lead designer on this project, found a perfect marriage by juxtaposing clean, simple illustrations with lots of whitespaces to highlight the app's simplicity, with video testimonials of real clients sharing their success stories since switching to Shopmonkey.

Shopmonkey's clear and personal brand experience was further enhanced by using Capterra reviews and written customer testimonials to send strong trust signals to website visitors.

All in all, Gatsby.js gave Webstacks' developers the tools and flexibility they needed to implement Shopmonkey's ambitious design goals, and launch a fast, no BS, website.

Developing High-Performance Websites With DatoCMS

In May of 2021 Google published a big update to their core search engine algorithm known as Core Web Vitals. Core Web Vitals includes new ranking factors that measure page experience such as speed, visual stability (CLS), and interactivity (TTFB) to improve user experiences.

To remain ahead of their competitors, Shopmonkey needed a high-performance frontend solution and a robust Content Management System to empower their marketing team.

Note

We brought Webstacks in at a time when we needed to do some HEAVY integrations -- fast. They listen so well. My team was able to keep our heads down on our top tier priorities while Webstacks powered through a tremendously large project. It's a huge relief to hand someone the reins and know they are going to kill it.

Hannah Conrad, Senior Marketing Manager

Using DatoCMS for maximum control

If Gatsby.js is used to design and develop a responsive website on the frontend and is decoupled from the CMS, how do marketing teams manage the content? DatoCMS.

DatoCMS, a headless Content Management System, uses an API to effortlessly present data into the Gatsby.js frontend experience. Now, Shopmonkey's marketing team can create, publish, and update any type of content they want (e.g. landing pages, events, blogs, website pages, registration forms, etc.), without ever needing to bother their internal software engineers.

Onboarding SaaS Companies to HubSpot

Automotive software-as-a-service companies like Shopmonkey who are disrupting the $60 billion auto repair industry not only need a website and CMS that can scale but simultaneously need a CRM to manage increased demand and their existing customer base.

Note

Being new to HubSpot, it can be frustrating trying to get caught up to speed on everything it has to offer, but Webstacks has been an amazing resource. They are very knowledgeable and always try to find a solution that scales with the business instead of one that just solves the problem at hand.

Ivan Hernandez, Revenue Operations Manager

As an Elite HubSpot Solutions Partner, we strive to help every client maximize the value and utility from HubSpot's marketing technology platform.

During onboarding and training sessions our HubSpot certified Marketing Technologists configure each tool to meet the client's goals, and teach marketing and sales organizations how to use maximize and streamline processes to attract, engage, convert and delight customers.

What's Next for Shopmonkey?

With the website launched, Shopmonkey's focus turns to creating more customer stories, increasing product demo signups through conversion rate optimization, and launching in-person workshops for shop owners to learn strategies to grow their businesses with Shopmonkey.

We couldn't be more excited for Shopmonkey! The auto repair industry desperately needs an end-to-end solution that empowers shop managers to run their business and mechanics to do their best work. Keep up the amazing work!