Petri.com - Enlivy Services

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.

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.

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

Download

Download

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

BEFORE

View GTmetrix report

AFTER

View GTmetrix report US ‎‎‎‎‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎ View GTmetrix report UK

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

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.

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.

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.

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.