Situation
The Metropolitan Market website was built in 2012–2015 and optimized exclusively for desktop viewing. It used a traditional department-centric information architecture that didn't match how customers shopped. There was no search functionality, no blog for SEO, recipes were buried in a chronological system, the weekly ad was a non-compliant PDF, and there was no visibility into user behavior or site performance.
Task
Rebuild the website with modern, mobile-first architecture organized around customer needs (shop, learn, make, save) rather than internal departments, while incorporating the redesigned offers, recipes, and blog into a cohesive experience.
Action
I began with customer journey mapping — not as an analysis of existing behavior, but as a clean reimagining of how customers should move through the site. Rather than mapping what was, I designed what should be, organizing the experience around four customer need states: shop, learn, make, and save. From there I built a comprehensive site map that gave those need states structure and hierarchy. Only after the site map was validated did I move into Adobe XD for wireframing — approximately one to two weeks mapping out how the buckets interconnected and where key content lived within each. I then created high-resolution wireframes with detailed variations on key elements and interactive flows. These high-fidelity wireframes informed the design system decisions — icon design, typography, component patterns, spacing, and interaction behaviors. Rather than designing the system in isolation, every decision was made in context using wireframes to ensure consistency and usability across the entire site. The design system was built out in XD and became the source of truth for the developer. We then took a phased, modular approach to implementation: offers page first, then recipes, then Mixer blog, shop bucket, and homepage landing page simultaneously. Microsoft Clarity was implemented to provide visibility into user behavior for post-launch optimization.
Result
Overall traffic increased 63% and mobile traffic increased 230%. The modular rollout allowed us to validate each section independently before the full launch, reducing risk. The design system ensured consistency and accelerated development. The website became the central platform connecting offers, recipes, content, and ecommerce integrations.
Key Pivot
The original brief from leadership included a suite of social features — community boards, recipe submissions and reviews, AR-enabled gamified experiences, and proximity-triggered functionality. After scoping the full range of possible implementations, three conclusions were clear: the feature set required a native app to administer securely, development costs would likely reach $500K–$1M, and there was no clear path to monetization that could justify the investment. We pivoted the fourth bucket from SHARE to SAVE — a decision that reduced development time and expense while replacing an aspirational feature set with one that actively generated revenue through pay-to-play placement and direct offer redemption. It was the right call.
Stack
Adobe XD · Illustrator · Photoshop · WordPress (v1) → Kentico (v2) · Microsoft Clarity · Smartsheet
Workflow
Customer journey mapping (reimagined, not data-derived) → site architecture mapping → wireframed full site in Adobe XD → produced high-fidelity interactive prototypes → built icon system in Illustrator → established design system as developer source of truth → migrated CMS from WordPress to Kentico → phased rollout by section to validate independently → implemented Microsoft Clarity for heatmap and session recording → tracked build in Smartsheet