A brief background on Always Food Safe

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 NCCO. Established in 2016, it is headquartered in Saint Paul, MN, with an additional office in Denver, Colorado. Always Food Safe is partially owned by the National Checking Company (NCCO), a renowned 110-year-old company that supplies various products, including the iconic Guest Check Pads, to the restaurant industry. 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

Challenges

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.

Our development and UX teams meticulously gathered requirements to create a distinctive theme that aligns with the brand image, accompanied by an enhanced UX. Additionally, we conducted a thorough audit and analysis of their 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. Our team had to figure out a product management process that was optimal for the system and streamlined for their business operations.

Handling Order Ddata Sync to the External 3rd Party System: Alongside a complete rethink of the product management workflow, our team also had to refactor how the new product information would be synchronized with their external systems. In their current system, Always Food Safe must sync their product and order information from their eCommerce site to the external system through a .NET core integration library. Since our team had to completely redesign and develop the product management workflow for them, we 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. We had to develop a method to map product information dynamically based on state & country in an optimal way.

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. Our team of UX experts worked collaboratively to develop a design that would meet these objectives, conducting in-depth UX analysis throughout the process.

Customizing URL Slug Behavior Based on Product’s State/County: Another area where our team faced a significant development challenge was customizing the URL slug behavior on their website to reflect language, state, and county selection based on products. Always Food Safe wanted their URLs to reflect language as well as state & county selection for products. Our team had to customize the nopCommerce URL slug generation in such a way that served this requirement.

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. We had to customize the sitemap generation functionality to serve this requirement.

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 their processes. They aimed to improve the organization of their blog sections to enhance content accessibility for their customers.

Our Solution:

To achieve all of our development goals for the Always Food Safe project, we conducted a thorough analysis of the business requirements alongside research to finalize the development strategy. On the UX and design side, our UI designers and engineers developed a unique user interface based on their analysis of requirements. In terms of development, our 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 fulfilment codes as well as state & county-based mapping in products. This way, they could map states and counties to products as required and assign fulfilment 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 fulfilment 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.

Image 1.2: 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, our 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, our team 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. Thanks to our development efforts, the solution can now serve dynamic product content in a more optimal way.

Customized Default URL Slug Behavior of Default nopCommerce: Another major development hurdle for our 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. We had to customize the URL slug to meet this requirement. Now, the system is able to 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, our UX team collaborated with them to conduct a thorough requirement analysis and utilized their years of UX expertise to develop a design tailored for Always Food Safe. Our team developed a custom theme for them based on our UX analysis. Our 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.

Image 1.3: Dynamic product info based on tokenization

Added Support for Group Purchases from the Homepage: Another major requirement for Always Food Safe was developing a way to make group or bulk product purchases straight from the storefront. To achieve this, we 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.

Image 1.4: Group purchase functionality on the home page

Generated Sitemap Based on State/County-Wise Product Combo: As stated before, Always Food Safe wanted their sitemap to be reflective of all product variations and URL slugs to ensure search engine indexing for their pages. To generate site map info based on a product’s mapped state and county, our 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, our team utilized our 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.

Image 1.5: Categorization in blogs

Implemented Extensive UX Enhancements: Aside from the aforementioned features and development work, our team also made several UX enhancements to their existing site. For example, as their website is built on nopCommerce 4.40, it lacks native product video support and our team added support for product videos on product details pages. We also enhanced the shopping cart experience through a customized version of our AJAX cart plugin. We also customized the way tier prices are displayed on the cart and product details pages. Normally in nopCommerce, the base price is shown in product details and cart pages with tier prices only shown in the checkout page. 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.