Problems with our existing stack

My team at Nord Security is responsible for building and maintaining websites for the fastest VPN in the world, NordVPN. We have multiple marketing sites built by different people at different times. Some were made with Gatsby, and others with WordPress and a home-grown React-based SSG (static-site generator).

Those websites served us well. However, rapid scaling has caused issues with website performance, which has a direct impact on sales and marketing. It’s a proven fact that a reduction in website performance (for example, slower load times) decreases sales. This has been demonstrated in studies from WPO Stats.

As the business scaled, my team had the challenging task of researching and proposing a tech stack to rebuild our websites and achieve optimal marketing potential.

A challenge

There was a lot of work to be done. We had more than 20 locales, 10 currencies, and thousands of pages. Personalization had to be considered, and A/B testing implemented. Supporting an ever-expanding list of requirements while still achieving optimal performance felt like an impossible goal.

We tried different frameworks — Next.js, Preact, SvelteKit, and Elder.js — and even tried building server-side rendering and island architecture with Svelte. We had to find the best systems to satisfy the needs of content editors, data analysts, and engineers.

Of course, it’s not every day that a team gets a chance to rebuild their websites from scratch. We knew we could create something great, so we wanted to make the most of this opportunity.

Enter: Astro

As our research continued, it became clear that Astro, an all-in-one web framework, ticked all our boxes. We had initially ruled out Astro because it didn’t offer server-side rendering, but when this feature was added in 2022, we knew that we’d found our framework.

Astro is not a mainstream framework, of course, and when we were considering it, the framework was still in beta. Going down this route was a risk, but it was one we were willing to take. Why? Because not only did it fulfill almost all of our requirements, but it already had a vibrant and active community and a responsive developer team. New features are planned, implemented, and delivered several times a week.

Along with server-side rendering, Astro’s developers had added Node.js support and edge deployment. These factors facilitate streamlined continuous deployment and enhance the power of a globally deployed content delivery network, allowing for unmatched performance. Edge deployment with Cloudflare, Vercel, and Netlify involves only a few simple steps, but the impact is huge.

With just a few lines of code, we now had server-side rendering enabled on our desired deployment server:

Benefits of Astro

During the research phase, we noted that Svelte syntax, being a superset of HTML, was much easier to work with than React syntax. The same went for Astro. We have hundreds of different components to implement, most of which require little to no JavaScript, so being able to convert them to the HTML-style syntax of Astro made those components more readable.

The complex components that required client-side JavaScript and reactivity were another story. Our main requirement of reaching optimal website performance pushed us to try something new: SolidJS.

SolidJS is performant-reactive and simple for building user interfaces. It uses JSX syntax, works well for server-side rendering, and offers outstanding performance. It does all this with a fraction of the size of other libraries that usually come shipped with a browser.

Furthermore, both Astro and SolidJS share the concept of so-called vanishing components. Components exist to organize your code and not much else. What is shipped to the client is pure HTML and CSS.

Client-side JavaScript is an opt-in feature in Astro. Unless you specifically use one of the client directives, the component is shipped with 0kb of JavaScript. Of course, you also have the option to bundle global or local scripts straight from the component code.

SolidJS and other framework components are inserted into Astro files using the “islands architecture” pattern. The pattern was proposed by Katie Sylor-Miller in 2019 and is expanded in this post by Preact creator Jason Miller.

Here are the possible client directives for making “islands” interactive:

• client:load — Loads JavaScript and hydrates the component on page load.

• client:idle — Loads JavaScript and hydrates the component after page load once the main thread is idle.

• client:visible — Embraces the power of Intersection Observer API and loads JavaScript only if the component becomes visible.

• client:media — Useful in cases where certain components should be visible and interactive only on certain screen sizes.

• client:only — Skips server-side rendering and runs the code on the client. Be careful with this one because it can push down your SEO scores.

Some parts of the page can be fully static, without any JavaScript needed, while other parts, or islands, may require JavaScript. The process of resolving the component state is called hydration.

Though the JavaScript community is still split over whether hydration is the right approach compared to resumability, it solves our current problems nicely. More information about the hydration topic can be found in this great article.

With Astro, islands come with another benefit: various component framework support. It offers flexibility when choosing a UI framework and has integrations to work with React, Svelte, SolidJS, and Vue. Of course, you won’t typically mix those, but it gives you flexibility and room to maneuver.

The results

