Petri Icon

Petri.com

Petri Icon
Petri Icon

Petri.com PUBLISHING

The project aimed to achieve three primary goals: redesigning the website, enhancing user accessibility, and significantly improving page speed and SEO optimisation.

Website Stack

  • Project Delivery Time

    • Design: 1 month
    • Implementation: 2 months
  • Platform

scpetri 1

Overview

Petri.com has undergone a major overhaul thanks to Enlivy. The website now boasts a more attractive design, improved user-friendliness, faster loading speeds, and better SEO optimization. Enlivy achieved this by integrating various plugins, converting hard-coded features into customizable formats, and developing advanced custom fields for better functionality. Additionally, custom post types were created to meet specific content requirements.

The objective

Enlivy had three main goals for their project: revamp the website’s design, improve user accessibility, and optimize page speed and SEO. Our team worked closely with BWW Media to rebuild petri.com with a new design that prioritized performance and user experience.
 


We paid close attention to every detail and made sure that the final product was in line with their specifications, and went above and beyond their expectations.

scpetri 2 scaled

Context and Challenge

Petri.com, a division of BWW Media Group, is a trusted resource for IT professionals. With 15 years of experience, Petri.com provides valuable content and fosters an active community within the IT industry. The company is committed to providing excellent resources that help IT professionals excel in their roles and recognizes their essential role in ensuring seamless operations and productivity for organizations.

Petri.com is an effective ad platform for IT professionals, with 1.5M unique visitors and 2.2M pageviews. 85% of new traffic is from organic search. Half of visitors are from North America and the UK.

The redesign project for petri.com called for meticulous planning, development, and rigorous testing. Our objective was to meet the client’s requirements and elevate the user experience to new heights. Through a thorough analysis, strategic decision-making, and robust implementation, we accomplished a successful transformation of petri.com into a cohesive and visually captivating platform.

Our top priorities for the project:

  • Elevate the visual appeal, optimize the user interface (UI), and enhance the overall user experience (UX).

  • Introduce additional custom post types to cater to specific content requirements

  • Optimize the website’s performance, with a particular emphasis on enhancing its Search Engine Optimization (SEO) speed.

  • Establish a secure and efficient user login and registration system.

  • Enhance the website’s efficiency by eliminating the use of external plugins and integrating their functionalities directly into the website’s theme.

  • Streamline the website’s administrative processes by transforming a substantial portion of its hard-coded features into a more accessible and easily modifiable format

The process and Insight

At the heart of our creative concept for the website redesign was a focus on user accessibility and speed. We sought to develop a contemporary and visually captivating design that not only appeals to the target audience but also prioritizes seamless and enjoyable navigation.



Striking the ideal balance between aesthetics and functionality, our objective was to create a visually pleasing design that effortlessly guides users through the website’s content, resulting in a highly user-friendly interface that enhances overall accessibility and ensures a swift browsing experience.

  • I. Project Scoping

  • II. Mockups & Design

  • III. Development

  • IV. Testing & Polishment

  • V. Delivery / Go Live.

  • VI. Maintenance

DISCOVERY

Design the right thing

DELIVERY

Design things right

After finishing the first design phase, we conducted thorough usability testing to collect feedback and recognize areas that needed improvement. We took that feedback into account and refined key elements, including the layout, navigation, and filtering options, to enhance the user experience and provide a smooth and intuitive browsing process.

scpetri 4

The development process commences with establishing the website’s general brand guidelines, followed by designing the new layout in Figma.

We worked closely with our client to gather their design requirements and used Figma to create customized designs over two months. Every element was crafted to match their vision.

We collaborated with the client to design an intuitive and user-friendly homepage. We aimed to simplify navigation and help users find articles easily. We used clear sections and elements that effectively communicate article categories. We applied user-centric design principles to ensure visitors could access the content they needed quickly.

scpetri 5

The project’s implementation phase commenced following the meticulous design phase, which involved transforming the approved design concepts into tangible and functional elements.

Our developers used agile methodologies and modern web technologies to implement planned changes in just two months. The final product exceeded all client expectations.

Challenges

During the redesign process of petri.com, we encountered a set of challenges that required our unwavering focus and expertise. These challenges encompassed the following key areas:

  • 1

    Dynamic Website Development

    Creating a dynamic website architecture and transitioning from a static to a dynamic system posed significant challenges. The team had to ensure seamless integration of dynamic elements while maintaining the website’s stability and performance.

  • 2

    Streamlining Hard-Coded Features

    Modifying a large number of hard-coded features required meticulous planning and execution. It involved identifying and addressing dependencies, refactoring code, and ensuring compatibility with existing functionalities.

  • 3

    Plugin Migration and Optimization

    Moving legacy plugins from their standalone state into the website’s theme posed challenges in terms of integration and optimization. The team had to carefully evaluate each plugin, make necessary adjustments, and ensure their seamless operation within the new environment.

  • 4

    Code Refactoring and Optimization

    The extensive task of refactoring and optimizing the existing codebase required a deep understanding of the website’s architecture. The team had to identify performance bottlenecks, eliminate redundant code, and implement best practices to improve overall speed and efficiency.

scpetri 6

The Solution

We are excited to share that petri.com has undergone a successful redesign. Our team worked hard to plan, develop, and test the new design to meet our client’s needs and improve the user experience. By analyzing, strategizing, and implementing effectively, petri.com has become a sleek and cohesive IT platform that caters to its tech-savvy audience.

