Next-level UX and Performance with Headless

UX Solutions

Enhancing the user journey 

We wanted the new site design to have a user experience consistent with the SoundGuys brand, reflecting their customer convenience and advocacy values.

To do this, we established two primary goals:

1. Pump up the site speed to Mach 5

2. Fine-tune the mobile experience

With a breadth of content on the SoundGuys site (currently sitting at over 7,000 posts), users needed to be able to navigate through it seamlessly. Moreover, enhanced mobile speeds meant the website could serve as a convenient and portable tool when shopping in physical stores. 

Mobile devices have become increasingly used by consumers shopping in-store to compare prices, read reviews, and search for discounts. With 34% of shoppers using a mobile device in brick-and-mortar stores, enhancing the mobile experience was a way to add that extra value for SoundGuys’ audience.

Building the user experience

When crafting user experiences, we use the 7 principles of UX as guidelines and benchmarks. A user experience needs to be:

• Useful
• Usable
• Findable
• Credible
• Desirable
• Accessible
• Valuable

Building a fast and responsive website addresses several of these factors in and of itself. Consistent speed across all devices makes a website usable, useful and desirable. 

Furthermore, with Google’s Core Web Vitals, speed makes a product findable (which is also a nifty bonus for SEO).

Headless Implementation

The process 

We’re unashamedly Headless WordPress fanboys, so it should come as no surprise that the new SoundGuys site was built as a Headless WordPress PWA. But our reasoning for this CMS choice was motivated by more than just personal preference. 

Our primary reasons were these: 

• Easier to build a performance-focused front-end for both desktop and mobile
• Maintaining easy editorial access for SoundGuys staff
• Building scalability into the site

However, one of the most significant advantages of this approach was the speed with which we were able to roll out the new site. A process which involved designing a new site and migrating all their old content over to the new system (over 7000 posts and 20 shortcodes).

Ye olde headless framework

During our work with Android Authority, we built the entire Headless framework from scratch, a process which took over 8 months to complete. Once we’d built it, however, we had a solid foundation which we could use for future websites. 

And that’s exactly what we did. 

We expanded on the existing framework, adding new elements and content into a Headless WordPress web app. With this method, we blazed through development and got the SoundGuys website up and running in only 2 months!

2 Sound 2 Guys 

After implementing the new framework, SoundGuys saw major improvements in their page speed: cutting the Time To Interactive in half, reducing First Contentful Paint from 0.81 to 0.24 seconds, and slashing the Largest Contentful Paint from 1.13 to 0.39 seconds. Similarly, mobile performance got a significant boost, with load times being cut by up to 60%.

As for the user experience, we saw a positive response in engagement metrics such as:

• Time on page: +40%
• Pageviews: +20%
• Bounce rate: -10%

An optimised website is a happy website

The Headless WordPress implementation allowed us to enhance the performance and flexibility of the SoundGuys website while keeping the WordPress backend that the editorial team were used to. Through improvements to speed and mobile compatibility, we crafted a re-energised user experience that fully represented the SoundGuys brand and connected with their audience.