To see how well it worked, check out the Lighthouse scores for one of our new websites:

The other projects integrated well with our Cloudflare Pages, and more will be built soon!

The pace of releases, weekly community calls, RFCs, the involvement of the core team, and its vibrant community all serve to confirm that we made the right choice with Astro.

In this interview, we speak to Joanna Rusin-Rohrig, Germany country manager, and Ieva Račienė, brand manager – the two NordVPN insiders who made this campaign happen. Read their interviews and find out the full behind-the-scenes story of this 360° NordVPN branding campaign in Germany: from idea creation, planning, and development to the final results and lessons learned.

From campaign idea to execution

Could you briefly introduce the campaign you just launched?

Ieva: Yes, we call it the “Safely be you” campaign. It was a huge milestone for our organization because it was the first 360° branding campaign ever done at NordVPN when all channels were aligned and focused on one message:

Switch on privacy. Switch off trackers and viruses. Go Nord. Safely be you.

(Privatsphäre ein, Trackern und Viren aus. NordVPN. Ganz sicher du selbst.)

With this key message, we wanted to stress the importance of privacy and make a connection with the usage of our product. Unlike the general approach that focuses on risks and dangers by showing hoodie-wearing hackers in dark rooms trying to steal personal data, we concentrated on more modern and positive messaging emphasizing the emotional benefit of safety. NordVPN protects you and your daily actions online: private messages, social interactions, and transactions. Nothing can be more important than that.

This “Safely be you” campaign aimed to show that everyone’s digital life has the same or even more threats than their “real” lives.

Is it any different from the usual NordVPN campaigns? If yes, how?

Joanna: In fact, it was very different from the usual marketing activities, which are strictly driven by performance indicators. This was the first time NordVPN launched an awareness campaign and the first time we implemented one in Germany.

What did the development of the whole branding campaign look like? Could you give us a sense of the development and implementation stages?

Ieva: It took us eight months to get from idea approval to campaign launch. To tailor the campaign to the German market, we first started looking for external partners.

From day one, our media team, in cooperation with our long-term partner, The Specialist Works, started analyzing media opportunities and best practices in the country and working on an appropriate media plan to promote our creative approach. Meanwhile, our other partner – the team at Influence.vision – helped us find the best influencers. For designing our video ad, we chose a local creative agency, Jung Von Matt. Together, we developed a creative concept called “Safely be you.”

To sum up, not everything was done by our external partners – a large part of the visual design and creative copywriting was done in-house.

Joanna: To give you a feeling of how big the project was: we developed nine separate media plans, from out-of-home advertising to mobile influencer activation. It was a huge team effort to create and execute them on time. More than 100 people worked together internally and in external teams on the execution of the whole campaign.

And speaking of branding campaign promotion tools, what kind of marketing channels were used to launch this campaign? How did you select them?

Ieva: As it was a 360° campaign, it covered all possible marketing channels: TVC, radio, OOH, PR coverage, dedicated celebrity campaign, influencer integrations, social media, PPC, various mobile app ads with full digital scope, and more. We also leveraged high-reach and visibility placements, and our SEO team covered various content clusters.

Joanna: Our main KPI for the campaign is the improvement of the upper funnel metrics – awareness and consideration levels in the market. Therefore, we chose channels and platforms that index highly on reach and reliability in our target group for us to achieve maximum penetration in the market with the given budget.

How are you measuring the success of each marketing channel that was used?

Joanna: Apart from the overall awareness level increase, we defined separate KPIs, like a specific CPA for TV or a level of positive sentiment for influencer integrations. These are our pillars of measurement that allow us to establish whether or not we can regard a certain action as a success or failure.

Cybersecurity awareness in Germany

Your main goal is to raise awareness about personal cybersecurity among the German population. How aware are they of the threats they face online, and are they ready to embrace new technology for their cyber protection?

Joanna: According to our research data, Germans spend almost 25 years of their lives online. However, only 21% of them can say they are well aware of the different ways to secure their devices. Even though secure Wi-Fi is relevant to 69% of Germans, only 23% use a VPN to keep their connection safe at all times. This means that although people would like to browse the internet securely and privately, the burden of achieving this goal seems too big. With the campaign, we want to inform our relevant audiences how easy it is to be safe online.

Source: nordvpn.com

With the company in full swing now, how would you rate the first results in trying to achieve your main goal and increase NordVPN product usage in Germany?

