APF 34 B2B Toner Cartridge Catalog Redesign

Dia Loghmari

Dia Loghmari / May 25, 2024

Introduction

The B2B toner cartridge catalog redesign project for APF 34 was a crucial initiative to modernize and improve the shopping experience for their business customers. Faced with an aging catalog based on an older version of PrestaShop, the challenge was to create a more accessible, secure, and efficient platform using a modern headless CMS. The redesign aimed not only to improve web accessibility but also to simplify and secure the ordering process for B2B customers.

APF 34 Catalog Homepage

Customer Challenges

APF 34 faced several key challenges:

  • B2B Catalog Redesign : Transform the existing catalog into a more modern and efficient platform.
  • Maximize Digital Accessibility : Ensure that the new catalog is fully accessible, in compliance with WCAG standards.
  • Headless CMS Migration : Replace the old PrestaShop system with a more flexible headless CMS.
  • Attract More Visitors : Improve search engine visibility to attract more visitors.

Technical Proposal

To address these challenges, we proposed the following technical solutions:

  • Simplified Sitemap and Design : A complete overhaul of the sitemap and adoption of a simplified design to improve navigation and user experience.
  • Replacement of PrestaShop by Strapi : Strapi, a headless CMS, was chosen for its flexibility and ability to adapt to APF 34's specific needs. The catalog migration from PrestaShop to Strapi was carefully managed to ensure a smooth transition.
  • Use of React Bootstrap : React Bootstrap was chosen for its easy customization and proven accessibility.
  • Adoption of Next.js for the Frontend : Next.js was selected for its performance and ease of integration with Strapi.

Solution and Implementation

The implementation involved several key steps:

  1. Design and Prototyping : We started with a user-centric design approach, creating prototypes that emphasized accessibility and user experience.
  2. Development : Utilizing modern web technologies, we built the platform focusing on performance, security, and compliance with WCAG standards.
  3. Integration : Strapi was integrated to facilitate flexible content management, while Next.js was used for the frontend to ensure a smooth user experience.
  4. Testing and Validation : Rigorous testing was conducted to ensure accessibility compliance and data security, involving real users to gather feedback and make necessary adjustments.

Result

The new toner cartridge catalog has become a model of accessibility and performance. Users now benefit from a simplified, more intuitive purchasing experience. Rigorous intrusion and data security tests have been carried out, ensuring maximum protection of sensitive information. The ordering process, previously dependent on manual tools such as Excel and email, has been fully integrated into the site, offering a more efficient and reliable method of placing orders.



Key Figures

  • Compliance with Accessibility Standards : 100% compliance with WCAG and RGAA guidelines.
  • Site Performance Improvement : Full-score Lighthouse metrics, compressed images for all screen sizes, balanced server-side and client-side logic.
  • Enhanced Security : Zero security incidents recorded since launch.
  • Customer Adoption : 85% of B2B orders are now placed via the site, compared with 30% previously.

This redesign marked a turning point for APF 34, offering customers a more modern, secure, and accessible platform, reflecting their commitment to innovation and customer satisfaction.