The Best Chemicals Website
The Best Chemicals Website
Building a Compliance-First Chemical
E-commerce Platform
Building a Compliance-First Chemical E-commerce Platform
Website
Summary
Summary
Designing and developing a full-stack e-commerce ecosystem to reclaim profit margins and customer relationships.
Designing and developing a full-stack e-commerce ecosystem to reclaim profit margins and customer relationships.
Role
Role
Product Designer & Full-Stack Developer
Product Designer & Full-Stack Developer
Client
Client
The Best Chemicals
The Best Chemicals
Stack
Stack
Figma, React/Cursor, Supabase, Stripe
Figma, React/Cursor, Supabase, Stripe
Website
Impact
Impact
Margin Recovery:
+15%
(Estimated increase in profit by removing Amazon referral fees).
+15%
(Estimated increase in profit by removing Amazon referral fees).
Data Ownership:
100%
ownership of customer data for retargeting (impossible on Amazon).
100%
ownership of customer data for retargeting (impossible on Amazon).
Operational Efficiency:
<2 Min
to process orders via the custom Admin Panel.
<2 Min
to process orders via the custom Admin Panel.
Overview
Overview
What is The Best Chemicals?
What is The Best Chemicals?
The Best Chemicals is a US-based supplier specializing in high-purity laboratory chemicals, with a focus on niche compounds like Luminol for forensic and educational use. Formerly operating exclusively on Amazon, they serve a diverse customer base ranging from science educators and hobbyists to professional forensic teams, prioritizing compliance, quality, and fast domestic shipping.
The Best Chemicals is a US-based supplier specializing in high-purity laboratory chemicals, with a focus on niche compounds like Luminol for forensic and educational use. Formerly operating exclusively on Amazon, they serve a diverse customer base ranging from science educators and hobbyists to professional forensic teams, prioritizing compliance, quality, and fast domestic shipping.
The Best Chemicals is a US-based supplier specializing in high-purity laboratory chemicals, with a focus on niche compounds like Luminol for forensic and educational use. Formerly operating exclusively on Amazon, they serve a diverse customer base ranging from science educators and hobbyists to professional forensic teams, prioritizing compliance, quality, and fast domestic shipping.
The Strategy: Moving Beyond "Just a Website"
The Strategy: Moving Beyond "Just a Website"
The Challenge
The Challenge
The client wanted to increase margins by moving off Amazon, but their existing workflow was entirely manual. Customers would browse a catalog, then email the company to place orders.
This 'Inbox Procurement' created two massive problems:
The client wanted to increase margins by moving off Amazon, but their existing workflow was entirely manual. Customers would browse a catalog, then email the company to place orders.
This 'Inbox Procurement' created two massive problems:
The client wanted to increase margins by moving off Amazon, but their existing workflow was entirely manual. Customers would browse a catalog, then email the company to place orders.
This 'Inbox Procurement' created two massive problems:
Friction:
High churn because buying chemicals felt like a negotiation, not a purchase.
Friction:
High churn because buying chemicals felt like a negotiation, not a purchase.
Scalability:
The owner was trapped in email chains, manually tracking inventory and status updates."
Scalability:
The owner was trapped in email chains, manually tracking inventory and status updates.
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.
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).
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.
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.
Learnings
Learnings
What I Learned:
Data Shapes Design: Building with Supabase taught me that scalable UI isn't just about pixels; it requires a solid database architecture to support it.
Internal UX Matters: Designing the Admin Dashboard proved that optimizing the seller's workflow is just as critical to business success as the customer's buying journey.
The Sandbox Mindset: Integrating Stripe revealed that debugging and breaking things in a test environment is just another form of design iteration.
AI as a Multiplier: Using Cursor didn't replace coding—it handled the boilerplate, allowing me to focus my energy on complex logic and final polish.
What I Learned:
Data Shapes Design: Building with Supabase taught me that scalable UI isn't just about pixels; it requires a solid database architecture to support it.
Internal UX Matters: Designing the Admin Dashboard proved that optimizing the seller's workflow is just as critical to business success as the customer's buying journey.
The Sandbox Mindset: Integrating Stripe revealed that debugging and breaking things in a test environment is just another form of design iteration.
AI as a Multiplier: Using Cursor didn't replace coding—it handled the boilerplate, allowing me to focus my energy on complex logic and final polish.
What I Learned:
Data Shapes Design: Building with Supabase taught me that scalable UI isn't just about pixels; it requires a solid database architecture to support it.
Internal UX Matters: Designing the Admin Dashboard proved that optimizing the seller's workflow is just as critical to business success as the customer's buying journey.
The Sandbox Mindset: Integrating Stripe revealed that debugging and breaking things in a test environment is just another form of design iteration.
AI as a Multiplier: Using Cursor didn't replace coding—it handled the boilerplate, allowing me to focus my energy on complex logic and final polish.
View other projects
View other projects
Let’s Connect
To collaborate and solve bigger problems
Contact me
Let’s Connect
To collaborate and solve bigger problems
Contact me
Let’s Connect
To collaborate and solve bigger problems
Contact me