How we helped F2N2 decrease costs, improve website security, increase visitor engagement, and pulp propaganda with style.
The Challenge
F2N2’s WordPress website was slow and the design wasn’t user-friendly, making it hard for people to find the information they needed. It kept crashing because of updates and third-party plugins, and was frequently attacked by hackers (94% of hacked websites are running WordPress). As a result, the company had a team of developers working full-time on maintenance alone.
The solution
We designed and built a highly secure website that runs smoothly on all devices, is easily customizable from the control panel (CP), and has a fast loading time. This reduced costs and increased visitor engagement.
The game plan
Migrate from WordPress to Statamic
Replace jQuery and Bootstrap with Alpine.js and TailwindCSS
Redesign using UI/UX best practices
Fighting False News Narratives (F2N2) is a digital project from North Macedonian citizens’ association MOST. Since 2018 it has published thousands of articles related to disinformation and fake news to challenge the influence of authoritarian regimes and Russian propaganda. It’s a sensitive topic, attracting hackers who want to breach the website’s security and take it down.
600%
INCREASE IN ORGANIC TRAFFIC
90%
REDUCTION IN COSTS
130%
FASTER LOADING TIME
99%
UPTIME
With the new site up and running, F2N2 received positive feedback every day. People who had been frustrated with the website started to return, and users overall were spending three times longer on the site.
With a fully modular and secure Statamic site, the spend on hosting services was slashed. And maintenance costs were cut too, as regular updates didn’t break the website, meaning F2N2 no longer needed to pay two full-time developers to keep things running.
The migration to Statamic, along with replacing jQuery and Bootstrap with more advanced solutions like Alpine.js and TailwindCSS, dramatically improved loading time.
Because Statamic is built on Laravel, widely regarded as the most secure and well-maintained PHP framework today, we decreased downtime caused by hackers to virtually zero.
Book a free call and have a no-strings-attached chat about your ideas.
A complex project like this, with multiple third-party integrations, data migration, and a complete redesign, takes time. We worked hard to define all requirements up front and gather as much feedback from the client as possible throughout the process. This meant we could produce a bespoke design that made sense for F2N2 and offer the most appropriate solutions.
We created a bespoke website, made from custom building blocks, giving F2N2 more flexibility and control. This approach meant the client could add, rearrange, and remove certain sections of the site without worrying about it impacting functionality. One custom building block lets F2N2 keep article titles short to save space but add an icon, which users can hover over for more information.
Find out about more of the bespoke blocks we built below.
92
Performance
98
Accessibility
92
Best Practices
92
SEO
F2N2’s website is complex with hundreds of articles in multiple languages and thousands of users every day. It needed to be super-fast, while handling high traffic and regular cyber attacks.
To optimize performance across the site, we cached all the posts and ensured users only viewed cached pages. When a post was edited, the cached content updated automatically.
For the home page, which includes more than 30 posts from different categories, we used Statamic’s No Cache Tag feature to specify which sections of the page we wanted to exclude from caching. That way, in those sections, live information would always be displayed.
Before and After: Hero Section
The CP provides a seamless experience, letting you toggle certain functionalities on or off for each of the website’s building blocks. We set some required fields so F2N2 staff wouldn’t accidentally forget to complete them. And we enforced validation of specific fields depending on the data of other fields, offering them multiple variations of the same building block.
For example, F2N2 wanted different background colors in a section of the site designed for displaying quotes. We set the fields so the background color would change depending on the type of author the quote was from, for example, internal writers and external experts.
Book a free call and have a no-strings-attached chat about your ideas.
We were lucky to be provided with the Brand Guidelines from the Organisation itself. Using their Guidelines, made the design process much easier and easily implementable for a UI/UX design. From using the colors and generating shades, we were happy to give the client the results they expected.
#373737
#FF00AA
#FFFF00
#00E6FF
#00DB99
#F84700
F2N2’s site was built with Visual Composer, which adds its own tags to the content, making it much harder to migrate posts to Statamic. Exporting the images and post links was also a challenge because they were shown with “IDs,” not URLs. Thanks to our full-proof migration process, we were able to successfully move all the posts.
Find out more about how we make migrations happen here
There were situations where the client captured long screenshots of articles. These took up a lot of space on the page. We proposed cropping these images and fading them out, with a “show image” button, so users could decide for themselves if they wanted to see more of the image or keep reading the article.
Each post had a gallery section made up of multiple images. Rather than have all these images dominate the page, drawing attention from the written content, we designed a smart slider to display them. It looks professional, takes up less space, and works great on desktop and mobile.
The new site lets the client create a progress timeline, containing a header, description, and image. Using the CP, they can add, modify, or remove items with ease. Here you can see an example of the timeline and how it appears in the CP.
F2N2 users had complained they struggled to find specific posts on the site. And because of the sensitive nature of the articles, they didn’t want to use search functions where their data would be saved on an external server. To overcome this, we implemented Fuzzy Search.
Fuzzy Search looks for results that are close to the search term, even if they are not an exact match, and the data is saved locally thanks to Javascript library fuse.js, making searches wider, more effective, and user-friendly.
Up Next
How we joined forces with Chillidog Hosting to step up its website’s performance and improve user experience for a global customer base.
Read Case Study
