| Product | Specifications | ||
|---|---|---|---|
The goal of this project was to provide the client's customers with a way to find replacement parts for their competitors broken tools. When a customer encounters a part or tool from a different seller, they can type in the serial number and see the equivalent product from our own catalog.
This was a substantial undertaking from their merchandising team who painstakingly analyzed every product in each competitor's catalog to have a match to their own products. Now that they had the data, they wanted to use it to sell more of their own replacement parts and tools.
Requirements
- High performance
- Responsive
- Integrated into existing eCommerce System
- Add-to-cart functionality
Tools
- Javascript
- JSP & Java
Step 1
Clean and Optimize the data.
For fast database indexing and overall maintainability, using key references for repeated information is paramount. Once the data had been cleaned, multiple specifications were grouped and organized into their own database. If 40 products used the same "Motor Type" value, then those values were saved into their own table and given a key for ease of updating and tracking.
Step 2
Build the UI.
Two issues quickly arose with their 30k+ dataset. Some competitor's serial numbers overlapped with each other on multiple categories. A user might search for one type of product and end up with another type in the results. To remedy this, each tool and part were organized into separate categories.
The first input field prompts the user to choose the category they need, then the app directs them to a second input field to type a serial number. During the serial number search, an autocomplete box appears so the user doesn't have to finish typing the whole number. The competitor's name will also appear next to the number to provide more context during the search.
Once a competitor's product is chosen, the client's compatible tools and products will be displayed in a table below, including an image and all the needed specification details. An add-to-cart button is also present so the user can quickly add the replacement part without having to navigate to a dedicated Product Detail Page.
Step 3
Connect to existing eCommerce Platform.
The client wanted the system to be integrated into their existing platform so that they didn't have to deal with two separate product databases. The product table stored in Oracle had its columns extended to support new competitor information. Each product then had a new column titled "product-reference" set to true/false.
Now that the data was integrated, an API could be built to fetch all products that had the new attribute "product-reference". This data was then further processed to send back the requested category information in two pieces. The first piece was to power the autocomplete, and the second piece was all of the specification data. This greatly sped up the application since the data came in two smaller pieces instead of one large response.
Step 4
Profit.
Since the launch of the new Product Reference tool, the client has increased their replacement part profits significantly. Their customers are thrilled to be able to quickly find replacement parts without having to dig through all the specifications themselves.
Ease of use may be invisible, but its absence sure isn't.
Finito! (The End)
Thanks for reading!