This case study explores the transformation of Safety Technology International's (STI) website. We collaborated with Sikich, a global web solutions agency, to significantly enhance user experience, improve content management, and boost overall website performance.

The Challenge:

Prior to this project, STI was dealing with a fragmented digital landscape. Two distinct websites catered to the Americas and EMEA regions, each with its own content management system (CMS) and user experience. Unifying these sites posed several challenges:

• Unification: Merging STI-Americas and STI-EMEA websites into a single platform while preserving regional content and SEO was crucial.
• Content Management: Transitioning from separate domains and CMS platforms to a centralised system was necessary for consistency and easier localisation.
• Regional Differences: Existing content and user needs differed slightly across regions, requiring a solution catering to Americas and EMEA audiences.
• Improved Functionality: Enhance engagement and conversion for functionalities like Where to Buy, Custom Product Builder (Build-it), Product Search, Application Guides and the Problem-Solution Guide.
• Better Performance: Maintaining high-quality performance on all devices was crucial to streamline navigation and feature usability to increase user engagement in both regions.

Goal:

STI does not sell products directly through its website. Their primary goal was to improve and unify the content management system and create a seamless digital experience across both regions, ultimately driving lead generation.

Our solution:

To address these challenges, we opted for a modern headless CMS solution. Sanity was chosen as the CMS due to its flexibility and scalability. It was deployed on Vercel, a high-performance hosting platform. The front end was built using Next.js, a React framework that excels in server-side rendering and static site generation. This technology stack provided the ideal power and ease of use, allowing us to unify the two websites while preserving regional nuances.

Centralised Content Management

• We implemented a centralised content management system using Sanity, allowing STI to manage content for both regions from a single platform.
• An ISO-standard naming convention for URLs (sti-global.com/en-us/[slug] and sti-global.com/en-gb/[slug]) was opted for enhanced brand consistency and user navigation.
• Sanity's composable and dynamic capabilities ensure a future-proof platform that can easily adapt to new products or markets.

Outcome:

This unification reduced operational inconsistencies as well as simplified content management and updates across regions. It ensured brand consistency while retaining region-specific elements. With a single CMS, STI now benefits from efficient, streamlined operations and can accommodate changes and expansions without significant structural changes. Additionally, the website can automatically locate users based on their browser location, with a manual override option available.

Build-it: A Custom Product Builder

This innovative feature empowers users to personalise products by selecting features like language, colour, and specifications from over 1.5 million possible combinations. Previously, the product builder functionality required tedious manual mapping for each product combination, making it time-consuming and prone to errors.

The previous feature offered a subpar user experience, as it could not retrace steps. This meant that any change, even to a single option, required users to restart the entire product-building process from scratch.

We identified key customisation options users would find valuable using the Next.js reusable server components. This amazing feature enabled us to overcome this challenge with a more user-friendly product builder that helped users custom-assemble products and develop a product of their own with significantly fewer clicks and better control.

Also read the outcomes here: The technology behind 'Build-it' functionality and our development approach.

Outcome:

• By leveraging Sanity's dynamic and composable nature, we streamlined the process. Product managers can now automatically generate product models that consider all product steps and incompatibilities, minimising manual effort and improving efficiency. 
• The system now captures user interactions and selections, providing a custom product model according to the user’s input variance.
• Users can now share their custom-built products via X (Twitter) and email, which is crucial for B2B lead generation.
• They can also save the product, copy the URL and custom product model ID, and print the custom product with details.

Where to Buy

The revamped "Where to Buy" feature allows users to easily locate STI product retailers or distributors based on their geographic location, enhancing the user experience. STI can effortlessly update retailer information within the CMS, ensuring users can always access accurate purchasing options.

Outcome:

Users can narrow down their search using the Filter dropdown menu and find a nearby sales rep or distributor, leading to higher conversion rates and improved user satisfaction.

Leveraging Structured Content

Legacy content management systems often restrict content structures, making it difficult for different teams with varying needs to collaborate effectively.

Outcome:

Sanity's structured content proved invaluable. After a detailed discovery phase to understand how each content team operated, we architected a scalable content model. This streamlined product and content management for both teams while allowing for regional variations.

App Guide

The "App Guide" feature is a dedicated resource page with reusable components, where STI can add pin-point products for multiple industries. Users can discover products tailored to specific use cases across industries like bus terminals, schools, hospitals, and shopping malls. We've implemented Sanity’s ‘hotspot array’ plugin to pinpoint product placement within real-world settings (schools, hospitals, factories). This feature helps users identify the most suitable solutions for their unique needs.

Outcome: This feature streamlines the process of finding relevant products based on industry needs. It also positions STI as a knowledgeable resource in the life safety and security sector, fostering trust and potentially expanding its customer base.

Other enhancements include:

• Problems & solutions: Enables users to select a particular problem and receive tailored solutions and relevant product recommendations on dedicated pages such as theft, fire hazards, vandalism, wireless solutions, and weather-related challenges.
• Content management: Utilising Sanity's GROQ and CDN features, we've enabled region-wise content visibility, variational fields, and similar slugs for the same webpage. 

(Read our blog to know more: developing diverse content management system using Sanity for manufacturing industry.)

• Organised dashboard: A user-friendly dashboard within the Sanity CMS allows STI to update and publish content seamlessly.

Development Approach:

We followed a Scrumfall methodology, a blend of Agile and Waterfall approaches. This allowed us to structure work in sprints with clear milestones yet retain the flexibility to adapt as project phases evolved. Scrumfall was especially beneficial for integrating new features, responding to STI’s evolving requirements, and ensuring high-quality deliverables at each stage.

Development Stack Advantages:

• Next.js enabled seamless server-side rendering and optimised performance, which is ideal for managing STI’s heavy content load.
• Sanity CMS offered dynamic, headless content management, allowing STI to easily scale content, features, and functionalities and customise it by region.
• TypeScript improved code reliability, reducing errors and ensuring a more robust end product.

The Result

We delivered a scalable, fast, and resilient website to STI that significantly improved user engagement through advanced product search, collection, and build-it features while enhancing the overall experience with a focus on UX over UI. Post-launch, the site continues to deliver optimised performance, ensuring easy access to the ‘Where to Buy’ feature for real conversion and long-term value for our client- STI (Safety Technology International).

Future Enhancements

STI plans to enhance existing features and add new features (such as bulk product import and export) to its unified site, improving the user experience even further. We're looking forward to collaborating with STI on this journey.