← Back

P:TTERN by PULSE TCM

Re-architecting a Holistic Wellness D2C Experience Under Strategic Pivots

Overview

Architected and deployed the frontend infrastructure for P:TTERN by PULSE TCM, a modern wellness platform. After a critical external developer bottleneck, I self-taught the Shopify ecosystem and a low-code design engine to build the storefront’s foundation from scratch. Following a major mid-lifecycle corporate brand pivot, I adapted into a specialized frontend role to compress a total brand reset into a tight 2-month launch window. Post-launch, I assumed stewardship of the live site, navigating a lean capital preservation phase to optimize the checkout journey organically and establish a consistent, growing baseline of monthly conversions.

Background

Role

Shopify Frontend Developer

UX Strategy

Information Architecture

E-Commerce Implementation

Marketing Strategy

Tools

Shopify

Foxify Page Builder

Miro

Google Analytic

Microsoft Clarity

Year

2026

Link

Live Preview

01 / Discovery & Alignment

The project initiated with a deep forensic audit of the platform's legacy state, which had stalled due to unexpected operational constraints. To establish a viable path forward, I conducted a baseline evaluation of the existing digital infrastructure alongside a strategic analysis of the underlying business model. To solve these friction points, I led a discovery phase to explore how an integrative health experience—combining Traditional Chinese Medicine (TCM) and Western health diagnostics—could be translated into a frictionless, high-converting digital product. By auditing target consumer behaviors and aligning early stakeholders, I framed the foundational UX strategy: shifting the platform from a standard transactional storefront into a highly personalized, assessment-driven wellness ecosystem.

Key Activities Undertaken:

Macro Bottleneck Diagnosis: Evaluated historical operational metrics to identify how customer lifetime value (CLV) and retention could be structurally improved through UX interventions.
Integrative Health UX Audit: Analyzed the competitive landscape regarding digital TCM and Western diagnostics, pinpointing a major user drop-off pattern where complex health quizzes failed to deliver immediate, clear product value.
Technical Feasibility Mapping: Conducted platform sizing and technical capability audits to ensure our proposed logic-heavy questionnaire engine could be deployed efficiently using agile, modular layout frameworks rather than costly custom code.

A comprehensive framework mapping out the initial multi-tiered user experience model. This blueprint details the original value proposition, consumer-to-patient journey maps, and growth engine funnels designed to bridge complex, traditional wellness concepts into a scannable digital ecosystem.

02 / Strategic Challenge

The defining challenge of this transformation was navigating a deep, systemic tension: balancing clinical data integrity with frictionless e-commerce conversion. To build a highly defensible proprietary "data moat," the platform required a comprehensive diagnostic intake capable of cross-referencing intricate Traditional Chinese Medicine (TCM) body constitutions with modern Western health metrics. However, forcing a standard digital consumer through a dense, medical-grade questionnaire poses a massive risk to drop-off rates and retail conversion velocity. My role was to defuse this tension by architecting a Three-Tier Growth Engine. The strategic solution required transforming an incredibly complex business flywheel—spanning educational content, distinct physical product lines (Skin, Hair, Metabolic, Teas), and professional clinical referrals—into a digestible, consumer-first narrative that minimized cognitive load while maximizing data capturing efficiency.

Key Objectives Established:

Deconstruct the Ecosystem Flywheel: Harmonize three distinct business pillars (content, physical products, and clinical consultations) into a single, unified digital experience where each phase naturally incentivizes the next.
Mitigate Intake Fatigue: Structure the diagnostic intake pathways so that users feel continuously rewarded with immediate personal value (such as a free health blueprint) rather than overwhelmed by a medical questionnaire.
Architect for Long-Term Value (LTV): Ensure that the initial touchpoint optimized for an immediate retail purchase, while seamlessly embedding loops for subsequent loyalty tiers and recurring telemedicine integration.

Documentation outlining the backend operational architecture, including the initial question conditional logic assessment model (the "data moat") and the multi-stream loyalty flywheel engineered to systematically solve systemic business vulnerabilities like high CAC and single-revenue dependencies.

03 / System Architecture

When the internal strategy team formalised the brand pivot to P:TTERN, my role transitioned from high-level strategic ideation to structural execution. To align with their direct-to-consumer (DTC) commercial roadmap under strict launch timelines, I initiated a thorough sitemap migration. I audited my original, engagement-focused architecture against the newly expanded retail verticals. To support their targeted product lines, I re-engineered the entire platform hierarchy, replacing an educational, content-heavy model with a highly taxonomy-driven navigation system. By cross-referencing these commercial goals with the operational realities of the Shopify engine, I conducted an MVP scope rationalization—stripping away non-essential profile features to minimize navigation debt and ensure a highly intuitive, friction-free path to checkout from day one.

Key Structural Frameworks Designed:

