Building a Headless Solution for the Enterprise

Creative tech agency whiteGREY used a headless WordPress configuration to quickly bring local pricing to the website for Volvo Car Australia.

Industry: Digital Agency + Automotive

Site: volvocarspricecalculator.com.au/

Challenge: Quickly build an accurate pricing tool for Volvo Car Australia, where multiple taxes and fees make a final vehicle “driveaway” price difficult to calculate.

Solution: whiteGREY worked with WP Engine to build a headless WordPress solution that pulls from Volvo’s global infrastructure with a new interface that delivers more transparent pricing for each Volvo model to Australian car shoppers.

Results: The entire site was launched within four months and delivers a competitive advantage for Volvo Car Australia.

whiteGREY is the Australian arm of the globally renowned Grey Group. Born out of the collision of creativity and technology, whiteGREY is a Top Ten Agency in the Pacific (Cannes Creativity Report 2019) and #38 Most Effective Agency in the World (2019 WARC Global Ranking).

"So many businesses are pursuing a dual CMS strategy today, particularly for headless solutions. The second CMS they’re using is almost always WordPress. We wanted to take advantage of the same strategy."

—–Juan Garcia, Head of Technology, whiteGREY

A MULTI-PRONGED CHALLENGE

Providing prospective car-buyers with an accurate “driveaway” price is difficult in any market, but in Australia, the challenge is tenfold. With a laundry list of taxes and fees for automobiles, searching for the final, drive-off-the-lot amount you'll pay for a particular vehicle can be downright confusing.

In an effort to cut down on the confusion, and provide its client with a simple, all-inclusive pricing tool for its website, creative tech agency whiteGREY, together with the Volvo Car Australia Digital team, set out to build a pricing calculator that could pull in each and every applicable tax fee for all available Volvo models in Australia.

The challenge was multi-faceted. One aspect was compiling all of the needed tax data, which on its own was a gargantuan task. The whiteGREY team also wanted to respond to market demand quickly and knew that building the solution through Volvo’s global web infrastructure could mean waiting for the completion of long development cycles.

“Working with these large, global configurations can have its benefits, but the moment you need to build something at the market level, it can become an uphill battle,” said Head of Technology at whiteGREY, Juan Garcia. "Based on that, we ultimately made the decision to look for other options that would allow us to build this tool quickly.”

whiteGREY had teamed up with WP Engine on previous projects, and while Garcia noted that WordPress is not his first choice for every project, he knew it would be the right fit for this particular solution.

“So many businesses are pursuing a dual CMS strategy today, particularly for headless solutions,” Garcia said. “The second CMS they’re using is almost always WordPress, and we wanted to take advantage of the same strategy.”

A HEADLESS SOLUTION

Volvo Car Australia's pricing calculator, built by whiteGREY

Armed with a vision, the whiteGREY team proposed their idea: a separate site, built alongside and connected to Volvo's global infrastructure, that would quickly offer users the ability to calculate final pricing for the car they wanted.

"We assured our client that the user journey would be extremely clean—it was obviously important that users didn't experience a disconnect when coming to this site from Volvo's global site—and we told them that we'd be able to finish the project in less than six months," Garcia said.

With Volvo's blessing, whiteGREY got to work, building the site mobile-first, as they knew the majority of users would be accessing it from their mobile devices.

"We didn't even look at the site on a desktop until the last design sprint," Garcia said. "That's how important it was for us to get the mobile experience right."

Garcia's team also designed the site as a headless solution, meaning, the WordPress backend is completely decoupled from the website's frontend.

One benefit of using a headless configuration is that the site data isn't linked to the user interface, allowing for faster page load times and overall sleek user experience. For the solution built for Volvo Car Australia, the user interface—not the backend—calls the same APIs as Volvo’s global site, lending to a seamless experience when users switch between the two properties.

“Beyond that part, the rest was relatively simple,” Garcia said. “There’s a homepage, a filter on top, it uses REACT and Redux. The tech behind the scenes is pretty cool but overall, the project is also super simple.”

The Results

Working together with WP Engine, whiteGREY was able to deliver a completed solution to Volvo ahead of time—four months after they began working on the project.

Volvo Car Australia is also able to add new models to the Australian market more easily as it can rely on the pricing calculator to quickly spin up pricing information.

"Using the tool, we can get a car up on the site in less than ten minutes, "Garcia said.

"Because we're using a headless configuration, we only store the information we need, so armed with a new vehicle's specifications along with a couple of images, we can set it up in the staging site and start viewing how it will work in the system in minutes."

The pricing tool is also extremely fast and user-friendly. While it wasn't the first pricing tool in the Australian auto market, it is the fastest, including a simplified, three-click user journey that brings up the final price, and the fastest page load speed (according to Mindshare's speed audit).

Part of this is achieved by how the app loads, keeping the number of requests very small (under 35) and also small in size —1.5MB—making the initial site load under one second.

 

 

Based on a recent Pingdom test for the site, the page took 607 milliseconds to load, used 32 requests, and weighed in at 1.5 MB.

Speaking about the project overall, Garcia said the entire cast of players who made the project possible was integral to its success.

“We had amazing support from the Volvo Car Australia, Volvo Global, and Mindshare teams, and our team at WP Engine was stellar. “In addition to providing their trademark support and expertise for this type of WordPress project, they really served as a partner for us and helped us take the project over the finish line," Garcia said.

"We'll certainly be working together again in the future."

BRING YOUR DIGITAL VISION TO LIFE 

From headless solutions to mobile optimization, today WordPress is relied on as an agile platform alongside large, legacy web infrastructure.

Enterprise organizations are increasingly using WordPress to go to market faster and bring digital ideas to life at the market level, without waiting on long development cycles.

Click here to find out more about WP Engine and the way we help customers win with WordPress across all of their digital channels.

Related articles.

Multi-CMS, WordPress, and Headless in the Enterprise

Explore

Connecting the Enterprise with Today’s Mobile-First Consumer

Explore

Headless WordPress and Content Management Systems

Explore

Chat with us!