From Pakistan and Afghanistan's mines to your hands. Complete transparency.
JBL Minerals needed a complete digital presence - from brand identity to a fully functional e-commerce platform. Working alongside the developer, I designed the entire UX from the ground up: creating a design system that balanced natural aesthetics with modern e-commerce needs, and crafting the sourcing story to differentiate the brand.
Timeline
3 months
My Role
UI/UX Designer
01 The Challenge
JBL Minerals, a mineral dealer sourcing directly from mines in Pakistan and Afghanistan, had zero online presence. They relied entirely on word-of-mouth and in-person sales at gem shows, severely limiting their reach. To grow the business and share their unique story of ethical sourcing and transparency, they needed their first e-commerce website.
The target audience; middle-aged mineral collectors and enthusiasts, required a design that balanced:
Natural, earthy aesthetics that honored the products
Modern e-commerce functionality they'd expect from any online store
Clear storytelling about sourcing practices (a key differentiator)
Readability and accessibility for an older demographic
02 The Solution
A complete e-commerce platform built on WordPress that showcases both product beauty and brand values, making JBL Minerals' story of "from mine to hand" as important as the products themselves.
03 Establishing the Foundation
The first iteration focused on structure and core user flows:
Homepage introducing the brand story
Product browsing and filtering
Individual product pages with detailed sourcing information
Checkout flow optimized for both retail and wholesale customers
Through client review and considering our target demographic, several UX improvements emerged:
Visual Energy: The predominantly neutral palette, while elegant, didn't reflect the vibrant nature of the minerals themselves.
Navigation Clarity: As the client identified additional pages they needed (about, sourcing story, wholesale information), the single-row navigation became cluttered. This required consolidating pages into logical groupings.
Typography for Accessibility: Given the 45+ target demographic, font sizes needed adjustment to improve readability without requiring users to zoom.
Sourcing Story Prominence: The ethical sourcing narrative; a key differentiator in a market often plagued by unclear origins, needed stronger visual treatment to compete with established sellers.
04 Redesign
In the second iteration of designs, the issues identified in the initial review have been addressed to create a more cohesive and visually balanced experience. The updates focus on aligning with the brand's natural aesthetic, improving visual hierarchy, and enhancing the storytelling elements.
05 Final Design
From the second draft, targeted adjustments were made to arrive at the final design:
Color Refinement: The client requested aqua tones to replace the previous dark red, reflecting his personal connection to specific minerals and creating a cooler, more distinctive palette.
Card Optimization: Product card dimensions were scaled up to give specimens more visual prominence and improve browsing on all screen sizes.
Sourcing Storytelling: A dedicated homepage section was designed to showcase JBL Minerals' transparent sourcing process, elevating this key differentiator in the brand narrative.
These final refinements aligned the design with both client vision and user needs, creating a launch-ready e-commerce platform.
06 Development Partnership
Working closely with Ahmad on development, we ensured the design vision translated seamlessly into a functional WordPress e-commerce platform. The collaboration focused on:
Maintaining design fidelity while optimizing for performance
Creating a flexible content management system for easy product updates
Implementing responsive design that works flawlessly across devices
Integrating e-commerce functionality that supports both retail and wholesale transactions
07 Impact
The JBL Minerals website successfully bridges the gap between traditional mineral trading and modern e-commerce, providing:
A platform that showcases product beauty while maintaining fast load times
An educational experience that helps customers understand sourcing and authenticity
A scalable system that supports growing inventory and customer base
A brand presence that stands out in the competitive crystals and minerals market