Commercial Taxonomy Realignment: Rebuilt the root information architecture to place immediate commercial intent first, grouping products into explicit, high-visibility verticals (Skin, Hair, Metabolic, and Teas) to accelerate user discovery.
MVP Scope Optimization: Systematically deferred complex legacy member dashboard logic (such as custom gamified reward trackers) to keep the initial platform launch lean, while deliberately safeguarding database hooks for future telemedicine and clinical service expansions.
Friction Reduction & Structural Cleanup: Streamlined the root menu tree, shifting secondary storytelling pages and auxiliary content into clear, predictable global footers to keep the primary transactional shopping funnel pristine.

The final, conversion-focused sitemap migration displaying an immediate retail push, cleanly compartmentalized retail taxonomy tiers, and a highly streamlined, checkout-ready root hierarchy.

04 / Core Execution

Following the departure of the strategy team shortly after deployment, I assumed full, end-to-end ownership of the implementation and frontend development phases. Moving from Figma directly into the production environment, I utilized Shopify and Foxify Page Builder to construct a highly responsive, module-based layout system. The primary interface goal was translating P:TTERN’s bold, modern visual identity into a clean, functional UI that optimized user task completion speeds. I focused heavily on streamlining mobile viewports, establishing an intuitive typographic hierarchy, and ensuring that rich brand imagery never competed with critical transactional elements. Every module was engineered for high scannability, allowing users to navigate from initial brand discovery to a finalized checkout with minimal cognitive friction.

Core Interface Solutions Delivered:

Dynamic Merchandising Homepage: Engineered a component-based landing experience utilizing modular grids that balanced large-scale brand storytelling with immediate, clear entry points to the new product verticals.
High-Conversion Product Detail Pages (PDP): Restructured product page layouts to prioritize dynamic visual carousels, clear pricing, subscription toggle selections, and high-visibility calls-to-action.
Unified Cart & Checkout Gateway: Designed a slide-out cart experience that keeps users contextually aware of their order progress, pairing instant item adjustments with automated recommended upsells to minimize abandonment.

Production screenshots of the live P:TTERN storefront. This showcases the modular homepage layout and the taxonomy-driven catalog pages designed to split users cleanly into designated health verticals (Skin, Hair, and Tea).

The final transactional interface layouts, highlighting the highly clean product detail configurations, the integrated slide-out cart framework featuring contextual cross-sells, and the streamlined checkout form optimized for rapid conversion.

05 / Strategic Outcomes

Launching the production store was only the initial phase of the digital life cycle. After stabilizing the live environment and establishing a reliable, active conversion baseline, I transitioned to driving continuous optimization and scaling the broader digital product ecosystem. To transform the standalone storefront into an advanced, ecosystem-led wellness platform, I initiated an internal optimization framework. Within this framework, I mapped a comprehensive 8-stage patient journey designed to perfectly align early-funnel awareness touchpoints (like social channels) with clinical e-commerce experiences and long-term ritual maintenance. Utilizing these behavioral insights, I systematically overhauled our primary data moat—reorganizing the core diagnostic assessment into a highly structured, 25-question conditional branching logic matrix explicitly engineered to lower intake friction, increase completion rates, and maximize the precision of post-quiz product recommendations.

Core Deliverables Engineered:

Omnichannel Patient Journey Map: Designed an 8-stage consumer-to-patient service blueprint detailing user actions, psychological emotional states, cross-channel touchpoints, and structural optimization opportunities.
Branching Diagnostic Logic Matrix: Engineered a robust, spreadsheet-mapped conditional assessment framework outlining 25 specific questions, variable format selection rules, and data-routing nodes for engineering handoff.
Scalable E-Commerce Design Governance: Documented a unified system of reusable Foxify sections, interface layout blocks, and global style guides to allow for rapid, standardized future platform enhancements.

CONTINUOUS OPTIMIZATION ROADMAP** — The internal platform strategy blueprint mapping the 8-stage consumer-to-patient emotional journey arc alongside operational front-stage and back-stage lines of visibility.

QUESTION BRANCHING DIAGNOSTIC ARCHITECTURE** — The production-level conditional logic matrix paired with interface mockups demonstrating the conversational diagnostic flow and personalized health outcome protocols.

◆

Retrospective & Key Takeaways

Business Objectives Dictate the Design Flow, Not Textbooks: Different business strategies and shifting corporate directions require entirely different product solutions. I’ve learned not to rigidly adhere to standard, dogmatic UX processes for the sake of it. My priority is always to design experiences that directly fulfill the current business objectives, adapting the user flow pragmatically to align with overarching commercial goals.

Journey Maps are Dynamic Prioritization Tools, Not Static Deliverables: A user journey map is not a fixed, one-time artifact. As business strategies pivot and market demands shift, the target journey must evolve alongside them. By treating the journey map as a living document, I was able to continuously identify and re-prioritize which user friction points were the most urgent and commercially critical to resolve in real time.
Embracing Technical Agility Under Resource Constraints: In a lean team environment with limited development manpower, resourcefulness is a core design requirement. Faced with technical bottlenecks, I stepped up to learn and master new execution platforms like Shopify and Foxify myself. While a self-engineered, no-code/low-code build may not always start as the perfect long-term solution, shipping a highly functional, live MVP allowed us to launch on time, prove commercial viability, and lay down an interface framework that can easily scale once technical backup is secured.