AFTCO - A great MACH architecture example

The American Fishing & Tackle Company are an excellent example of a business that understands the value of composable commerce, rapidly rolling out prototypes and the need to be reactive to their customer's changing needs. Over the past few months, we've partnered with AFTCO to help implement their new headless store. With their permission, we're publishing the case study to provide insights for other businesses looking to commit to the same growth play.

For years, AFTCO had operated a successful monolithic Shopify store that stocked all the great products they carry in their chain of stores across the Western parts of the U.S. What separates them from the competition (besides their awesome gear) is their willingness to take bold steps to improve their digital operations and customer experience.

The legacy Shopify store was performing well enough but had reached a natural plateau. AFTCO wanted the site to keep evolving through A/B testing, optimizations, a modern UI, and product personalisation. Adding plugins or extensions to the site to achieve these goals was hurting their core web vitals and page load times, preventing them from getting closer to their goals.

The AFTCO team were aware of the high-level benefits of moving to a headless store;

• Faster load speeds
• Better user experience
• Having complete unrestricted freedom to build innovative frontend features
• Accessing a pool of high-talent developers
• Introducing multi-lingual and multi-currency options to expand into new markets

These promises are super compelling for a business that had reached a technical ceiling.

AFTCO's first hurdle - functional architecture

AFTCO boasts a team of highly experienced and capable product experts, marketers, content writers, and other professionals that keep their operation at the top of it's game. They don't have in-house development resources or anyone experienced with MACH technology. This posed a challenge. While the team knew roughly where they wanted to be, they didn't have the experience to map the best path with the least resistance.

MACH architecture relies heavily on combining the right products to solve problems and provide a workflow that's not cumbersome for everyday users. This is the role of a functional architect. They're responsible for selecting the puzzle pieces that will fit together to make the solution whole.

In AFTCO's case, they needed to pick the right solutions for:

• Hosting (Options: Vercel, DigitalOcean, Cloudflare, AWS)
• Frontend framework (Options: Next.js, Nuxt.js, Hydrogen)
• Content management (Options: Contentful, Prismic, Strapi, Plain Shopify, Sanity, Storyblok, Builder.io)
• eCommerce (Options: Shopify, Commercelayer, Crystallize)
• Product recommendations & search (Options: Klevu, Elastic Search, Algolia)

There are tons of other composable areas that can make up an eCommerce solution, but as a company in its infancy of microservices based architecture, this breakdown was a great place to start.

We're functional architects

One of the ways we brought value to AFTCO's project is by acting as the functional architect. We're official partners of most of the big services AFTCO was considering using (Shopify, Contentful, Prismic, Crystallize, Commercelayer) and deeply understand how these services fit particular needs. Answering AFTCO's question "which tools are the best for us?" made the project feel less risky for their team.

Prototyping for visibility

Even after receiving our advice on the best of breed approach, it's difficult for a company like AFTCO to be absolutely confident the final solution will tick all their boxes. That's why we helped them spin up prototypes to try out.

The solution options we wanted to showcase through prototypes were:

• Hosting
• Consolidated product and content management

The AFTCO team were working with Vercel for hosting. Vercel are an exceptional host, and we're quick to recommend them because the range of native functionality (edge rendering, A/B testing, turning functions into APIs with a couple of commands) the service offers. However, AFTCO weren't using all the bells and whistles and were better suited to a simpler setup.

We spun up two new environments to showcase the experience; DigitalOcean and Cloudflare. This let AFTCO see the limitations and experiences using both platforms before taking our advice.

The next prototyping mission was to showcase different CMS options to provide a more streamlined approach to managing products and content. AFTCO's initial CMS provider was Contentful (again, an excellent choice!) which solved 95% of their issues, but left a bit of a splintered approach to adding new products and creating the sales page where the product is advertised.

At the time of writing, we're spinning up the new prototypes, but our leading options are Prismic, Strapi and Shopify's default CMS. The goal of setting up each platform is to create a clearer, more defined workflow for adding new products and product variations.

The results: improving performance

When we first started working with AFTCO, their site's performance was decent on desktop but not passing the CWV due to some cumulative layout shift problems and some under-frontend optimized code.

Even though these numbers look a bit scary at first, they posed an excellent opportunity to unlock the performance gains AFTCO had identified before starting the project.

Our focus was implementing Next.js's performant server-side rendering techniques and streamlining the codebase. It's worth noting that the site was half-built by the time our team had the opportunity to implement some of the standards we believed would improve performance.

There's always "a little more" than can be done to improve a store's performance, but after refactoring the critical parts of the site, this is what the performance looks like:

The performance improvements saw AFTCO sail through a successful (and stable) Black Friday and have total confidence in the upcoming Christmas period.

While there has been a huge increase in traffic and sales since unlocking the full potential of headless performance, this trend is likely the result of Black Friday and the holiday period. We'll circle back and update the case study in 12 months for more accurate insights into the effect of moving to a MACH architecture.

What's next for AFTCO?

AFTCO have the opportunity to implement its choice for MACH technologies. There's nothing tieing them to outdated technologies. It's a really exciting time to be in this position, as the MACH Alliance is gaining traction and every day a new service leverages AI creatively to improve the shopping experience.

The next big tickets for the AFTCO team are expanding internationally and creating a customized shopping experience, all while dialling their conversion rate with A/B testing.

Without the store's current architecture, there wouldn't be a way to achieve these goals.

For instance, Next.js and Shopify Plus work together nicely with native support for multi-lingual and multi-currency sites. It doesn't just work out of the box but can be configured for a seamless shopping experience. The same can be said for most modern CMSs. Contentful, Prismic and Strapi all have case studies showing how they've helped retailers and multinationals manage content and stores in different languages.

Shopping personalisation platforms like Nostro can be integrated into the existing architecture to leverage the power of AI segmentation, user purchasing predictions and content customisation.

Finally, A/B testing can be unlocked through various services but can work on The Edge. The Edge is a global network of servers that distribute static assets and can run some basic operations. This means no matter where in the world a user enters the site, they'll be part of the split test but won't have to suffer the slow page load times that are usually associated with A/B testing.

Wrapping up

AFTCO is a really cool MACH architecture example and the perfect growth model for many online retailers who are considering the jump to headless eCommerce.

While we wanted the spotlight to be firmly on the AFTCO team, our team indeed played a bit part in the success of their new setup. An idea is only as good as the execution!

Our team are focused on helping growing companies make the jump to composable websites and applications. If you're considering a project like this and need to speak with a team that's proved it can get it right, please reach out to us! The worst that can happen if you get some free experience-backed advice.