Case Study: 44 Pro
Introduction
44 Pro has established itself as a formidable presence in the baseball industry, known for its high-quality, customizable gear including gloves, batting gloves, and bats. Rapid expansion revealed the limitations of the existing Drupal-based e-commerce platform, necessitating a more adaptable and scalable solution to not only manage its expanding product line and customer base but also to solidify its position against industry giants like Wilson and Rawlings.
My Role
My role in this project was comprehensive, overseeing its strategy from inception to post-launch maintenance and addition of many new features. I was responsible for architecting and developing the custom e-commerce platform, including over 40 product customizers, and driving operational improvements through innovative technology solutions, my expertise, and extensive collaboration with the 44 Pro team.
Objectives
- 1. Ensure a Seamless Migration
- 2. Enhance Customer Shopping Experience for Increased Revenue
- 3. Improve Operation Efficiency and Scalability
Challenges
Ensuring a Seamless Migration
Migrating from Drupal presented complexities: a complicated database schema with poor documentation, inconsistent data across numerous modules and years of poorly implemented schema updates, lots of serialized data, plus a large volume of product, customer, and order data needing accurate transfer.
Enhancing Customer Shopping Experience for Increased Revenue
The challenge was to create an intuitive and seamless shopping experience capable of handling complex product customizations. This required not only an interface that would support a diverse product range with varying lead times but also a design that could adapt to future expansions without substantial overhead.
Improving Operation Efficiency and Scalability
Transitioning from manual to automated fulfillment processes posed a significant challenge. Developing streamlined, scalable, and reliable automated systems necessitated a comprehensive understanding of complex operations, business logic, and even production partner approval for proposed changes.
Solutions
Migration Complexity
Strategy & Implementation
Adopted an ETL approach to streamline the migration from Drupal. This involved creating dynamic SQL queries for data extraction, transforming data to fit the new schema, and utilizing MySQL's LOAD DATA for efficient bulk insertion. Base classes were developed to handle dynamic query construction, CSV generation, and data loading, significantly reducing migration time and ensuring data integrity.
To combat the inconsistent data problem, I ran a lot of custom SQL queries to identify data anomalies to which I then implemented fixes as part of the migration process. For the serialized data, I wrote custom scripts that would unserialize the data so I could inspect it and gain a complete understanding of what was being stored in it. This allowed me to make informed decisions on how to handle the data in regards to the new schema.
Outcome
This overall solution worked great and the time spent to gain a complete understanding of the data was worth it! Using LOAD DATA as opposed to Eloquent or even row by row inserts cut the migration execution time down from hours to about 10 minutes! This saved a TON of time developing the script and testing for data integrity. When it came time to launch, downtime was minimal, the data transfer was accurate, and thus the transition for both the site admins and customers was seamless.
Enhancing Customer Shopping Experience for Increased Revenue
Strategy & Implementation
Data Driven Design: Utilized Baymard's' e-commerce UX research to inform design choices, ensuring a user-friendly platform that aligns with 44 Pro's brand. The entire customer journey received attention, from the homepage to post-purchase emails.
Performance Optimization: Improved site speed and reliability through extensive use of jobs and queues, allowing for continuous monitoring and quick failure recovery to maintain a seamless user experience. Also implemented S3, Cloudfront, and Imgix to optimize data storage, optimize images, and reduce server load.
Product Customizer Development: Created a flexible product customizer for 40+ customizable products, providing users with real-time previews and price updates. This feature stores design choices and preview images and integrates them throughout the shopping cart, order history, and transactional emails, reinforcing customer confidence and encouraging conversions.
Strategy & Implementation: 40+ Product Customizer
Architecture: I first created a JSON schema that the frontend consumes to build the UI. Once the schema was solidified, I adopted SOLID principles and the Builder + Director design pattern to create extensible base classes that ultimately get serialized down to the schema. These classes just help create the schema in an OOP way and they handle defining things such as the: layers/images, options and choices, colors available and what layers/images it colorizes, etc. This modular approach allowed me to work in small focused scopes.
Automated Tests: To mitigate unintended inheritance-related side effects, I developed automated tests that would save the final JSON object for each builder as its own file. These JSON snapshots would then get committed to git for easy tracking of changes. If I made a change that was only suppose to affect certain glove models, but I see modifications to an unrelated model's JSON snapshot, there's a bug and I know to take a closer look. This simple solution was another huge time saver and worked extremely well!
I also developed tests for ensuring each builder successfully generates valid schema as well as checking for missing images. Overall there are over 6,000 unique images and lots of reuse between similar models. Sometimes Photoshop bugs out and doesn't generate an image, so these tests were crucial in reducing the need for extensive manual testing.
Outcome
The site's performance and user experience were significantly improved. The site's speed and responsiveness were optimized, and the customer's shopping experience was elevated. The product customizers were a hit and the customer's confidence in their purchase was solidified. As a result, the site's conversion rate and overall revenue increased substantially immediately after launch and has sustained this increase since. While this increase is likely from a combination of factors, the site undoubtedly played a significant role.
Improving Operation Efficiency and Scalability
Strategy & Implementation
The strategy was to automate as much as possible and to streamline the manual processes that couldn't be automated. This required a deep understanding of the operation and complex business requirements in order to develop the solutions. Working closely with the various cross-functional teams at 44 Pro was crucial.
Custom Reports and Exports: I implemented custom reports, exports, and automated design assets and production documents such as BOMs their production partners required. Certain products go to certain partners and instead of the site admin needing to configure various filters manually which is error prone, they could simply go to one of the custom admin pages, quickly review, and either export or directly transmit documents to their fulfillment partners.
Streamlined QA and Shipping Process: Engineered a more efficient QA and shipping workflow integrated with ShipStation's API, incorporating logical statuses for individual and grouped items in a single order since many of their products have different lead times. Barcode scanning streamlines order processing, from QA checks to label printing and status flagging, with automatic order status updates via webhooks.
Outcome
These improvements continue to significantly save time, reduce manual errors, and enhance the operational efficiency. It allows lean 44 Pro team to redirect hundreds of hours towards strategic growth tasks, underlining the project's success in making operations more efficient and scalable.
Key Technologies Used
Laravel
This is the foundation for managing all the data and complex business logic. I organized the code by domain and adhered to SOLID design principles. Laravel's DX is amazing and makes writing clean easily understood code a breeze!
Inertia.js
Inertia.js is what connects the backend to the frontend. It's awesome and greatly simplifies the communication between the backend and frontend so I can focus on the more interesting parts.
Vue.js
I used Vue.js on everything except the product customizers which I had planned to port over. The DX is great.
React
I used React for the product customizers. Originally they were made when the site was on Drupal, and that's before I made the switch to Vue.js as my preferred UI framework.
Tailwind CSS
I'm comfortable writing my own CSS, but Tailwind just speeds things up. Plus naming CSS classes is hard!
AWS
I chose to use a variety of services such as: EC2, S3, CloudFront, SES, Route 53, and IAM. This keeps most of the DevOps tasks in one place and facilitates scaling as they continue to grow.
imgix
I chose to use this to help optimize the site's images. While CloudFront also acts as a CDN, this takes it a step further by providing "programmable media". I can easily define all the variations of an image I need for use in srcset attributes and it handles creating them and serving them. This also took a large bandwidth burden off the server at an extremely low cost.
Outcome
The site was a complete success! The data migration went well and provided a seamless experience for users. The customer's shopping experience was significantly elevated and Baymard's UX research proved to be very valuable as conversions increased and overall revenue increased substantially. And lastly the 44 Pro team is saving hundreds of hours a year with the streamlined and automated processes.