From humble internal newsletter to advanced, multi-faceted CMS website.
📰 ➡️ 🌐
Cyber News Centre (or CNC) is an online publisher dedicated to increasing awareness and knowledge of digital security through expert insights and accessible content. The businesses' mission is to bridge the gap between cybersecurity experts and the general public, making complex topics more approachable and understandable for everyone.
I worked on the all aspects of the business and created the website on Webflow with custom code and multiple integrations.
CNC began its journey as an internal newsletter for a tech company specialising in cybersecurity. During my early involvement, worked part-time and assisted in creating images and scheduling this newsletter, which was originally named 'Cyber News Weekly;.
Significant data breaches at companies like Medibank and Optus highlighted the importance of increasing cybersecurity awareness. As this demand grew, the team at CNC chose to transition the business from an internal newsletter to a full-fledged online news publisher to meet this newfound demand.
In the early stages of branding the new online publisher, we aimed to create a modern and youthful image for CNC. We wanted to engage a younger audience who might not typically be interested in the traditionally dry topic of cybersecurity.
Cyber News Centre was created for the purpose of connecting people to cyber security news in order help them be safer online. In order to symbolise this connection we created an animated chain using the abbreviation CNC.
Feedback on the initial design was that it looked too youthful and not serious enough. Red was chosen as the primary colour to appear more bold and be reminiscent of a warning or cyber alert, representing that cyber security could have negative impacts if ignored.
Early iterations of the website (first 2 images below) were modelled off a classical news aggregator style in order to appeal to a sense of familiarity amongst news readers, but as the brand developed the business moved away from this style (last 2 images below) in order to stand out amongst a saturated market.
.gif)
.gif)
.gif)
Feedback on the previous logo was that the harsh edges made the brand seem unapproachable, and without an established viewer base the 'CNC' would not be recognised as 'Cyber News Centre'. To remedy this the logo was made to have smoother edges and display the name of the business as well.
Further feedback noted that the shape was no longer looked as obviously like a chain link and so wires were added to represent a link with technology through information provided by CNC.
The website needed a way to handle memberships. After research Memberstack quickly proved to be the best choice as it had the most support for Webflow. I designed and created a prototype, then implemented the final product using Webflow, Memberstack, and JQuery. Jetboost was later utilised for content favouriting, and integrated with Memberstack.
Click the image below to access the prototype dashboard built in Adobe Xd.
The video below shows the final sign-up process and user dashboard.
As the site grew, CNC also needed a comprehensive search feature. Below is the initial wireframe prototype I created, followed by the final product beneath it. Initially we used Algolia, but after implementing their search it became clear that a product like Finsweet be better suited as Webflow is their primary use case. The final implementation utilises Finsweet's Attribute library for CMS Load and CMS Filter functionality, and also contains some custom code for filtering through countries.
Click the image below to access the prototype search page built in Adobe Xd.
The video below shows the final search page in action.
To encourage user registration (even though it's free but requires an email address), I was tasked with implementing a system that restricted non-users from accessing too much 'premium' content. This was achieved by utilising cookies, JavaScript, and Memberstack to monitor and limit non-users to viewing a maximum of 5 articles before prompting them to create an account.
Finally, the business required multiple integrations in order to function as desired. I worked on implementing integrations such as MailerLite, Elfsight, Jetboost, Hubspot CRM, and more. This was primarily done with the use of Zapier.
