The Objective
Release a Jamstack powered website to increase loading speed, enhance user experience, and improve conversion rates.
About Localcoin
Localcoin is a financial technology company that operates the largest cryptocurrency ATM network in Canada.
Services provided
On-site SEO
Optimization
Prismic
as a Headless CMS
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:
Finally, they have chosen Prismic CMS, as it had slightly better user experience, and easier to manage multi-language support.
Why Next.js?
- Great speed and performance
- Exceptional user experience
- Unlimited customization
- The best of Jamstack frameworks
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.
Should we get it done?
Let's talk about you now!
Tell us about your challenge, and let's get the ball rolling.
The outcome
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."
Have a similar case? Use our experience!
Talk to our expert and see what we can to do push your project further.
