Goals🎯
• Restrict access to verified buyers and enforce country-specific rules
• Enable dynamic product filtering based on buyer’s registered country
• Allow customers to fill containers with mixed products using CBM (Cubic Meter) calculations
• Deliver real-time notifications and updates to both buyers and business partners
• Customize all key areas of the customer experience, from first visit to final delivery
• Enable dynamic product filtering based on buyer’s registered country
• Allow customers to fill containers with mixed products using CBM (Cubic Meter) calculations
• Deliver real-time notifications and updates to both buyers and business partners
• Customize all key areas of the customer experience, from first visit to final delivery
Key Challenges & Technical Solutions🛠
🔐 1. Compulsory Login / Register System
Challenge:
We needed to restrict browsing until a buyer’s country was known, to ensure accurate product access and shipping rules.
Solution:
We created a compulsory login/register popup overlay that appears on the homepage and must be completed before any site access.
Key Features:
Dual-tab popup (Login / Register), styled to match brand theme
Country field added to registration, not just at checkout
Responsive and mobile-ready UX
Session-based logic to track registered country and apply filters accordingly
Smart Container Cart with CBM Auto-Calculation
Challenge:
Traditional carts aren’t optimized for mixed-product containers, especially when product dimensions vary.
Solution:
We built a custom CBM (Cubic Meter) calculation system into the cart. When customers add items:
The system calculates total CBM in real-time
A visual progress bar shows remaining space (out of 1 CBM)
When full, a prompt informs the user that the container is ready
Why This Matters:
This mimics how businesses fill real containers for shipping, saving logistics time and improving cost predictability.
🛎 Custom Notification & Email System
Challenge:
Both the admin and business partners needed real-time alerts to take action quickly at different customer journey stages.
Solution:
We integrated a custom notification system that triggers updates for:
✅ New user registrations
✅ Successful logins
✅ Order placement
✅ Order status updates (e.g., “Preparing”, “Shipped”, “Delivered”)
✅ Shipment alerts to business partners
Email Customizations:
Styled HTML email templates for all notifications
Personalized details included (buyer name, order details, container CBM info, etc.)
Business partner notifications sent on status change to improve operations
Video Notification Popup (Homepage)📺
Challenge:
We needed a way to instantly educate new users without cluttering the homepage.
Solution:
We designed a popup modal on the homepage with video integration, visible after login. This pop-up:
Greets users with a welcome message
Shows an onboarding video about how the platform works
Reinforces the mixed container concept visually
📩 Return Page Customization
Challenge:
Default return pages don’t match custom platforms with specialized logistics like ours.
Solution:
We rebuilt the return request page to:
Support business-level returns with reference fields (e.g., container ID)
Match the rest of the site’s layout and styling
Make return reasons and image uploads smoother
🌐 Country-Based Product Filter
Challenge:
YOOMIX works with different suppliers for different regions, and not all products are available to all countries.
Solution:
We implemented country-based product filtering that:
Hides restricted products depending on the buyer’s registered country
Dynamically updates product listings and pricing rules per user session
Works across categories, search, and even product suggestion blocks
95 - Improved Buyer Experience
88 - Streamlined Operations
92 - Scalable System Design
98 - Professional UX/UI Across Devices
Results & Impact👨💼
✅ Improved Buyer Experience
Buyers can now register quickly, view region-specific inventory, fill containers visually, and track orders efficiently.
✅ Streamlined Operations for Admins & Partners
With real-time notifications and customized emails, both internal staff and external suppliers receive updates exactly when needed.
✅ Scalable System Design
Built to support future enhancements like live shipping integrations, multiple warehouses, and partner dashboards.
✅ Professional UX/UI Across Devices
All interfaces are responsive, mobile-friendly, and user-centric, giving a premium experience to B2B clients globally.
Buyers can now register quickly, view region-specific inventory, fill containers visually, and track orders efficiently.
✅ Streamlined Operations for Admins & Partners
With real-time notifications and customized emails, both internal staff and external suppliers receive updates exactly when needed.
✅ Scalable System Design
Built to support future enhancements like live shipping integrations, multiple warehouses, and partner dashboards.
✅ Professional UX/UI Across Devices
All interfaces are responsive, mobile-friendly, and user-centric, giving a premium experience to B2B clients globally.
🔧 Tech Stack
Core Platform: OpenCart (heavily customized)
Theme Base: Journal 3 (modified with custom components)
Languages: PHP, JavaScript (jQuery), HTML/CSS, MySQL
Custom Features:
CBM Container System
Country-Based Session Filtering
Advanced Modal Popups
Notification Engine
HTML Email Templates
User Access Gatekeeping
🧠 What Made This Project Successful?
User-first Thinking:
From country selection to container filling — every detail was designed for business buyers.Problem-Solution Engineering:
We didn’t just design features. We engineered solutions to real logistics problems.Clean, Consistent UI:
Even with high complexity, the interface remains easy to use and visually unified.Business Alignment:
Every technical change served a purpose: making international B2B product orders faster, easier, and smarter.
🏁 Final Thoughts
YOOMIX 2.0 is more than an e-commerce website it’s a custom logistics and product ordering platform built for how real businesses operate. From first interaction to final container shipment, the entire journey is optimized, automated, and personalized. This project is a powerful example of how deep customization, clean UX, and business intelligence can turn a generic e-commerce platform into a category-defining B2B solution.
