CoffeeMall

About the Project
The goal was to build a specialized e-commerce platform that transitions major regional coffee manufacturers (Spetema, Balkam Group) into the Direct-to-Consumer (DTC) digital space. Working from Figma designs, the challenge was to create a scalable frontend that could elegantly present a diverse inventory—ranging from daily consumables to high-value industrial equipment—within a unified, high-performance interface. The solution leverages OpenCart for its robust e-commerce backend, enhanced with a custom SCSS and jQuery frontend architecture. Key technical decisions included replacing the default theme structure with a component-based SCSS system for precise design implementation and using jQuery to modernize traditional page-reload heavy flows. My role focused on the Frontend Implementation & UX Integration: • E-Commerce UI Implementation: Translated high-fidelity Figma mockups into responsive HTML/SCSS templates and customized sidebar filtering. • Micro-Interactions: Built engagement features like hover states and dynamic sliders, integrating custom SVG iconography. • Cart Optimization: Customized the 'Quick Add to Cart' flow for instant visual feedback. The project successfully established a Direct-to-Consumer channel, delivering a performance-optimized interface that reinforces brand authority and effectively manages a scalable inventory of thousands of SKUs.
Design System
Roboto Slab
Responsive Design