Joanna: We definitely see a big interest in the topic, and search queries both for the VPN category and NordVPN are increasing significantly. With it, we see increased traffic numbers for our German website and prolonged time spent on the pages. We are waiting for comprehensive post-campaign research results to analyze more in-depth what influence the campaign had on all customer journey stages.

For you as a country manager, what was the most challenging part of running this campaign, and why?

Joanna: My role in this big project was to consult all teams to help them to achieve the best-localized approach. Another important part was to create a link between our headquarters and agencies operating for us in Germany.

Most people working on this campaign do not speak German, so my local team supported them on all language, copy, and influencer content-related tasks. With literally thousands of various marketing campaign design pieces and copy, keeping tabs on everything was challenging, but we managed to spot all mistakes on time.

Tips for a successful branding campaign

What is the most important thing to consider when launching such branding campaigns? Do you have any advice?

Ieva:

1. Form a team you can trust. This is the most crucial part of all projects. Whether it is your colleagues or external partners, I strongly suggest gathering a team you can trust 100%. And if the team consists of professional and dedicated people ready to go the extra mile, they’re destined to succeed.

2. Know your users or the people you are talking to. Understanding their needs and how we can help to solve their problems is the key success factor to being relevant.

3. Have the courage to do things that were never done before. In our case, having the first branding campaign focused on an emotional message might have been seen as a challenge at first, but we took the risk because the challenge might pay off massively.

Joanna:

1. Have your KPIs and measurement methods established before you start planning, and make sure that all the team members are on the same page.

2. Think of having regular check-ins with all the team members involved so no information gets lost on the way.

3. When you are done with all the project planning, go ahead and add an extra month to it. 🙂 Life happens, and this buffer will allow you to find solutions for challenges that arise on the go.

Tests are not useless!

With Pavlo Mikhailidi

Fuelled by a recent encounter with an anti-tester, our Senior PHP Developer, Pavlo, set out to prove that testing is a necessary practice for all developers—not just QA. He explained that good testing saves time and headaches and can even double as documentation. Increasingly complex codebase requires proper care, and modifying one part can break several others. In these cases, testing is your go-to remedy.

He went on to cover the attributes of good testing, shared below, and to debate the trade-offs between bad testing and no testing. Finally, Pavlo passed along some recommended resources for upping your testing game: Unit Testing Principles, Practices, and Patterns, Test-driven Development by Example, and The Art of Unit Testing.

Here are the attributes of a good test that he shared:

• It protects against regression

• It’s resistant to refactoring

• You get fast feedback

• The test is maintainable

Watch the full recording of Pavlo’s presentation here.

Scrum sucks

With Oleksii Ustenko

Our Senior Android Developer, Oleksii, explored how Scrum is often misunderstood and misused. All-in-all, he actually likes Scrum but understands why people might grumble about the rigidness of the structure. What’s important to remember is that Scrum should be people-centric at its core: humans working together to create value for other humans. And each ceremony exists to drive that goal forward. Like many things in life, Scrum works best when motivated individuals have the trust, support, and understanding they need to get the job done. And Scrum, understandably, goes wrong when management or bureaucratic processes steal ownership away from teams.

He concludes that Scrum is not the silver bullet some of us want it to be. If something isn’t working, each person involved is responsible for speaking up and proactively suggesting improvements—respectfully. Scrum worked well for the use it was invented for, but every team is different. Take the time to understand the context behind why certain ceremonies exist, learn from past mistakes, and find the process that fits your team best.

Watch the full recording of Oleksii’s presentation here.

Securing your API using Cryptography

With Dovydas Bespalovas

In this security deep-dive, Dovydas, our Guild Tech Lead, laid out the basics with different types of cryptography algorithms and functions: Hashing, Encryption, Digital signatures, Key derivation function, and Key exchange. He then explained the evolution of Secure Sockets Layer (SSL) to Transport Layer Security (TLS) and how it’s used and certified. Going one step further, Dovydas got into the differences between ‘Authorization’ and ‘Authentication’ and shared a step-by-step example of how both information security processes can be put into practice. After that, he concluded that such necessary security measures come with extra work and extra complexity.

Watch the full recording of Dovydas’ presentation here.

 

Future tech events in Berlin

If you’re interested in learning more, join our future NordTech events live in Berlin or watch them online. Follow us on meetup.com to stay up to date with upcoming knowledge sharing, networking, and other future events at Nord Security.