Lyngen North
Building a Super-Fast Jamstack Website for the Extraordinary Hotel at the Edge of the World
About The Client
Lyngen North is a family business, offering accommodation in glass igloos and houses with uninterrupted views towards the Lyngen Alps and Lyngenfjord.
Challenge
The main challenge of this project was to keep the high SEO ranks after the migration to Jamstack and create high-res visuals that won’t influence the page speed.
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.
Low Page Speed
Outdated Technology
Unattractive Design
Weak User Experience
Lyngen North had 3 main goals in mind:
Bring more customers from the organic search
Decrease the bounce rate thanks to eye-catching design
Increase conversion rate with optimized UX
The customer 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
Want to Speed Up Your Website?
Tell us about your challenge, and let's get the ball rolling.
Solution
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
Technologies chosen for the project
Jamstack
Gatsby.js
Sanity
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?
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:
WHY DID WE CUT THE WEBSITE’S HEAD?
We decided to go headless because this 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 Integration
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 Scalability
Separated presentation and logic layers make the content adaptable to future modifications.
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.
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.
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!
3
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.
3
Launching
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.
Results
the form
the form
the form
the form
the form
the form
the form
the form
the form
HIRE TOP JAMSTACK DEVELOPMENT AGENCY
It's always good to talk to an expert. It's free!
Not sure which technology to choose?
Need advice on the next steps?
Hesitating on how to plan the execution?
Book a free consultation call with one of our experts and get help with your next moves.