When we started the U.S. Mint project, it was touted regularly that the current held the record for the most transactions in a minute across all Salesforce Commerce Cloud clients. The Mint's bread-and-butter is their massive coin drops that generate a massive amount of traffic and orders. Efficiency and optimization were under the microscope. The site needed to be fast, and it needed to work every single time.
In order to reduce code weight, we focused on efficient javascript, and avoided overusing CSS where we could. Since SFRA ships with Bootstrap, we leaned into the utility classes that would already be compiled with the core. This resulted in entire pages that didn't add a single line of custom CSS. Another asset we utilized was an npm package called 'purge-css'. It attached to our build scripts and removed any css entries that were not actively being used throughout the site. This helped us cut CSS bloat from the out-of-the-box SFRA product.
The Mint project also included a huge focus on ADA compliance. Working alongside an agency that specialized in site accessibility, we were able to provide a Level AA solution. Many pages bordering on Level AAA compliance.
Another wrinkle in this project was that that site content was almost entirely handled within Adobe Experience Manager (AEM) by a separate team. We would need to work alongside this team to deliver the final pages. In order to achieve a unified global look-and-feel, our team designed and implemented a "design system" through the use of Sass variables that allowed both sides of the projects to utilize global spacing, colors, typography styles, and some shared components.
The client was extremely pleased with the website at completion, and it passed with flying colors on the first coin drop that happened just over a week after the launch.
Notable Customizations
- Mini-Cart removed in favor of an Add-to-Cart flyout as confirmation of an added product
- Custom mega menu utilizing category attributes and taxonomy to achieve complex layouts
-
Products & Categories
- Custom category refinements flyout, with the first 2 refinements showing on page
-
Product Schedule Category Page
- Custom template for showing past & present coins by release date
- Custom loading animation
- Subscription Ordering & Management