The Best Chemicals Website
The Best Chemicals Website
Building a Compliance-First Chemical E-commerce Platform
Building a Compliance-First Chemical E-commerce Platform
I designed and built a compliance-first e-commerce platform that helped The Best Chemicals move beyond Amazon, own its customer relationships, and replace manual order processing with a connected storefront and admin system.
I designed and built a compliance-first e-commerce platform that helped The Best Chemicals move beyond Amazon, own its customer relationships, and replace manual order processing with a connected storefront and admin system.
Role
Role
Product Designer & Full-Stack Developer
Product Designer & Full-Stack Developer
Scope
Scope
Product strategy, UX research, information architecture, visual design, front-end development, database architecture, payments, transactional email, and deployment
Product strategy, UX research, information architecture, visual design, front-end development, database architecture, payments, transactional email, and deployment
Stack
Stack
Figma, Next.js, TypeScript, Supabase, Stripe, Resend
Figma, Next.js, TypeScript, Supabase, Stripe, Resend
Website
Impact
The business problem
The business problem
The Best Chemicals is a US-based supplier of high-purity laboratory chemicals, including niche products such as Luminol for forensic and educational use.
Before this project, the business relied heavily on Amazon. Customers could discover products there, but the company paid referral fees and had limited ownership of the customer relationship.
The alternative was not ready either. Customers browsed a catalog and then emailed the company to place an order. The owner manually tracked inventory, payment status, and shipping updates through email and spreadsheets.
The Best Chemicals is a US-based supplier of high-purity laboratory chemicals, including niche products such as Luminol for forensic and educational use.
Before this project, the business relied heavily on Amazon. Customers could discover products there, but the company paid referral fees and had limited ownership of the customer relationship.
The alternative was not ready either. Customers browsed a catalog and then emailed the company to place an order. The owner manually tracked inventory, payment status, and shipping updates through email and spreadsheets.
This created two connected problems:
This created two connected problems:
Customer friction
Buying a chemical felt more like starting a conversation than completing a purchase. Customers could not easily compare products, understand documentation, or complete an order independently.
Buying a chemical felt more like starting a conversation than completing a purchase. Customers could not easily compare products, understand documentation, or complete an order independently.
Operational drag
The owner was trapped in inbox-based procurement. Every order required manual follow-up, status updates, and repetitive communication.
The owner was trapped in inbox-based procurement. Every order required manual follow-up, status updates, and repetitive communication.
The initial request was simple:
The initial request was simple:
“Make us a website.”
“Make us a website.”
But a storefront alone would not solve the operational problem.
Research & Audit
Research & Audit
What I did
What I did
I started by auditing the client's workflow via a needs-assessment survey. My initial brief was just to 'make a website,' but after mapping the Information Architecture (IA), I realized a storefront alone wouldn't solve the operational drag.
I started by auditing the client's workflow via a needs-assessment survey. My initial brief was just to 'make a website,' but after mapping the Information Architecture (IA), I realized a storefront alone wouldn't solve the operational drag.
I started by auditing the client's workflow via a needs-assessment survey. My initial brief was just to 'make a website,' but after mapping the Information Architecture (IA), I realized a storefront alone wouldn't solve the operational drag.
The Pivot: I proposed a dual-interface solution.
The Pivot: I proposed a dual-interface solution.
Customer Side:
A frictionless, Amazon-like purchasing experience.
Customer Side:
A frictionless, Amazon-like purchasing experience.
Customer Side:
A frictionless, Amazon-like purchasing experience.
Business Side:
A custom Admin Dashboard to replace the email inbox entirely.
Business Side:
A custom Admin Dashboard to replace the email inbox entirely.
Design Process
Design Process
Color Palette and Typography
Color Palette and Typography
I selected a clinical, high-contrast palette (Deep Greens and Whites) to signal purity and compliance. Used clean sans-serif typefaces to ensure legibility on complex Safety Data Sheets (SDS).
I selected a clinical, high-contrast palette (Deep Greens and Whites) to signal purity and compliance. Used clean sans-serif typefaces to ensure legibility on complex Safety Data Sheets (SDS).
Engineering the "Full Stack"
Engineering the "Full Stack"
Once designs were approved, I moved to Cursor to build the production environment using Next.js and TypeScript. This wasn't just a static site; it needed a living backend.
Once designs were approved, I moved to Cursor to build the production environment using Next.js and TypeScript. This wasn't just a static site; it needed a living backend.
Once designs were approved, I moved to Cursor to build the production environment using Next.js and TypeScript. This wasn't just a static site; it needed a living backend.
Database Architecture:
I integrated Supabase and architected the relational tables for Products, Orders, and Users, ensuring real-time inventory syncing.
Database Architecture:
I integrated Supabase and architected the relational tables for Products, Orders, and Users, ensuring real-time inventory syncing.
Database Architecture:
I integrated Supabase and architected the relational tables for Products, Orders, and Users, ensuring real-time inventory syncing.
The Payment Challenge:
Integrating Stripe was a steep learning curve. I spent days in the Stripe Sandbox environment, simulating failed payments, refunds, and webhooks to ensure the checkout flow was bulletproof before going live.
The Payment Challenge:
Integrating Stripe was a steep learning curve. I spent days in the Stripe Sandbox environment, simulating failed payments, refunds, and webhooks to ensure the checkout flow was bulletproof before going live.
The Payment Challenge:
Integrating Stripe was a steep learning curve. I spent days in the Stripe Sandbox environment, simulating failed payments, refunds, and webhooks to ensure the checkout flow was bulletproof before going live.
The Automation Layer
The Automation Layer
To fully remove the client from the 'email loop,' I integrated the Resend API. Now, transactional emails (Order Confirmations, Shipping Updates) trigger automatically based on status changes in the Admin Dashboard, turning a manual 10-minute task into a 0-minute automation.
To fully remove the client from the 'email loop,' I integrated the Resend API. Now, transactional emails (Order Confirmations, Shipping Updates) trigger automatically based on status changes in the Admin Dashboard, turning a manual 10-minute task into a 0-minute automation.
To fully remove the client from the 'email loop,' I integrated the Resend API. Now, transactional emails (Order Confirmations, Shipping Updates) trigger automatically based on status changes in the Admin Dashboard, turning a manual 10-minute task into a 0-minute automation.
Outcomes
The platform is currently live on Hostinger. By moving from email-based sales to a self-serve checkout, the client has:
Eliminated the daily backlog of procurement emails.
Secured 100% ownership of their customer data.
Launched a scalable infrastructure that handles orders while they sleep.
The platform is currently live on Hostinger. By moving from email-based sales to a self-serve checkout, the client has:
Eliminated the daily backlog of procurement emails.
Secured 100% ownership of their customer data.
Launched a scalable infrastructure that handles orders while they sleep.
The platform is currently live on Hostinger. By moving from email-based sales to a self-serve checkout, the client has:
Eliminated the daily backlog of procurement emails.
Secured 100% ownership of their customer data.
Launched a scalable infrastructure that handles orders while they sleep.
Reflection
This project changed how I think about e-commerce design.
The visible storefront was only one part of the experience. The real product included the admin workflow, database structure, payment states, inventory logic, and automated communication behind it.
The biggest decision was recognizing that a “website” would not solve the client’s problem. The business needed a system that connected customer purchasing with internal operations.
This project changed how I think about e-commerce design.
The visible storefront was only one part of the experience. The real product included the admin workflow, database structure, payment states, inventory logic, and automated communication behind it.
The biggest decision was recognizing that a “website” would not solve the client’s problem. The business needed a system that connected customer purchasing with internal operations.
I also learned that full-stack product work changes how design decisions are made. A screen is only useful when the underlying data, state changes, and operational workflow support it.