Key implemented elements and features include:

  • Implementation of Custom Post Types

    As a part of the website redesign, we implemented 6 custom post types, replacing the previous single post type structure. View more.

    View details
  • Custom Panel Setting

    We made a customized settings panel for our client’s website admins to easily manage various elements and configurations.

    View details
  • Implementation of New Gutenberg Blocks

    We created custom blocks for the Gutenberg Builder, expanding its functionality and enabling users to create dynamic content.

    View details
  • Registration and Login Pages

    We made a secure Register and Login page with advanced authentication to protect user credentials.

    View details
  • New and Improved Search Pop-Up

    We overhauled the search functionality, integrating ElasticPress to boost performance and accuracy.

    View details
  • Ad Distribution System

    Our advanced system automatically distributes traffic among sponsors using browser-based JavaScript, improving ad campaign effectiveness and ensuring a seamless browsing experience for users.

    View details
  • Responsive Menu

    We created a responsive and intuitive menu that adapts to all devices, enhancing user navigation and interaction.

    View details
  • Improved SEO Performance and Speed

    We optimized website performance and speed by leveraging Gutenberg Builder/Editor and implementing various optimization techniques, resulting in a faster and improved user experience.

    View details
  • Improvements for the Learning Center

    We redesigned the learning center by adding a new registration form, and a new live system for conferences.

  • New & Modern Design

    We have successfully implemented an elegant, contemporary design that embraces minimalism and aesthetics

    View details

Implementation of Custom Post Types

As a part of the website redesign, we implemented 6 custom post types, replacing the previous single post type structure. This modification significantly enhanced content organization and management capabilities, providing increased flexibility and control over the display and accessibility of information.

scpetri 7

Custom Panel Settings for editing website content

We made a customized settings panel for our client’s website admins to easily manage various elements and configurations. It has dedicated sections for custom post types, Widgets, WP Media Library, General Settings, and more.

Website administrators can customize their site easily with a user-friendly interface, no coding knowledge required.

scpetri 8

Implemented 20 new Gutenberg Blocks

We created custom blocks for the Gutenberg Builder, expanding its functionality and enabling users to create dynamic content. Leveraging React, we developed intuitive blocks that offered a wide range of customization options. Users could select post types, specify post count and order, and access other customizable features.

scpetri 9

Registration and Login Pages

We made a secure Register and Login page with advanced authentication to protect user credentials. It integrates smoothly with the user management system for a seamless experience with added security.

scpetri 10

New and Improved Search PopUp

We overhauled the search functionality, integrating ElasticPress to boost performance and accuracy. Leveraging advanced features like indexing and relevance scoring, we achieved faster and more precise search results. Users can now enjoy an enhanced search experience, with faster and more accurate results that effectively cater to their specific queries and preferences.

scpetri 11

Ad Traffic Distribution System

Our advanced and cutting-edge system utilizes sophisticated algorithms to intelligently and automatically distribute traffic among sponsors, leveraging the power of browser-based JavaScript. This innovative approach not only optimizes the effectiveness of ad campaigns but also guarantees a seamless and uninterrupted browsing experience for users. By harnessing the capabilities of our advanced system, we ensure fair and optimized distribution of traffic, maximizing the visibility and impact of sponsored content while maintaining a smooth and user-friendly website experience.

Group 3465051 black

Responsive Menu

We developed a responsive and intuitive menu that adapts to all devices, improving user navigation and interaction. With careful attention to detail, our team leveraged modern web technologies to create a seamless browsing experience across different screen sizes and resolutions.

scpetri 13

Improved SEO Performance & Speed

To enhance website performance and speed, we utilized the capabilities of Gutenberg Builder/Editor and implemented a range of optimization techniques. By optimizing code, improving caching mechanisms, compressing images, and fine-tuning the loading process, we successfully achieved faster page load times, resulting in an overall enhanced and seamless user experience.

With our comprehensive maintenance package, Petri’s website score will progressively improve over time, bolstering its online presence through enhanced SEO metrics.

We fixed slow page loads caused by ads on Petri.com with a personalized system that balances optimization and SEO.

scpetri 14 scaled

Refactoring hardcoded features

The process of transforming hard-coded features into a more accessible and customizable format involved a comprehensive refactoring effort. Our team worked to enhance the maintainability and flexibility of the website by reimagining the underlying architecture.

This involved introducing a modular architecture or content management system (CMS) that empowers administrators with the ability to modify website elements without the need for extensive coding knowledge. By implementing this solution, we streamlined the content updating process, allowing administrators to make efficient changes to content, layouts, and functionality. The result is a more agile and user-friendly system that empowers website administrators to adapt and customize the website with ease.

scpetri 15

The Results

Our team has completed the delivery of a new and improved website that boasts modern aesthetics, streamlined content, optimized performance, enhanced SEO, and a user-friendly interface. Our clients are pleased with the outcome, as we met and even exceeded their expectations.

We have meticulously attended to every aspect of our content to enhance its appearance, streamline its navigation, and boost its overall performance. Moreover, the integration of SEO principles has significantly augmented our online visibility and amplified the discoverability of our content.

scpetri 16 scaled

Our goal with the redesign of petri.com was to create a visually appealing and user-friendly website that enhances the overall user experience. We implemented sweeping changes aligned with the client’s specifications and surpassed their expectations. With these improvements, we elevated petri.com to a new level, providing a more engaging and intuitive platform for its users.

scpetri 17 1 scaled

We wrote more than 30,000 lines of code while using the DRY coding principle when redesigning petri.com, which helped us reduce the number of lines of code and improve efficiency. This principle promotes code reuse, modularity, and maintainability, making the website’s architecture scalable and easy to extend. Following DRY allowed us to avoid duplicating code, saving time and effort.

  • php
    9458

    php lines of code

  • js
    7523

    js lines of code

  • sass
    11315

    scss lines of code

  • json
    2288

    JSON configuration lines

scpetri 18 scaled

Your success story begins with our tailored solutions!

Our team specializes in crafting tailored solutions to meet your unique challenges and goals, providing you with the expertise you need to succeed.

Schedule Introduction Call