HOMEPAGE · DESKTOP · CURRENT BUILD
From the opening proposition through product, provenance and collection content.
PRE-LAUNCHDTC · SHOPIFY HYDROGEN
Pansuara
Pansuara is a vertically integrated teak brand launching DTC on Shopify, with Amazon expansion ahead. I've been involved across the eCommerce journey - from deciding what we should sell and how we position it to the customer experience, storefront, integrations and launch.
CONTEXT & RESPONSIBILITY
Pansuara is a vertically integrated teak brand launching direct-to-consumer on Shopify and expanding to Amazon. I joined before the commerce model was fully defined and have worked across product, brand, customer experience, technology and launch.
product & market researchunit economics & pricingbrand → design systemUX & storefront designHydrogen developmentCRO & growthSEO & discoveryfulfillment / payments / legallaunch operations
COMMERCIAL PROBLEM
I wanted to understand both what was worth selling and what made sense to start with. I used market data and unit economics to narrow the first category, choosing a product we could manufacture consistently, ship efficiently and use to build the brand before moving into harder-to-copy categories.
HOW THE PRODUCT DECISION WAS MADE
01 · MARKET515 relevant listings278 product families · comparable cohorts · exact-size benchmarks
02 · ECONOMICSUnit economicsmaterial + labor · freight / fulfillment · DTC + Amazon channel costs · margin / CAC headroom
03 · WHY THIS FIRSTCutting boardsproven year-round demand · simple, repeatable production · manageable fulfillment · gifting · accessible first purchase
04 · FOUNDATIONBuild the basecustomers · reviews · brand trust · fulfillment · operating capability
05 · EXPANDLarger, higher-ticketwhere vertical integration and logistics are the moat — hard for dropshippers to copy
CUSTOMER JOURNEY
Discoverprovenance story
Considerpdp · materials
Purchasecart · checkout
Ownaccount · care
Referstore credit
LIFECYCLE & RETENTION
The journey doesn't stop at checkout.
I also built the lifecycle around the storefront in Klaviyo - welcome, abandoned cart, post-purchase and referral / store-credit journeys, plus a separate lead journey for Teak Parcels.
01 · CUSTOM REFERRAL SYSTEM — CUSTOMER ACCOUNT
02 · KLAVIYO FLOW — LIVE
03 · THE EMAIL THE CUSTOMER WILL RECEIVE
A friend places their first order → the referrer's store credit is issued automatically → Klaviyo picks up the event, sends the credit email and a reminder before expiry. The referral system is implemented, the Klaviyo flow is live and configured, and the email is a real delivered test email - not a designed mockup. Pansuara is pre-launch, so no customer traffic runs through it yet.
welcomeabandoned cartpost-purchasereferral / store creditTeak Parcels lead journey
DIFFERENT AUDIENCE, DIFFERENT FUNNEL
Teak Parcels targets investor prospects, not store customers. It gets its own landing experience, separate lead capture, a dedicated Klaviyo list and its own lifecycle flow.
SELECTED EXPERIENCE
Current responsive production captures. Choose a device, move between pages, or open a complete page and scroll it at full resolution.
LIVE WALKTHROUGHS
Short recordings show how the current build behaves between static checkpoints. They are captured from the public pre-launch storefront and play only when requested.
PDP · DESKTOP · CTA & PRODUCT PROOF
The purchase area remains visible before the page moves into materials, build and sourcing evidence.
PDP · MOBILE · STICKY PURCHASE ACTION
The mobile hierarchy and persistent add-to-cart are visible while the product story continues.
DESIGN → IMPLEMENTATION
From design to production.
The experience is worked out in Claude Design first - then built to match in Hydrogen.
Interactive prototype
Explore states & variants
Review & tweak
Build in Hydrogen
CLAUDE DESIGN · INTERACTIVE PROTOTYPE
HYDROGEN BUILD · PRE-LAUNCH
I work through the experience in Claude Design before I touch production code - layouts, states, interactions and variants. The prototype is interactive and shareable, so the team can explore it, test options and make tweaks with me before I build it in Hydrogen. Once we're happy with it, I build that experience as closely as possible.
REAL STATES IN THE PROTOTYPE
Size variants with live pricing, the free-engraving studio, review and pre-order states - worked out in the prototype before implementation.
MOBILE EXPERIENCE
BRAND → DESIGN SYSTEM
The brand identity and artwork came from a branding agency. I helped shape and review the digital direction - scored the naming shortlist, recommended Pansuara, challenged parts of the direction. Then I took the finished brand and worked out how it actually behaves as a digital product: components, states, devices and the storefront itself.
BRAND BOOK · AGENCY
IDENTITY & ARTWORK — AGENCY
PRODUCTION SYSTEM · MINE
Playfair Display italic
LATO · EYEBROWS & UI
PRE-ORDERSTOREFRONT · HYDROGEN
ARCHITECTURE & INTEGRATIONS
COMMERCE
Shopify Hydrogen · Storefront API · Customer Account API · Admin API
CUSTOM EXPERIENCE
Customer account · referral / store-credit system · returns · content / metaobjects
LIFECYCLE / GROWTH
Klaviyo · Judge.me · lifecycle flows · lead capture
PLATFORM / DISCOVERY
Oxygen / Cloudflare · SEO · Search Console · Merchant Center
QA & PERFORMANCE
98PERFORMANCE
96ACCESSIBILITY
74BEST PRACTICES
100SEO
Performance is treated as part of the build, not something added at the end. The full result is shown - the 74 on Best Practices is real and being worked on, and mobile is lower and still being optimized.
LAUNCH & OPERATIONS
Worked through the less-visible launch work too - Shopify setup, payments, domains and hosting, Google infrastructure (Search Console, Merchant Center), lifecycle tooling, reviews, fulfillment, tax and compliance questions, and vendors.
