With a range spanning women, men, kids, and home, Superbalist’s local and international products are sourced to offer a broad mix of designer brands and affordable fashion suited to the budgets and tastes of millennial South Africans. While beautiful high-quality imagery helps bring the retailer’s offerings to life, the Superbalist team realised that their site wasn’t loading quickly enough, potentially compromising the conversion rate.
Goals
Reduce site load times
Reduce bounce rate and retain users
Improve conversion rate
Approach
Built a progressive Web App (PWA) as a single-page application
Maintained existing front-end user interface
Developed high-traffic landing pages into Accelerated Mobile Pages (AMP)
Conducted A/B testing over six-week period
Results
65% reduction in time for users to interact with site
21% drop in mobile bounce rate
36% more pages viewed per session
26% increase in conversion rate
6% increase in average order value
62% conversion rate uplift for AMP pages versus non-AMP pages
Superbalist’s marketing and product teams made the case for mobile website improvements to enhance load times. Almost 35% of mobile traffic was coming from organic and paid high-intent search queries, but bounce rates remained high.
Meanwhile, mobile web traffic was growing at twice the rate of desktop. On a 3G network, mobile web pages were taking more than 12 seconds to visually complete on average, and users had to wait as long as five seconds for a page to start to load. Superbalist’s heavy pages were averaging 1.5MB, which not only contributed to the speed issue but also posed a problem for data-conscious users.
With mobile the leading channel in terms of session numbers and new users, Superbalist hypothesised that improving the first-load experience would help the brand retain more users. To justify the time they would spend on development, the team estimated that for every one second of improvement in load times, they could expect a 27% increase in conversion rate.
The Superbalist team looked at both Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA) to help address their problems. They believed that AMP would tackle the first-time landing page user experience, while PWA would enable faster experiences for all the subsequent clicks on the site and also allow flexibility to add functionality and increase usability and engagement. And with the AMP-install service worker (a script that the browser runs in the background, separate from a web page, opening the door to features that don't need a web page), they hoped to combine the two technologies to enable users to start fast and stay engaged.
Although a PWA can be built incrementally on top of a responsive web site, the team decided to build their PWA as a single-page application, which involved completely rewriting the site but maintaining the existing front-end user interface almost exactly. The aim was to maintain maximum consistency to avoid extraneous variables in testing.
The original site was maintained alongside the new version in order to enable split testing. This also allowed Superbalist to identify issues without producing a major impact on business. The team controlled what traffic was served to the original site and to the PWA, comparing one against the other in the same time period. This approach was applied across numerous traffic splits over a six-week period.
“Working for a big e-commerce company, you don’t often have the chance to rewrite the platform from scratch. This was a challenging yet rewarding experience. Looking back it was worth the hard work – we’re now well-positioned for further growth.” – Peter Lehto and John-Mark Massey, Team Leads, Superbalist.
By using Google Analytics data, Superbalist pinpointed the landing pages with the highest traffic on the existing site in order to develop these pages into Accelerated Mobile Pages.
This work required just one dedicated developer, who started with the homepage, category pages, department pages, and brand pages. Once the PWA reached 100% of Superbalist traffic and the AMP pages were completed, Superbalist combined the solutions using the AMP-install service worker.
With the launch of the new PWA, the time it took for a user to be able to interact with the site dropped by 65%.
Superbalist’s A/B testing showed that the bounce rate on mobile dropped by 21% (19% across all devices) and that users were now viewing 36% more pages per session. This resulted in a 26% increase in conversion rate across mobile and desktop and a 6% increase in average order value.
When the team tested the impact of adding the AMP pages, they saw a 62% conversion rate increase compared to non-AMP pages.
One of the key features that Superbalist’s PWA now extends to users is the ability to launch the site directly from the home screen of their mobiles. Engagement among these users is excellent: they spend more than twice as much time on site and view almost three times as many pages as the average mobile user. The conversion rate from this channel is more than 250% higher than that of other mobile web users.
Looking ahead, performance remains a big focus for Superbalist. The team will continue developing AMP versions of their pages, and they’ve begun pointing their ads to AMP landing pages – a tactic they’ll stick to as they add AMP versions of more product pages.
Meanwhile, they’re working to optimise their PWA further for load time reductions and they plan to promote the ‘Add to Home Screen’ feature to expose an increased proportion of users to the superior PWA experience.
Superbalist is also keen to start testing web push notifications, based on the understanding that there will always be users who prefer not to download a native app. And thanks to their PWA, they can ensure that the user experience is just as good.
“For the majority of our customers, the very first experience of our product and brand is through mobile web. The re-platform to PWA and AMP is our first step to ensuring that experience is fast, seamless, and enjoyable.” Anita Pyke, Head of Product, Superbalist
