- E-commerce
- 2024–2026
Monili Jewellers
Took a luxury jewellery platform off a restrictive third-party system, rebuilt every interactive frontend from scratch on a custom Laravel/Vue stack, then redesigned the entire interface in production code — delivering a faster, more premium experience across 1,228 products.
+25%
Sessions after frontend restructuring
+21%
Users acquired
~52%
Sustained engagement rate
My role
Front-End Developer & UI/UX Designer
- Tools
- Vue.jsLaravelHTML5/CSS3GA4
The problem
A luxury jewellery brand. A platform that couldn't keep up.
Monili Jewellers was operating on a third-party e-commerce platform that limited frontend flexibility, interaction design, and performance across a growing catalogue of 1,228 products.
Platform Limitations
The previous platform restricted customisation, frontend flexibility, and advanced interaction design.
Complex Frontend Requirements
Mega navigation, live search, cart interactions, account systems, and FAQ filtering all required custom systems built from scratch.
Performance Issues
Core Web Vitals and mobile responsiveness required optimisation across a product-heavy catalogue.
Outdated Visual Direction
The legacy frontend no longer reflected the premium quality and tactile luxury of the jewellery collections.
The work
What I built.
Phase 1 — 2024: Platform Migration & Stateful Frontend Build
Decoupled stack
Migrated from a third-party e-commerce system to a custom Laravel/Vue decoupled stack.
Full rebuild
Rebuilt the entire customer-facing frontend from scratch.
Backend pairing
Worked alongside a backend developer responsible for the API infrastructure and data layer.
Scalable architecture
Established a frontend architecture capable of supporting large product volumes and complex UI interactions.
Phase 2 — 2026: In-Code Frontend Redesign
Redesign in production
Redesigned the entire frontend directly in production code without relying on static Figma layouts.
Premium direction
Introduced refined spacing, typography hierarchy, and cleaner visual alignment.
Performance built in
Integrated performance optimisation directly into the redesign process.
Non-disruptive
Improved frontend consistency without disrupting the underlying backend architecture.
Discovery & Navigation
Mega navigation
Built a multi-tier mega nav featuring highlighted collections and subcategories.
Live search
Developed a live search dropdown with real-time product results.
Listing pages
Created dynamic product listing pages with filtering and sorting systems.
Commerce & Checkout
Cart
Real-time cart interactions and quantity updates.
Checkout
Multi-step checkout with client-side validation and payment handling.
States
Confirmation, failed-payment, and recovery states across the purchase flow.
Customer Experience Systems
Dashboard
Self-service customer dashboard with order history and account management.
Repair flow
Dedicated jewellery repair intake flow supporting repair and custom enquiries.
Search
Filtering and instant search across FAQ and blog systems.
Performance Engineering & Core Web Vitals
CLS
Reduced layout instability across product-heavy pages to stabilise CLS near zero.
LCP
Configured lazy loading and optimised image delivery to improve LCP.
Overhead
Removed render-blocking assets and unnecessary frontend overhead.
Mobile
Improved mobile loading performance and interaction stability across the catalogue.
The results
Rebuilt, redesigned, and performing.
+25%
Sessions after frontend restructuring
+21%
User growth across the platform
~52%
Sustained engagement rate across the product catalogue
↑
Repair inquiry interactions after the dedicated repair flow launched
Why it worked
The frontend wasn't just migrated — it was systematically rebuilt with commercial intent.
- 01
Every interaction, from the mega navigation to the jewellery repair flow, was designed to reduce friction between product discovery and purchase.
- 02
Phase 1 established the engineering foundation: a modern decoupled architecture providing full control over frontend behaviour, interaction design, and performance optimisation. Phase 2 elevated the visual quality through refined layouts, stronger typography hierarchy, and a more premium browsing experience.
- 03
The sustained ~52% engagement rate reflects how users actively interacted with the catalogue through browsing, filtering, searching, and product exploration — rather than simply landing and leaving.