Koala went headless to become faster, more flexible, and customize its customer experience

Previous platform

Shopify Plus

Industry

Home goods

Use case

Apps and integrations

A well-loved and well-used Koala mattress.

Editor's Note: Going headless isn't for everyone. Chat with our team to figure out if this is the right approach for your business.

Koala is an Aussie brand with an international presence—popular for its home goods, famous for its advertisements selling them. But cheeky marketing campaigns may camouflage what Koala truly is: a smart, data-informed, tech-savvy company on the cutting-edge of its direct-to-consumer market.

Koala product photo 1

The brand is obsessive over customer experience, not only in its products and how they are delivered but with how shoppers interact with the brand at each touchpoint. To maximize its website experience, Koala uses a headless commerce system. With Shopify Plus, Koala has enjoyed: 

  • Back-end solutions delivered 3X faster by its development team
  • Decoupled content and code, meaning writers can write and coders can code—independent of one another
  • Faster site response times by transferring application programming interface (API) calls to its server

Challenge

Koala has been a revelation for, and started a revolution within, the sleep industry.

Its founders, Dany Milham and Mitch Taylor, state their true loyalties right on Koala’s About page: “All our energy goes into understanding our customer’s worries, then creating an experience that makes everything easy.”

The ethos does not only apply to making a great mattress. To stand out in a hyper-competitive home goods market, Koala needed its website to be fast, and it required the flexibility to act quickly when the company needed to add new pages or make changes to existing ones.

By decoupling the content from the code, we have been able to free the content from the engineers so that they can focus on code, while writers focus on content.

Richard BremnerHead of Technology, Koala

Solution

Koala opted for a headless commerce approach—the decoupling of its front- and back-end systems to offer a more customized customer experience.

To tailor the way shoppers interacted with what they saw on its website, the company used a third-party CMS, in combination with Shopify Plus and its API. 

“Traditionally, frequently changing content is gated behind software engineers who need to edit HTML, commit code, test, and perform website releases to ship copy changes,” Koala’s head of technology, Richard Bremner, says. By decoupling content from code, Koala’s creators would no longer have to be dependent on an engineer to make fast decisions on what material appears live on the site.

Koala product photo 2

Another way Koala would offer a more engaging experience was through its progressive web app (PWA). The company’s PWA is the customer-facing portion of its web presence. It allows for new web pages, products, and content to be deployed much faster, providing Koala the flexibility to offer the right experience, at the right time, to different customer segments across any device.

Koala also built a shopping cart microservice within its PWA to make it easier for customers to use discounts and bundle multiple products.

“We found that our PWA had too much client-side logic for handling various discounts and bundling scenarios,” Bremner says. “The code had become bloated and buggy. When this bubbled up as tech debt, we decided to build a single microservice that would sit between our PWA and Shopify Plus, and handle all the business rules for us. This allowed us to remove a lot of client-side JavaScript, simplifying and reducing the page size.”

The content is the same regardless of the device. Being headless allows us to deliver it with targeted experiences, or even different content to specific cohorts visiting the same page.

Richard BremnerHead of Technology, Koala

Results

Koala’s PWA, powered in part by Shopify Plus, allows Koala to uniquely differentiate its website and customer experience.

With a PWA rather than a traditional online store, Koala says it now has the flexibility necessary to work on its front and back ends in parallel. Koala developers can now deploy rapid changes, including performance boosts, without any downtime for the live site.

Likewise, Koala can also rapidly deploy customizations that differentiate the brand on the front end. In tandem with its PWA, the combination positions the company to deliver engaging content, most often in its inimitable brand voice, lightning fast. As an example, Bremner says Koala’s headless architecture recently allowed the company to build and deliver its new sustainability page in record time.

Koala product photo 3

“Our speed is achieved by the confluence of a well-thought-out design system, component library, page template generator, and CMS,” Bremner says. “They all come together seamlessly to make generating a new page like our recent sustainability page both simple and effortless. This allowed our sustainability manager to focus on writing the content, and not be blocked waiting on engineers or designers.”

Importantly, going headless has also allowed Koala to strip out unnecessary features that slow online storefronts and negatively impact the customer experience. Headless can help reduce the load on a user’s browser by transferring API calls to the brand’s server. When Koala’s backend functions were streamlined away from the user, the site’s response time became faster by multiples.

Most companies would kill for our velocity. The speed with which the development team at Koala is able to deliver solutions, from ideation to production, is triple what I’ve seen anywhere else.

Richard BremnerHead of Technology, Koala

Grow your business on the platform designed to handle more of everything

Let’s talk