ecéntic
Product Design
Contents
Overview
About Ecentic
Ecentic is an e-commerce optimization platform built for the AI agent economy. As AI shopping agents (GPT-4, Claude, Gemini, Perplexity) increasingly make purchase decisions on behalf of consumers, merchants risk being silently excluded. Ecentic simulates how these agents compare products, diagnoses why listings win or lose, and auto-optimizes them to get picked first.
What I Did
As designer and frontend developer, I owned this product from first wireframe to shipped code.
- Product Design: Designed every screen, from onboarding through the full dashboard, with a data-dense layout system built for scannability.
- Brand Identity: Built the visual language, logo lockups, color tokens, typography (LT Superior), and marketing collateral.
- Frontend Development: Shipped the onboarding flow and the complete dashboard on Next.js 16 (App Router, PPR, Suspense streaming), React 19, Tailwind CSS 4, Recharts, and Motion.
- Integrations: Wired Shopify OAuth, WooCommerce API, and custom product feed URLs into the onboarding, with real-time streamed simulation results.
Design
I owned the entire design process from wireframes through final UI. The visual language is clean and data-dense, built around a neutral background with semantic color tokens, a custom typeface (LT Superior), and a component system designed for clarity at scale. Every screen prioritizes scannability: win rates, agent verdicts, and optimization status are always visible at a glance.
Onboarding
Frontend Development
A four-step guided flow that takes merchants from zero to their first AI simulation. The onboarding is built as a multi-step client flow with step validation, animated transitions, and live progress indicators that stream simulation results as they complete.
- Connect, Platform integration via Shopify OAuth, WooCommerce API, or custom product feed URL
- Select Products: Choose which imported products to include in simulations
- Add Competitors: Benchmark against competitor listings
- First Scan, Triggers a live AI simulation sweep with real-time progress streaming
Dashboard
Frontend Development
The dashboard is the core product surface. Built with Next.js 16 (App Router, PPR, Suspense streaming), React 19, Tailwind CSS 4, Recharts, and Motion for animations. Data fetching uses server components with skeleton-based streaming for fast perceived load times.
Results
Stack
What the Founder Says
"Mario took a complex product idea, simulating how AI agents evaluate e-commerce listings, and turned it into something merchants can actually understand and use. The dashboard he designed and built is dense with data but never overwhelming. He handled everything from the Shopify OAuth flow to the simulation result pages, and every screen feels intentional. Having someone who can design at this level and then ship the frontend themselves is rare."