Always Food Safe: Website Transformation Journey for a U.S.-based Food Safety Certification & Training Business

Always Food Safe is an online-based ANSI-accredited training provider in the U.S. that specializes in food safety and takes pride in its partnership with National Checking Company (NCCO). NCCO's support provides them with valuable access to major restaurant and hotel chains in the U.S. foodservice market. The collaboration is highly esteemed for NCCO's rich history, provenance, and esteemed reputation within the food service industry.

Always Food Safe sought an extensive renovation of their existing website's UX and was in search of a solution partner to assist them in achieving this goal. Upon contacting nopStation, Always Food Safe initially approached with the intent of renovating their nopCommerce 4.40 website's UX through a new theme and later optimizing their product management process alongside other customizations.

Challenges

After nopStation’s development and UX teams gathered requirements to create a distinctive theme that aligns with the brand image, accompanied by an enhanced UX, they conducted a thorough audit and analysis of the current website and business processes to pinpoint crucial workflows and areas for optimization.

Reducing Product Instances and Streamlining Product Management: Always Food Safe's core business involves selling Food Safety training and certifications across the United States. Given that different states and counties have varying regulations, passing criteria, and other specifications, their products needed to reflect these distinctions. Consequently, they previously created a new instance of a product for each state-country combination, each with its own data and accompanying information. This product management process was suboptimal from both a technical and workflow standpoint.

Handling Order Data Sync to the External 3rd Party System: In their previous system, Always Food Safe synced their product and order information from their eCommerce site to the external system through a .NET core integration library. Since nopStation’s team had to completely redesign and develop the product management workflow for them, they also had to refactor the sync library to reflect the changes.

Handling Product Information and Attributes Dynamically Based on State & County: In addition to streamlining the product management and process based on specific state & county, our team also had to ensure that product information, such as name, short description, description, etc., as well as specification attributes, were made dynamic based on state & country selection for each product variation.

Building a UX that Reflects Branding and Identity: Always Food Safe placed a strong emphasis on ensuring that the UX design of their new solution reflected their brand identity. They aspired to achieve a modern and visually appealing interface while maintaining alignment with their existing brand image and product range.

Customizing URL Slug Behavior Based on Product’s State/County: Always Food Safe wanted their URLs to reflect language as well as state & county selection for products. To achieve that, nopStation’s team had to customize the nopCommerce URL slug generation.

Lack of a Bulk Purchase Process on the Home Page: Aside from a revamped UX, one of the major UX enhancements requested by Always Food Safe was the ability to add products to the cart and make bulk purchases straight from the home page. They also wanted the homepage purchase experience to have all the dynamicity associated with their products based on state & county selection along with a streamlined UX.

Sitemap.xml Generation Based on State/County-wise Product Combinations: Another key area where Always Food Safe wanted optimizations was their site’s site map. They wanted their sitemap.xml generation to be based on their state & county-wise product combinations for better indexing and crawling.

Blog Enhancements: Always Food Safe places significant importance on their blog content, as it plays a vital role in informing their customers about their product line and processes. They aimed to improve the organization of their blog sections to enhance content accessibility for their customers.

Solution

To achieve all of the development goals for the Always Food Safe project, nopStation conducted a thorough analysis of the business requirements alongside research to finalize the development strategy. On the UX and design side, they developed a unique user interface based on their analysis of requirements. In terms of development, the team utilized a mostly plugin-driven approach with some source code customizations.

Developed a Product Management Plugin to Streamline Product & State/County Mapping: To enhance the efficiency of Always Food Safe's product management, our development team suggested utilizing fulfillment codes as well as state & county-based mapping in products. This way, they could map states and counties to products as required and assign fulfillment codes for each, eliminating the need to create a new instance of the product each time. We developed a product management plugin to implement this requirement. Now, Always Food Safe’s admins can easily add necessary state & county mappings for products and fulfillment codes for products, managing their products more optimally. Through this implementation, our team optimized the product management workflow at both the system level and for everyday operations.

State & county mapping to product

