Sayari
Moving away from a premium theme solution and rebuilding the backend based on the S-Tier Framework, developing multipurpose custom Gutenberg Blocks, while improving the visual appearance of the website.
What we did
- WordPress development
- Design Improvement
- HubSpot Integration
- Custom Theme
- Site-Specific Gutenberg blocks
- Custom Post Types and Taxonomies
- Website Performance
- Advanced Search and Filtering
About the Client
Sayari is a venture-backed and founder-led counterparty and supply chain risk intelligence provider that supports transparency around the relationships between businesses and individuals in order to power safer global commerce.
Problem
The website had significant performance issues, with slow loading times that hindered the user experience. Its Google PageSpeed Insights scores were below industry standards, impacting both SEO and user engagement.
Numerous functionality and usability issues, along with essential features that were either broken or unreliable, made navigation and task completion challenging for users. These persistent bugs not only impacted user satisfaction but also limited the website’s ability to effectively support business goals.
The website relied on a premium theme with a theme builder and several custom-developed modules to meet specific functionality needs. However, with the announcement of a new version of the theme, it became clear that these custom modules would no longer be compatible. This impending update risked breaking key site features, making it essential to find a more stable, future-proof solution.
Solution
Custom Theme
We built a theme based on our S-Tier Framework.
In this process, we got rid of the page builder and dozen of plugins that old website relied on.
Plugins often do offer the functionality a website needs, but they also come with a bunch of unnecessary features.
We made necessary features directly in the theme, removing the necessity for additional plugins.
Our cache-buster system made the changes preview easier, removing the need to clear the browser cache every time a change is made.
Performance
Removal of unnecessary plugins and page builder hugely affected the website performance, but this was only a part of the process.
We built a custom Gutenberg Block containing fields and settings that are essential for the block functionality without any bloat.
Minified versions of styles and scripts are served and cached for instant delivery to visitors.
We optimized the images and introduced a next-gen (webP) format delivery system.
Usability
We developed a custom backend solution using site-specific Gutenberg blocks and dedicated settings pages, designed to make content and layout management intuitive and efficient. By implementing these custom blocks, we eliminated the reliance on complex page builder layouts, which often added unnecessary complexity and bloat.
This streamlined approach not only sped up the website’s performance but also empowered the client to easily update and manage content without technical assistance.
The result was a cleaner, more robust site that allowed for faster updates and a more consistent user experience.
Gutenberg Blocks
To enhance usability and streamline content creation, we built custom Gutenberg blocks that focused solely on the essential features the website required. Each block was designed with a clear purpose, reducing clutter and simplifying the content-editing experience.
We organized these blocks into separate categories, making it easier for users to distinguish between different types and quickly locate the right one.
Additionally, we added refined search keywords to each block, ensuring that users could easily find the specific elements they needed by typing in relevant terms.
Settings Page
Dedicated Settings Page provides centralized control over elements not directly editable within individual pages or post editors, such as archive pages, header, and footer.
This custom settings area enables the client to make site-wide adjustments, giving them the flexibility to manage these components without needing a developer’s assistance.
Through an intuitive interface, they can fine-tune elements like layout styles and content for these structural parts of the site.
This setup ensures that the client can easily maintain consistency across the website while retaining control over its look and functionality. As a result, the client gains autonomy and efficiency in keeping the site fresh and aligned with their brand.
Training Videos
Given the project’s scale and the extensive customizations implemented, we recognized the importance of ensuring a smooth transition for the client.
To facilitate this, we created a series of comprehensive training videos that covered all aspects of using the new website and its custom editor features. These videos provide step-by-step guidance, making it easy for the client to understand how to manage content, customize settings, and leverage the new tools we introduced.
By offering a flexible learning resource, the client can revisit specific topics whenever needed, enhancing their confidence and independence in using the site. This approach made the handover process seamless, ensuring they were fully equipped to manage their new website effectively.
Result
S-Tier Dev delivered a high-performance website that delivers an intuitive, bug-free experience for both users and administrators.
By replacing the complex page builder with custom Gutenberg blocks and a centralized Settings Page, we significantly simplified content management, empowering the client to easily update and maintain the site without needing technical assistance.
This streamlined structure, standardized, and unified elements, combined with our performance optimizations, led to a faster, more reliable website that exceeded industry standards for speed and efficiency. All previous bugs and functionality issues were eliminated, creating a stable and user-friendly platform that supports the client’s goals while providing a seamless experience for visitors.
Solve your website problems
If you can relate to the issues presented here or you want your website to have the performance and results like Sayari, get in touch and we can get started.
Stats for Nerds
Even though there were many segments that needed improvement, the part of the website we kept was design.
You might think that we kept the CSS written for the old website, right?
No, we rewrote everything from scratch utilizing S-Tier dev methodologies and our framework.
But, since the design was the same, the number of lines of CSS has to be similar?
Wrong again. Below are the numbers of lines used for both the old version and the new one.
Old website:
Child Theme style.css – 1.944
Child Theme redesign.css 11.242 (no, its not a typo)
Parent theme styles – Tens of thousands
New website:
Sayari Theme – theme.css – 3.561