Since 2009, our company has been providing software development support to MyPerfectColor, enhancing technical innovations and improving the operational efficiency of their business.
MyPerfectColor specializes in selling paints and tools, offering a unique color matching service for over 200,000 colors across more than 100 paint brands through their website. Customers can select lighter or darker versions of any color, with all colors available in various paint types, from samples to gallons. You can visit the website at https://www.myperfectcolor.com.
This custom-built website was developed by Serfe using a PHP framework created specifically for MyPerfectColor back in 2009, incorporating Ajax and jQuery to enhance user interactions. The online store includes a "My Cart" feature that allows users to easily manage and adjust their selected products.
We created a comprehensive ERP solution into the back office, developing custom modules to manage customers, orders, and shipments efficiently. On the frontend, the platform functions as a fully-featured e-commerce site, delivering a seamless shopping experience for purchasing custom paint and utilizing color-matching services. The site’s administration panel provides all the essential tools the company needs to operate on a daily basis. Working closely with the owner, we tailored an internal order management system, developed financial tools for accurate invoicing, refunds, and tax collection, and built custom modules from scratch for business intelligence. These modules facilitate data analysis, metric collection, and report generation, empowering decision-makers with valuable insights.
The system seamlessly calculates shipping costs via ShipperHQ and FedEx™ WebService integration and ensures secure payments with Stripe integration.
In addition, we integrated Cloudflare to bolster the site's security and optimize its performance.
Custom Web Solution
At the client’s request, we developed a custom MVC framework based on with key features such as dispatchers, security layers, session handlers, and plugins. This provides a solid foundation for the website’s functionality and scalability.
The admin panel grants MyPerfectColor complete control over their site, enabling efficient management of users, products, colors, payments, and orders. This robust system includes an advanced color management interface and an order management panel for tracking purchases, overseeing payments, and generating shipping labels via the FedEx Web Service. Additionally, the admin panel offers a dashboard that provides valuable sales statistics and business insights.
Between February 2019 and July 2019, we completed the first major system upgrade, integrating Bootstrap v4, Gulp, and SCSS into the framework’s template. This upgrade allowed us to optimize the product pages and streamline the checkout workflow, significantly enhancing the user experience across the entire purchasing process. Following this update, the order conversion rate improved remarkably.
Migration from Authorize.net to Stripe
In August 2019 we've implemented a migration in the payment gateway. Due to Authorize.net limitations and the advantages that Stripe offered to our client, we planned and executed the migration for the online payment method. Within the normal workflow the ecommerce allows you paying with debit or credit cards, by integrating Stripe we also allow users to associate these cards with their MyPerfectColor account so that in future orders they should only choose the saved card in a drop-down and proceed with a click.
Besides a list of extra options in the administrator panel, an admin user is also able to assigning and removing credit cards associated with customers. Another functionality requested by our client was a new feature for making asynchronous payments, an user can generate an order without paying, after MyPerfectColor confirms the final cost of the order, the staff sends an email to the customer including the updated amount and a button to proceed and pay inside the platform.
Integration of Taxes and Invoices with Stripe
In October 2023, we implemented a comprehensive solution to optimize tax and payment management for our client, who operates in multiple U.S. states. We automated tax calculations by integrating Stripe Invoices, allowing for the automatic determination of state-specific taxes based on the client's information. This eliminated the need for manual calculations and ensured billing accuracy. Additionally, we connected Stripe with TaxJar to automate tax report generation, significantly reducing the client's workload and minimizing the risk of errors.
We also implemented a flexible payment management system, enabling the application of credit notes for price and tax adjustments, both from the admin panel and through the Stripe platform. To maintain real-time synchronization of payment information between both platforms, we used Stripe webhooks, thus ensuring data accuracy and integrity.
To offer a secure and personalized payment experience, we developed a custom payment form using Stripe Elements. This solution not only guarantees the protection of customer data but also allows the payment process to be tailored to the client's specific needs, thereby reinforcing their brand identity.
Stripe Products Used:
Stripe Payments: Payment processing, including charges and invoices.
Stripe Billing
Stripe Elements: Creation of custom payment forms integrated into the custom template.
Stripe Tax: Automate taxes on all their transactions.
Stripe Radar: Fraudulent payment detection.
Ongoing support and optimization
We migrated from Bootstrap 4 to Bootstrap 5, optimizing the loading of scripts by separating them for each page and importing only what is necessary. The gulp task handles generating the final minified JS. We integrated Invoices using Stripe Payments, allowing for the automatic calculation of taxes for each purchase and the easy generation of tax reports through TaxJar. Additionally, we have been using Radar for some time to manually flag orders that may present a payment risk, facilitating their evaluation.
We implemented a task queue using pm2 and Express, allowing background tasks to be executed when certain events occur, such as the creation or update of a customer, recording customer information in Hubspot CRM. We maintain and support Python scripts from the task queue, which also automate tasks such as sending overdue payment emails and syncing with Hubspot.
To ensure quality, we have a set of automated tests implemented with CodeceptJS that validates the most common checkout flows and ensures proper synchronization with Stripe. Additionally, we have implemented ShipperHQ for the past couple of years to manage shipping methods more flexibly, allowing the client to easily manage rules, package sizes, product groups, and available shipping methods without needing to update the platform.
It is worth noting that we have managed to keep the system up to date, running on modern technologies like Bootstrap v5.3 and PHP 8.2, achieving good metrics in Core Vital (pagespeed).
We are also working on migrating the new order management admin panel, with a more modern interface that meets the company's current needs, progressively incorporating new features such as improved management of formulas and their components for each color. Within the production line, each employee involved in the production of customized paints has the option to use an iPad that will load this new management panel. In this admin system, we developed a template based on React 17 and MUI, with a websocket connecting the legacy system to manage real-time updates of orders and items.
Finally, we have automated some tasks using Python scripts that connect with Zapier for certain direct integrations with the database. Regarding the Python scripts, we have also collaborated with package updates, security enhancements, and performance improvements.
