A Faster-Rolling Website for Raleigh Bikes

Michelle Gienow
September 3rd, 2020

Raleigh Bikes had a need for speed in its online presence. UK-based Raleigh — part of the Accell group, a leading electric bicycle manufacturer in Europe — had long relied on a sprawling website offering hundreds of different bike models. The selection was spread across multiple categories (classic bikes, electric bikes, mountain bikes, etc.) and purchase pages, with a set of filters to help consumers find the right ride for their needs and age range.

The site was comprehensive and also attractive, but pages took a while to load — slowing down consumers seeking to learn more or even make a purchase. Worse, during peak sales periods traffic spikes would sometimes crash the site.

So when time came to renew the license for the open-source e-commerce platform underpinning Raleigh’s site, executives at the Accell Group opted for a full makeover—one with all the bells and whistles. They sought a faster site that would draw more customers and offer flexibility in the purchasing process, while consolidating it and all of the other Accell’s company websites under one digital umbrella.

What Accell wanted most was scalability—a platform that not only improved the site’s functionality, but laid the groundwork for easily expanding future websites featuring the complete range of its wares.

The old site: a headache to manage

For a company that prides itself on getting people moving with comfort and ease, Raleigh Bikes’ website didn’t follow the formula. Founded in 1885, Raleigh Bikes has a reputation as a venerable producer of quality bikes. 

Raleigh’s online presence failed to put its best pedal forward, however. Buyers were getting shut out when its site went down during peak shopping periods. Too many others navigated away, tired of waiting for pages to load.

This presented Raleigh Bikes with both short-term and long-term problems. During the pandemic, many more people are home working on computers, from which they also purchase goods. At the same time, many are looking for safe ways to get out and exercise. Raleigh Bikes officials knew that the company needed a digital transformation in order to meet demand and keep its business spinning.

So last year it hired Oberon, a Dutch digital platform development company, to rework the site’s front end. During the past 25 years, Oberon has become a European leader in digital platform design, creating every type of tech that people need to log in to use. Accell worked with Oberon, providing many of the project’s research functions and collaborating in the site’s new design.

“The original Raleigh site wasn’t exactly super fast,” says Jari Zwarts, a senior product developer at Oberon. Each user action — from downloading a page to adding an item to a shopping cart to checking out — required a frustrating wait time. Additionally, the customer management system was costly and offered little opportunity for developers to improve it. “The original site wasn’t really modern,” Zwarts explains. “It had an old-fashioned approach to e-commerce that needed to be upgraded.”

 

And reliability had become the most concerning issue. “You want your site to be as present as possible,” Zwarts says, “and they weren’t achieving that.”

 

Rebuilding the modern way

Oberon developers began rebuilding the site from scratch in November. The team relied upon UX research that the Accell Group had conducted earlier, with an eye toward optimizing the site for SEO and ease of navigation. 

 

The Oberon team was familiar with Gatsby and the framework’s many built-in advantages — customizability, lower cost, SEO, performance. They had in fact used Gatsby to remake the company’s own site and decided to roll those same assets into the Raleigh project.

 

“What we like most about Gatsby is the speed — that it brings performance as part of the package,” says Richard van Willegen, lead front-end developer at Oberon. “Gatsby also gives designers a lot of freedom and flexibility to expand as time goes by — an ability that was lacking in Raleigh’s old site.”

 

Accell also liked Gatsby’s static pre-rendering. “The backend system does not request processing to get pages up anymore,” van Willegan says. “Gatsby eliminates the need for that. Using Gatsby in combination with cloud hosting is just a great solution for several issues we needed to solve, and also lowers hosting costs.

 

It took the Oberon and Accell teams a little more than six months to fully roll out the new Gatsby-powered Raleigh Bikes site, from proof of concept to final product. But the results were worth the time, they agree.

 

Oberon has already taken advantage of Gatsby’s inherent composability to scale up site offerings and expand them to other in-company sites. Developers and designers can easily add or alter files to create a different look that immediately propagates across the entire site by applying design tokens. These strings of reusable code can be used almost instantly across sites in different ways to quickly refashion a site’s function and appearance. 

Oberon’s team can now use the same code base to build out as many as 10 other Accell sites, each representing a different brand within the company. The work is easier and faster. And the impressive results of the new Raleigh Bikes site has effectively given them the green light to implement Gatsby across the rest of the Accell company’s wide and varied web properties.

Merrily we roll along

The brand new Raleigh.co.uk went live in Summer 2020. Though it’s too early to run the numbers to see how much bounce rates, SEO and other outcomes have improved, Accell has been happy with the results, Oberon technologists say.

“We got very positive feedback, and comments about how incredibly fast the website is now,” says van Willegen. “We also did a complete user experience overhaul. So the whole design is new and the site is modern.”

Michelle Gienow
Written by
Michelle Gienow

Writes things @ GatsbyJS. Chaotic good frontend dev, caffeine addict, backyard chicken wrangler 🐓.

Follow Michelle Gienow on Twitter

Tagged with case-studiesView all Tags
© 2020 Gatsby, Inc.