Customized External Sync Library to Handle the New Sync System: After optimizing the product management workflow, our team also had to refactor the external library used for syncing product and order info from their eCommerce to the external system. We made necessary changes to the library to reflect the new product management workflow.

Handling State/County-Wise Dynamic Product Info through Tokenization: Apart from managing product mapping for state/county and codes, the team also had to figure out a way to map product information such as state-county-specific names, short descriptions, full descriptions, product specifications, and SEO meta-attributes. To achieve this optimally, they utilized state-county-wise tokenization mapping. This feature is implemented through the product management plugin and customized nopCommerce localization service. This allows Always Food Safe’s admins to map state-specific information through tokenization and fetch tokenized info for products after state/county selection on the storefront, ensuring dynamic content for each combination.

Customized Default URL Slug Behavior of Default nopCommerce: Another major development hurdle for nopStation’s team was customizing the default URL slug behavior in nopCommerce to handle Always Food Safe’s state and county-wise product combinations, as well as store language selection. They had to customize the URL slug to meet this requirement. Now, the system can determine, based on the URL parameters, which state or country is selected for a product. The URL slug is also updated based on a product's state/county information.

Helped Develop a Unique Brand Identity through UX: Since creating a storefront that reflected their brand identity was a top priority for Always Food Safe, nopStation’s team developed a custom theme for them based on UX analysis. Their UX team also chose a subdued and minimal color palette that is reflective of Always Food Safe’s brand, along with clean typography to highlight the products. These design choices combined to create a brand identity that is unique to Always Food Safe and eye-catching for their customers.

Dynamic product info based on tokenization

Added Support for Group Purchases from the Homepage: To achieve this, nopStation implemented a group purchase section on their homepage. This section lets customers select the product they want to purchase from the drop-down. If the product has any associated product options, they are populated on the right dropdown for easy selection. State and county can also be selected from here. Customers can easily configure the variant they need, adjust quantity, and purchase as many as they need easily right from the homepage. This provides customers with a more streamlined shopping experience by letting them add products in bulk in just a few clicks.

Group purchase functionality on the home page

Generated Sitemap Based on State/County-Wise Product Combo: To generate site map info based on a product’s mapped state and county, nopStation’s team heavily customized the sitemap generation process for the site. Now, the site map generates an entry for each state & county combination for a product. This ensures that all possible state/county combination URLs are included in the sitemap and properly indexed, helping to ensure the site’s SEO and web page indexing.

Categorization Support in Blogs: To better organize the blog section for customers, nopStation utilized their blog and news plugin with support for categories in blogs. With the help of categories, Always Food Safe can now categorize blogs and let customers browse blogs through category tabs. This approach enables Always Food Safe to curate a more effective and user-friendly blog browsing experience, ensuring that customers can readily discover their desired content.

Categorization in blogs

Implemented Extensive UX Enhancements: For example, support for product videos on product details pages was added to the website. nopStation also enhanced the shopping cart experience through a customized version of their AJAX cart plugin. They also customized the way tier prices are displayed on the cart and product details pages. Now, when a tier price quantity is reached, the price is updated in the product details and cart page as well. These enhancements add up to enhance the overall user experience across the site and ensure a refined shopping experience for customers.

Results:

• Developed product management plugin to streamline product & state/county mapping.
• Implemented handling of state/county-wise dynamic product information through tokenization.
• Developed a new brand identity through a custom theme that reflects brand identity.
• Customized the default URL slug behavior of default nopCommerce.
• Added support for group purchases directly from the homepage.
• Implemented sitemap.xml generation based on state/county-wise product combinations.
• Implemented category support in blogs for enhanced content curation.
• Improved customer experience through extensive UX enhancements.

nopStation is the #1 Gold Solution Partner of nopCommerce and an eCommerce wing of Brain Station 23 Ltd., a top-ranking software development company with a global presence. Team nopStation designs, builds and enhances eCommerce solutions on top of the nopCommerce platform for clients of all business sizes. The company has technology partnerships with 12+ leading ISVs including Microsoft, Google, and AWS. The company helps its customers build their business online by developing the right eCommerce solution using nopCommerce at a competitive price and reasonable timeline.