Objectives
- SUPER-FAST WEBSITE
Building Jamstack website for the highest performance and high Google ranks.
- HIGH GOOGLE-RANKS
Migration to Jamstack without a drop in existing high Google ranks.
- OUTSTANDING VISUALS
Creating high-resolution visuals to attract potential customers.
About Lyngen North
Lyngen North is a family business, offering accommodation in glass igloos and houses with uninterrupted views towards the Lyngen Alps and Lyngenfjord.
Challenge
- Low page speed
- Outdated technology
- Unatractive design
- Weak User Experience
The customer has a technical background, so he knew that he wanted to build a page with modern technology and get away from WordPress, which he found hideous and hard to maintain, especially in terms of managing the functionalities and integrations.
The main challenge of this project was to keep the high SEO ranks after the migration and create high-res visuals that won’t influence the page speed.
Goals
Bring more customers from the organic search
Decrease the bounce rate thanks to eye-catching design
Increase conversion rate with optmized UX
REQUIREMENTS
Lyngen North was looking for a future-proof solution to attract new customers. During the project planning, we distinguished the main requirements for the project:
- To make the website even faster
- To keep the high-SEO ranks of the website
- To create high-res visuals which will attract new customers
- Keep the code well-documented and clear, so it will be easily built upon
- Create a high responsive website, that would work blazingly-fast on mobile
Services provides
Sanity as a
Headless CMSOn-site SEO
Why did we decide to go static?
We decided to use the Jamstack approach and create a static website because it is a perfectly tailored solution for websites like this one. Jamstack meets all the customer’s requirements - it provides blazingly-fast and high-performance websites that rank high in Google Search.
Benefits of going static:
- Reduced page load time
- Reduced latency through CDN’s
- Easy content management
- The highest level of security
- Improved SEO
Why Gatsby.JS?
While deciding on the tech stack, we considered both Next JS and Gatsby JS, as they are the most popular tools to build in React.
We chose Gatsby for this project because the customer didn’t need the server-side rendering. The updates are not handled very frequently, and the only two dynamic elements - the contact form and booking system are both handled outside the website.
What’s more, the customer's main requirement was to keep the highest possible website performance, and Gatsby provides that, especially in smaller projects like this one. Gatsby also strongly supports high image compression, which was crucial to keep the website speed on the highest level while using high-res graphics.
We’ve prepared a deep comparison of Next.JS and Gatsby.JS - check out the video below.
Why Sanity?
Sanity was the best choice for this project because it works perfectly well as a headless CMS in Jamstack projects and provides full flexibility in content management.
Why Gatsby?
- Great for compromising high-res visuals and high page-speed
- Best for high website performance
- Provides high security
- Flexibility in building UX and UI
- Best solution for static pages without dynamic elements
Why Sanity?
- High flexibility
- Easy management
- Easily accessible
- Ideal for Jamstack integration
- Powerful free plan
Why did we cut the website’s head?
We decided to go headless because the customer wanted to avoid the limitations that he faced with the previous website, which was built on WordPress.
Headless CMS is the best solution for flexible content management in future-proof projects like this one. The headless approach decouples content management from the presentation layer, which brings many benefits, like
- Flexibility
Full control over the content appearance and information architecture.
- Seamless Integrations
Any chosen functionality can be connected via the respective API.
- High security
Decoupled front-end and back-end keeps the data secure from hackers attacks.
- Easy Scalable
Separated presentation and logic layers make the content adaptable to future modifications.
Should we get it done?
Let's talk about you now!
Tell us about your challenge, and let's get the ball rolling.
The Delivery
Since we have worked with Jamstack projects for over 10 years now, we’ve built a strict and effective Jamstack delivery process that consists of 4 main phases: Discovery, Design, Development & Testing and Launching.
Each phase consists of steps prepared individually for the project requirements.
Phase 1: Discovery
Correctly managed discovery helps to build the base for a successful project. In this particular project, we have focused on running a deep audit of the existing website to understand what influence the high SEO ranking and create outstanding visuals that affect the conversion rate.
During the discovery phase, we investigated the project deeply and chose the right Tech Stack for the project. After going through the information about the potential target group, analytics and earlier Lyngen North’s experience we understood, that we have to focus on a mobile-first front-end, as most of the visitors use mobiles to check out the website.
We can proudly say that the customer didn’t have any comments or amends after discovery, so we could quickly deep into the next phase of the project.
Phase 2: Design
We started this phase by creating UX designs to map the user journey and detailed wireframes that showed up the overall idea for the project.
Lyngen North mentioned, that on their previous website, the UX wasn’t good enough and the content may seem a little messy. We were focused on preparing clear pages with easy navigation, that are about to influence the conversion rate.
After the successful launching of the UX designs, we then started to create a user interface. We’ve prepared two versions of style scapes accordingly to the brand visual concept:
Once everything was ready and the customer was happy with our proposal, we focused on the final look of the project.
After the discovery phase we knew that Lyngen’s priorities were:
- Simple and organised look of the website
- Clearly displayed selling points
- Emphasize the uniqueness of their services
- High res visuals, that will attract the visitors'
So we’ve prepared the final look of the website, check out how amazing it looks!
Phase 2 and 4: Development & Testing
After the design phase, we rushed into the development, by creating the initial backlog, setting up testing environments and initial configuration for Headless CMS.
Then we recreated the UI components and page sections in the Storybook, so developers could test components in isolation.
We started working on building the static page templates using pre-build sections. Because page speed was the crucial factor for the customer, we were running the tests after adding each and every component, and if there were any inconveniences we were fixing them immediately.
At every step of the way, we were analyzing the page with the Lighthouse Scoring Calculator and kept an eye on the feedback from Diagnose Performance Issues.
To speed up the process even more every new feature’s or section’s branch had a separate link, so our developers could work on the project simultaneously without blocking each other.
The next step was preparing dynamic Gatsby.JS pages, integrated with third-party services. The main integration was Vizbook - a booking system that automates the booking process. Once the fully dynamic Gatsby was ready, we went through integration with Jamstack. We’re doing this separately for every page to make sure it is well implemented.
Phase 5: Going Live
In the final phase, we were focused on speed and SEO optimization, which were especially important for Lyngen North, because they had very good results before the migration, and didn’t want to lose it.
Even though Jamstack websites are in theory faster than the others, we have to run all the checks and make all the improvements to make it the best possible.
While working on technical SEO, we run the Ahrefs test, set all the redirects, and make sure that the search engine bots will crawl the page and index it in the right way.
What’s more, we ensure that the website is easy to navigate and free from any technical issues that can block the page from search engine rankings.
On websites where the visuals play the main fiddle, we have to pay great attention to image optimization to keep high website performance. We’ve prepared the code in the way that every photo is compressed to eight different sizes and depending on the screen size, the most suitable image version is loading.
Once we were sure that everything was safe and sound, we published the website on a production server, launched the project and tested it one more time to make sure that it works perfectly well.
The results speak for themselves.
Have a similar case? Use our experience!
Talk to our expert and see what we can to do push your project further.
