Tattooed Chef embodies a distinct lifestyle within the plant-based food sector — bold, health-forward, culturally conscious. But their Shopify storefront didn't make it easy for customers to find what they were looking for. Products were organized in ways that made sense internally but didn't map to how shoppers browsed. The navigation system needed to align the brand's digital presence with how customers actually thought about plant-based food categories.
The project spanned navigation redesign, product catalog integration, and a custom CMS framework on Shopify. Cross-functional collaboration between marketing, UX/UI, and design teams was essential — the navigation structure needed to serve marketing goals (featured products, seasonal campaigns) while remaining intuitive for customers who just wanted to find a specific type of product quickly.
I led technical and user research to understand how Tattooed Chef customers browsed. The key insight: customers thought in terms of meal occasions and ingredient types, not SKU categories. I redesigned the navigation taxonomy to reflect these mental models — category-first browsing with integrated product catalog previews in the navigation itself.
Rather than separating navigation from product discovery, I integrated product catalog previews directly into the navigation experience. Hovering on a category revealed featured products, availability, and direct-to-cart options. This reduced the path from browse intent to purchase decision.
I developed a custom CMS framework on Shopify that gave the content team autonomous control over featured products, seasonal rotations, and promotional placements. This eliminated the need for developer intervention for routine merchandising updates.
Handed off the finalized navigation design and product page templates within Shopify's theme architecture. Built the collection taxonomy and metafield structure so the marketing team could manage seasonal product rotations and category updates without developer involvement. Provided a content guide documenting the image specs, copy length constraints, and category naming conventions to maintain visual consistency.
The existing site dumped visitors on a flat product grid — overwhelming for a frozen food brand with distinct category segments (plant-based bowls, burritos, pizzas, etc.). Reorganized navigation to surface categories first, letting shoppers self-identify by meal type before browsing products. Reduced cognitive load on entry and shortened the path for return buyers who already knew their category.
A 1-month timeline ruled out custom backend work. Designed the navigation and product discovery within Shopify's native collection and metafield architecture, giving the marketing team full autonomy for seasonal updates without developer support. Every design decision was validated against Shopify's CMS constraints first.
For a food brand, the product photo IS the purchase trigger. Designed category cards with hero product imagery at larger scale than typical e-commerce thumbnails — making the browse experience feel appetizing, not transactional. Photography did the selling; copy stayed minimal.
Tattooed Chef was a speed project — one month, end to end. The tight timeline forced discipline: every design decision had to be validated against Shopify's native capabilities before it was even sketched. That constraint turned out to be a feature, not a bug — it eliminated scope creep and kept the focus on the one thing that mattered: making it easier for people to find food they wanted to buy.
The biggest takeaway was how much navigation can do for a food brand when imagery is given room to breathe. Typical e-commerce treats product photos as thumbnails; here, making them the primary navigation element turned browsing into a more sensory, appetite-driven experience.