Localcoin

Migration from WordPress to Jamstack (with Next.js and headless Prismic)

The Objective

Release a Jamstack powered website to increase loading speed, enhance user experience, and improve conversion rates.

About Localcoin

Localcoin logo

Localcoin is a financial technology company that operates the largest cryptocurrency ATM network in Canada.

Services provided

Elevating SEO, speed, and performance with Jamstack

Jamstack is great for building websites that are superfast and SEO-friendly. That’s exactly what Localcoin was aiming for.

Outperforming monolithic WordPress

As you may know, a huge part of the world is using WordPress on a daily basis. Mostly because it’s just so easy to use it from the editor's point of view. Yet, in order to add any functionality, the popular way is to use plugins that are easy to install and often doesn’t require any development skills.

And although it seems tempting, we cannot really recommend using plugins too often, as they are the main reason, why your website slows down a lot.

On top of that, things are getting outdated quite fast in web development, so in order to scale, or make changes to your website, you may find yourself installing more and more plugins that will, sooner or later, cause huge performance and speed problems.

Dangers of monolithic WordPress

  • Decreasing conversion rates because of low performance and bad user experience of outdated user interface.

  • Decreasing organic traffic because of performance issues and weak technical SEO optimisation.

  • Low Google PageSpeed Insights results and no chances to improve on the current WordPress site.

  • Outdated, hard to manage technology stack, full of weighty plugins.

Jamstack for rescue

Localcoin wanted to make a technological switch and make their website not only performant, but also easy to manage.

Thanks to Jamstack, they were able to elevate the page loading speed and performance significantly.

When is Best to Use JAMStack Architecture?

  • To increase your conversion and sales
  • To boost your marketing channels
  • To outperform your competition online
  • To serve clients with much better UX
  • To cut the maintenance costs
  • To scale your business easier

If you are thinking of using Jamstack as well, you can find a step-by-step explanation on what is Jamstack, when, and how to use it.

And if you are wondering if you should use Jamstack for your own website, we will help you decide in the video below:

Choosing tech partner

Localcoin was searching for Jamstack agency online, and was also speaking with 3-4 similar agencies like Pagepro.

Some of the most important factor they were taking into consideration were:

  • Quality
  • Speed of development
  • Technical expertise
  • Experience in crypto

While approaching us, Michael from Localcoin mentioned that he really enjoyed the content we share on our blog (he actually called it the best Jamstack blog on the internet).

Why did Localcoin choose Pagepro?

  • Great Jamstack expertise
  • Cost-efficiency
  • Good educational materials

After a technical call with Localcoin team, we also shared our Jamstack expertise, were able to advise a few things, gathered all the required information and prepared our offer, that appeared to be the best if it comes to price/quality ratio.

And that’s how we became partners.

Choosing the tech stack

Localcoin's main objective was to migrate to Jamstack ASAP, to improve their core web statistics, and give the immediate performance boost to their website.

As soon as they got to this point, they were also ready to improve their overall user experience with completely new design implementation.

Next.js on the frontend

Localcoin wanted to keep absolute freedom over the frontend execution, and adapt their designs without a hustle.

This is why they decided to use Next.js as their frontend framework.

Choosing headless CMS: Sanity vs Prismic

On top of that, one of their top priorities was a switch to headless CMS for improved content publishing in the future. Especially to build multi-language landing pages easily.

They were considering two different options:

  • Prismic CMS
  • Sanity CMS

Both platforms had multi-language support, and both are pretty easy to use, however, this is how Chris showed the difference:

Localcoin on the Loom

Finally, they have chosen Prismic CMS, as it had slightly better user experience, and easier to manage multi-language support.

Next.js logo

Why Next.js?

  • Great speed and performance
  • Exceptional user experience
  • Unlimited customization
  • The best of Jamstack frameworks
Prismic logo

Why Prismic?

  • Easy to manage
  • Great user and editor experience
  • Easy multi language support
  • Great for Jamstack integration

Features and Non-functional Requirements

Core Website Functionalities

  • ATM:
    • Interactive Locator
    • Details Page
  • Multi Language Support - English & French /us sub-routing as well
  • Host ATM Form
  • Blog & Press Release
  • SMS subscription
  • Newsletter Subscription
  • Ability to create custom marketing landing pages

Non-functional requirements

  • Reducing page weight < ~500kb
  • Reducing network requests < ~50
  • High google lighthouse audit scores
    • For SEO, best practices and accessibility as close to 100 as possible, for page speed also as fast as possible but if possible around 70-80 for mobile and 80-90 range for desktop.

Third party tools & integrations

  • Google Maps Integration
  • Marketing Tools
    • Freshchat - live chat
  • Traffic Analysis
    • Google Tag Manager
    • Google Analytics
  • Forms / lead collection
  • Newsletters
  • SMS Subscription
  • Transaction Verify Form API

Main Project Milestones

We divided the execution plan into four main steps (milestones):

Step 1 Write CSS from scratch

Because of the visual composer / elementor WordPress plugin we couldn’t just take CSS and add it to Next.js website. We need to remove unnecessary code to make the website performant.

Step 2 Prepare Storybook static components library

We started with building a Static Components Library that allowed us to separate user interface work with programming work containing app logic, data and integrations. During the rebranding, we were able to update core components to update the look across the whole website.

Step 3 Develop Next.JS Website

At this stage, we connected all third-party APIs and data sources to static components to develop a fully functional, dynamic Next.JS website.

Step 4 Optimization & Release

Finally, we moved to technical SEO. During the final stage, we redirected (or removed) the old URLS and optimized the website for SEO and Speed.

The outcome

Localcoin screen 1
Localcoin screen 2
Localcoin screen 3
Localcoin screen 4

Tech Stack

  • Next.JS
  • Emotion
  • ThemeUI
  • PRISMIC
  • GitLab
  • Vercel

Quote from a client

"Pagepro exhibited strong execution. They understood our technical goals and our desired performance metric. They were also very detail-oriented, and helped us achieve the KPIs we set for the project, including a lighter website, increased speed, and better SEO ranking."

Michael Winer
Michael Winer

Build your own Jamstack website

Plan the right kickoff with our experts. For free!