This wasn’t just a design.
It was a full-flavored digital experience with soul.
Role: Product Designer
Project type: Ecommerce / Branding
Tools: Figma + Maze
Year: 2025
Platform: WooCommerce + WordPress
🚀 Project Overview
As Product Designer and Front-End Developer, I led a 4-month initiative to redefine Dr. Spicy’s digital identity and launch their flagship e-commerce platform. Tasked with translating the brand’s Sonoran-inspired, handcrafted fermentation process into a cohesive online experience, I architectured a WooCommerce solution balancing bold brand storytelling with conversion-driven UX. This project encompassed end-to-end ownership—from user research and visual rebranding to responsive development and post-launch optimization
📌 Key Highlights
- Role: Solo Product Designer & Front-End Developer (WooCommerce)
- Scope: Digital rebrand + e-commerce launch
- Core Challenge: Elevating artisanal authenticity in a scalable digital storefront
- Outcome: Unified brand-to-interface ecosystem reflecting “fermented fire” craftsmanship
👨🏽🏫 The Challenge
- Designing a Digital Ecosystem for Artisanal Authenticity
As Product Designer, I confronted a core tension: how to translate Dr. Spicy’s tangible market energy—rooted in Sonoran fermentation traditions and handcrafted quality—into a scalable digital commerce platform. Pre-discovery research revealed three systemic barriers:
1. Brand Articulation Gap
Benchmarking against 6 food e-commerce competitors identified undifferentiated visual identities and generic UX patterns, diluting artisanal credibility. Dr. Spicy’s existing digital touchpoints lacked cohesion, failing to convey its “fermented fire” narrative.
2. User Trust Deficits
Analysis of +50 social interactions and influencer collaborations uncovered critical friction: health-conscious buyers demanded transparent ingredient sourcing and fermentation benefits absent from the digital experience, while adventurous food lovers sought clearer flavor differentiation.
3. Disjointed Discovery Mechanics
Competitive usability testing showed competitors prioritized transactional efficiency over storytelling. Dr. Spicy’s flavor-centric value proposition—its primary market differentiator—had no digital infrastructure for intuitive exploration or emotional engagement.
The mandate: architect an experience where craftsmanship became interface, trust became interaction, and flavor became navigation.
⚙️ Methodology: Hypothesis-Driven Design
Confronting scarce initial user data and undefined market positioning, I spearheaded a Lean UX framework to mitigate risk through continuous validation. This methodology prioritized agility over prescriptive documentation, transforming assumptions into testable artifacts within days rather than weeks.
Core Principles Guiding the Process
- Assumption Synthesis Converted founder anecdotes, competitor gaps, and social listening into proto-personas and journey hypotheses.
- Rapid Artifact Generation Deployed low-fidelity wireframes within 72 hours to pressure-test information architecture and task flows.
- Closed-Loop Validation Embedded bi-weekly testing cycles (Maze.co, usability sessions) to calibrate designs against behavioral signals
🧭 Design Process: Bridging Artisan Craft to Digital Commerce
An end-to-end product design journey balancing brand soul with conversion rigor.
Strategic Foundation
01
Goal Alignment Workshop
Framed success metrics through stakeholder collaboration:
- Defined business KPIs (online revenue targets, CAC reduction)
- Mapped user needs (flavor discovery, ingredient transparency)
- Codified brand non-negotiables (handcrafted aesthetic, “fermented fire” personality)
Output: North Star metrics guiding all design decisions.
02
Competitive Whitespace Analysis
Audited 6 food e-commerce competitors to identify:
- Market gaps: Generic visual language, superficial storytelling
- Opportunity: Own “sauce-as-character” narrative + fermentation education
- Voice positioning: Bold yet approachable tone bridging foodie and wellness audiences
Output: Strategic differentiators informing brand refresh.
Experience Architecture
03
Brand Identity System
Framed success metrics through stakeholder collaboration:
- Defined business KPIs (online revenue targets, CAC reduction)
- Mapped user needs (flavor discovery, ingredient transparency)
- Codified brand non-negotiables (handcrafted aesthetic, “fermented fire” personality)
Output: North Star metrics guiding all design decisions.
04
Persona-Driven Ecosystem
Structured flows around core user archetypes:
- Sitemap Logic: Flavor-first navigation > ingredient transparency > ritual-building
- Journey Mapping: Emotional hooks per stage (Wellness Seeker’s “gut health confidence” loop)
05
Prototype Evolution
Validated architecture through iterative fidelity:
- Lo-Fi Frames: Task-focused wireflows testing bundle discovery & checkout friction
- Hi-Fi Prototype: Component library embedding brand visuals (heat meters, fermentation infographics)
- Key Innovation: “Flavor Character” PDP template (story > pairings > science)
Validation & Launch
06
Behavioral Insight Harvest
Leveraged Maze.co to pressure-test decisions:
- Quantitative: 50+ task completions (87% success rate, 13s avg. flavor discovery)
- Qualitative: Uncovered “Scoville confusion” → added visual heat meter; “Bundle FOMO” → created gift builder
Impact: Cut checkout steps by 40% pre-launch.
07
UX Writing as Brand Amplifier
Engineered copy to drive action and connection:
- CTAs: “¡Descubre su Sabor!” (Discover their Flavors!)
- Error States: “¡Ay! Algo picó mal” (Oops! Something stung wrong) .
- Product Descriptions: “Smoky Habanero meets tropical mango – like a beach bonfire in Sonora”
08
Development-Design Handshake
Coded WooCommerce implementation ensuring:
- Visual Fidelity: 1:1 Figma-to-frontend component translation
- Mobile Optimization: 0.8s FCP for Instagram-driven traffic
- Conversion Safeguards: 1-click upsells, Mercado pago integration, abandoned cart triggers
The result transcended e-commerce: a sensory digital terroir where every interaction
—from heat meter to checkout— fermented brand loyalty.
🌶 Outcome: Beyond Transactions - Emotional Equitye
The new Dr. Spicy website not only enabled online sales but also established a bold, coherent digital identity that connects emotionally with users.
The result is an e-commerce platform packed with character, flavor, and storytelling in every screen.
🔍 Research: Human-Centered Insights
Empathy Mapping
Empathy maps revealed unmet emotional needs:
- Foodie Adventurers craved ‘journey metaphors’ (heat-as-adventure)
- Wellness Seekers needed scientific reassurance (probiotic infographics)
- Young Creatives demanded Instagrammable moments (unboxing theater)
Behavioral Insights
Social listening + competitor gaps exposed:
- 72% of sauce searches included “how spicy?” → mandated visual Scoville scale
- Micro-influencers drove 3x engagement with ‘backstory’ posts → inspired flavor-as-character narratives
🎨 Dr. Spicy User Empathy Maps
🧑🍳 Foodie Adventurer
| Stage | Persona | Goals | Actions | Thoughts & Feelings | Pain Points | Opportunities (UX/Brand) |
|---|---|---|---|---|---|---|
| Awareness | Foodie Adventurer | Discover bold, unique flavors | Scrolls IG, clicks on spicy ads | “This looks fun and wild!” | Unsure if it’s really different | Use bold colors & storytelling |
| Consideration | Foodie Adventurer | Compare flavors | Checks homepage, flavor list | “What’s the difference?” | No heat scale or taste cues | Add flavor notes + pairing ideas |
| Purchase | Foodie Adventurer | Try 2–3 sauces | Adds bundle to cart | “Excited to try everything!” | Checkout feels long | Simplify process, offer bundles |
| Post-Purchase | Foodie Adventurer | Enjoy & share experience | Posts on Instagram | “So good, my friends need this” | No follow-up after order | Add share incentive, recipe email |
🌿 Wellness Seeker
| Stage | Persona | Goals | Actions | Thoughts & Feelings | Pain Points | Opportunities (UX/Brand) |
|---|---|---|---|---|---|---|
| Awareness | Wellness Seeker | Find healthy, clean sauces | Searches fermented sauces | “Is this good for my gut?” | Lack of ingredient clarity | Add fermentation info + benefits |
| Consideration | Wellness Seeker | Verify health claims | Reads label + about page | “What makes this different?” | Technical, hard-to-read info | Show clean ingredients visually |
| Purchase | Wellness Seeker | Buy one safe option | Picks mildest bottle | “Hope it doesn’t upset me” | Fear of waste or strong flavor | Add testimonials, mini bottles |
| Post-Purchase | Wellness Seeker | Feel better & informed | Tries on food, tracks gut health | “Feels good so far” | Unsure how to use daily | Send pairing tips + education post |
🎨 Young Creative Consumer
| Stage | Persona | Goals | Actions | Thoughts & Feelings | Pain Points | Opportunities (UX/Brand) |
|---|---|---|---|---|---|---|
| Awareness | Young Creative Consumer | Discover cool indie brands | Browses TikTok, IG stories | “This branding is 🔥” | Not sure if it’s a real brand | Emphasize handmade, team story |
| Consideration | Young Creative Consumer | See if it matches their style | Scrolls about, reviews, images | “Would I share this?” | Too generic visuals or copy | Use playful tone + founder story |
| Purchase | Young Creative Consumer | Buy for self or gift | Adds to cart, checks gift wrap | “Hope it arrives fast & cute” | Delivery or return doubts | Clarify delivery, offer tracking |
| Post-Purchase | Young Creative Consumer | Share the experience | Films unboxing or shares post | “Packaging is so aesthetic” | No social incentive | Include hashtags, create unboxing moments |
🎨 Brand Refresh: Crafting a Sonoran-Semiotic Identity System
Engineering a desert-inspired visual language rooted in cultural authenticity and accessibility
We architected a cohesive identity system where every element served as a tactile extension of Dr. Spicy’s Sonoran terroir – transforming ecological inspiration into functional semiotics:
Color Theory & Accessibility
Desert-Hued Palette:
- #87C830 (Chiltepin Green): Growth + natural fermentation
- #8E3CCB (Monsoon Purple): Mystery + artisanal experimentation
- #FFD400 (Sunflower Yellow): Energy + flavor intensity
- #FF950F (Sunset Orange): Warmth + handcrafted tradition
Adobe-certified WCAG 2.1 AA compliance: All combinations passed contrast thresholds critical for health-conscious users navigating ingredient details.
Semiotic Iconography
Botanical-Microbial Synthesis:
- Chiltepin Pepper: Heritage ingredient as foundational motif
- Desert Flower: Blossoming flavor complexity
- Collaborative Form: Interlocking shapes symbolizing team craftsmanship
Each icon functions as visual shorthand – communicating fermentation science through regional poetry
Typography System
Dual-Axis Personality:
- RL Aqva (Display): Fluid organic forms evoking sauce movement
- Montserrat (UI): Clean geometry ensuring scannability
Hierarchy Strategy: RL Aqva for emotional moments (heroes/stories), Montserrat for functional clarity (labels/checkout)