ShopBox
ShopBox is revolutionizing the online shopping experience by making it effortless to access U.S. online retail from anywhere in the world.
Starting from a simple idea to bridge geographical barriers, they’ve become more than just a logistics provider; they’re your gateway to the vast marketplace of U.S. stores.
With services ranging from personalized shipping addresses in Miami to efficient air and ocean freight options, ShopBox is dedicated to ensuring that international shopping is as seamless and enjoyable as possible.
Challenge
When Shopbox reached out to Webyansh, they were facing several development issues that were preventing them from delivering a memorable customer experience. Their existing website was built on an outdated tech stack, making it difficult and time-consuming for their internal team to update content or add new features.
One of the most important features missing was a shipping cost calculator and shipment tracker. These were essential for their customers to estimate shipping costs and delivery time directly on the website.
Also, despite having a new design prepared by another designer, the developer they initially hired was unable to create a pixel-perfect replica of this design. Additionally, the design only accounted for the desktop version, leaving the website without a mobile-friendly version.
To address these challenges, our goal was to:
⬥ Ensure a pixel-perfect replica of the existing design
⬥ Develop a seamless cost calculator & shipment tracker
⬥ Implement a fully responsive design for both desktop and mobile users
Shopbox trusted us with this delicate task because of our proven experience in delivering high-quality web development solutions.
Solution
As we already had the design in place, our major focus was towards developing the main calculator and shipment tracker functionality.
We had to research for the right platform to access tracking data for the packages but once we found a source, it was just about executing it right on Webflow with some custom code.
The responsive design was also seamlessly done as we developed the mobile version using the desktop version provided to us.
Here’s a brief overview of the solutions we implemented for Shopbox-
Ocean and Air Freight Calculator
Shopbox wanted to offer complete transparency on the pricing of their services. Hence, an Ocean and Air Freight Calculator was at the centre of their revamp plans.
They provided us with item category data in a spreadsheet format along with specific formulas for calculation.
Here are the best features of the calculator :-
- CMS Integration: We imported the item category data from Shopbox’s spreadsheet into their CMS. This setup allows Shopbox’s team to update the data at any time.
- Automatic Conversion and Calculation: To enhance usability, we implemented automatic conversion between kilograms (kg) and pounds (lbs) based on user input. This feature simplifies the process for customers, ensuring that they can input weight data in their preferred units without manual conversions.
- Static UI Design Using Webflow: For the user interface, we opted for a static design using Webflow. This decision not only streamlined development but also ensured a clean and intuitive interface for users interacting with the calculator.
Here’s the backend workflow of the calculator :-
- Item Selection: The process begins with customers selecting an item from a list provided in the CMS, which is then populated into a dropdown menu.
- Inputting Details: Customers enter the item’s cost in $US and its weight in either Lbs or Kg. If the weight is entered in one unit, the corresponding value in the other unit is automatically calculated and displayed.
- Calculating Costs: Based on the selected item and entered details, we perform a series of calculations for various charges, including Item Duty, Freight Rate, Fuel Surcharge, Handling Fee, Insurance, and Duties. These are computed using precise formulas provided by ShopBox.
- Displaying Results: The calculated values are then dynamically shown in the UI, with both $US and $EC values displayed clearly. A ‘Clear’ button is also provided to reset all fields.
We used JavaScript DOM manipulation to bring this feature to life. By attaching a ‘click’ event listener to the ‘Calculate’ button, we ensure that the calculations are performed accurately and the results are updated in real-time on the UI.
With this brand-new calculator feature, Shopbox was able to offer transparent pricing for its customers and add another star to their user experience.
Shipping Package Tracker
A reliable shipment tracker was one of the key requirements of Shopbox when they reached out to us. However, they weren’t sure how to capture and display the tracking data effectively. Since the feature was important to improve the user experience, we took on the challenge and came up with a solution.
API Integration
To start, we researched and integrated open-source APIs that could provide real-time tracking information. By entering a tracking number, the API returns all the details-
- Current status of the package (with date and time)
- Previous location
- Carrier used (like Bluedart or FedEx)
- Shipping and delivery times
Designing the User Interface
Using Webflow, we crafted a user-friendly progress bar that visually represents the shipment’s journey. This feature allows customers to easily track their package’s status with just a glance.
For those who want more details, we included an option to view the complete tracking history. A simple click redirects them to packagetrackr.com, with the tracking number already filled in, making the process seamless and convenient.
Backend Workflow
To build these functionalities, we used the fetch method in JavaScript for API calls to “kd100”. This method efficiently retrieves JSON-formatted data containing the package’s status and related information. The fetched data is then parsed and dynamically updated in the UI using the querySelector method to ensure accuracy and responsiveness.
By developing this seamless tracker, we helped Shopbox not only meet their requirements, but also significantly improve their user experience.
We prioritize seamless user experiences across all devices by implementing responsive design principles. By ensuring that the website adapts fluidly to various screen sizes and orientations, including mobile devices, tablets, and desktops, we guarantee accessibility and usability for all users.
Happy client testimonial
I highly recommend Divyansh for any web development projects, as he consistently demonstrates exceptional technical skills and a strong work ethic.
I engaged him on a critical project for our company ShopBox as we were transitioning to a new platform. He definitely showcased his expertise in modern web technologies and frameworks. They are proficient in HTML, CSS, JavaScript, and various backend technologies, making them a versatile and valuable asset to our team.
He possess the ability to effectively listen to client needs and translate them into functional and visually appealing website which has greatly benefited our company.
In addition to his technical prowess, Divyansh is an excellent team player and communicator. I am confident that Divyansh's skills and experience will make them an invaluable addition to your team.
Project Serotonin
Contact us
Have a project in mind? Contact us for expert design and development solutions. Let's discuss how we can help grow your business.
