Context
I kept Googling the same thing — “cracked heels men fix” — and landing on the same three articles written for women, repackaged with a stock photo of a guy. The clinical sources were accurate but impersonal. The product sites were selling, not teaching. Nothing spoke to men who actually wanted to understand what was happening to their feet and what to do about it without a referral.
63% of Americans report foot pain, but only 12% ever see a podiatrist. Men have a 3× higher fungal infection rate. The men's foot-care segment is growing at 10% CAGR. The audience exists. The resource doesn't.
Design synthesis
Men need a foot health resource that's male-specific, clinically grounded, and product-informed — the intersection no existing site occupies.
The Competitive Gap
Three categories of content exist for men's foot health. Each covers part of the problem. None covers all of it.
Men's Sole Revival sits at the intersection: male-specific, clinically grounded, and product-informed. Not a compromise between the three categories — the resource that should exist where they overlap.
The Pivot
The original plan was a premium men's foot care e-commerce site. Curated product kits — antifungal treatment, toe separators, insoles, foot cream. Headless Shopify, Next.js frontend, dark editorial brand.
The numbers kept breaking. Commodity products with thin margins, fulfillment costs, customer acquisition on a cold audience. Three weeks of modeling margins that wouldn't work was the signal: the friction wasn't execution. It was the starting point.
Key insight
The pivot wasn't away from e-commerce — it was toward content as the product, using e-commerce UX patterns to frame editorial decisions.
Design Decisions
Two decisions defined the direction: the visual language and the review page layout. Each came from reasoning about the audience's emotional state and task intent, not aesthetic preference.
Brand Direction: Dark Editorial
Three visual directions were prototyped and evaluated against one question: does this aesthetic lower the stigma barrier before the first word is read?
Medical authority is precisely the barrier these men are already dealing with. Clinical design confirms the user’s fear: ‘this requires professional help.’ That’s what drives them away.
Hesitation in this audience comes from shame, not indecision. Pressure amplifies shame. Fear-based design destroys trust before it starts.
The visual language of premium grooming brands and men’s performance gear. Brands men already trust for personal care. The aesthetic says this topic is handled here with confidence, not apology.
Visual Directions Explored
Clinical — Rejected
Salesy — Rejected
Dark Editorial — Chosen
Review Pages: E-Commerce UX, Not Blog Format
The user's task on a review page is evaluation, not reading. A blog format buries signal in narrative — the user has to read to evaluate. An e-commerce layout does the orienting work: hero image, specs grid, rating, pros/cons, buy links. Users already know how to scan this pattern from every product page they've used.
This isn't a store. There's no checkout, no inventory. The UX pattern is borrowed from e-commerce because it matches the user's task, not because it serves a transaction.
Design System
Three typefaces, each with a job. Barlow Condensed for display headlines — authority and presence. Lora for editorial subheads and quotes — readable, approachable. DM Sans for body copy and UI — legibility at scale. The roles are explicit, not decorative.
The token architecture runs three tiers: CSS custom properties as the source of truth, TypeScript semantic aliases for brand-aware naming, and Tailwind utilities consumed in components. One file change propagates everywhere. The same naming convention holds across Brand, Wayfarer, and Men's Sole Revival — this wasn't retrofitted. It was a decision made before the first component was built.
Same naming convention, different values per project. The AB Core Library holds primitives for all three properties.
Site Architecture
Seven page types, each designed for a different user task. The information architecture is the product strategy made navigable — every route maps to a specific intent.
Page Types in Context
Orient + Browse
The homepage answers one question: is this site for me?
Learn
Long-form articles build authority. The layout is for reading, not scanning.
Evaluate + Decide
Product reviews use e-commerce UX patterns. The layout matches the task.
Evaluation Plan
This is a self-initiated project. There were no live metrics at launch. What I defined instead was a validation plan: specific measures tied to the strategic hypotheses, structured around the first 3, 6, and 12 months of content publishing.
No live data yet. These thresholds were defined to test the core hypotheses: that the content reaches the audience, that the UX patterns match their tasks, and that the site earns credibility with brands.
Reflection
The first build spent three weeks fighting a stack that wasn't right for the problem. The friction was the signal and I waited too long to act on it. The pivot from e-commerce to content wasn't a retreat — it was the moment the project found its actual shape.
The absence of user validation is the biggest open question. The e-commerce layout for reviews is the call I'd make again, but it hasn't been tested with the actual audience. The competitive analysis and UX reasoning are sound, but reasoning isn't evidence. The evaluation plan is how I'll find out if the reasoning holds.
Content authority takes time. The honest uncertainty: whether the SEO ramp will produce the audience before the motivation to sustain the project runs out. That's not a design problem. It's the real risk of building something this slowly, alone.
What wasn't done
I didn't conduct user interviews before building. I didn't run usability tests on the review page layout. The e-commerce UX pattern is based on competitive analysis and reasoning about mental models, not observed behavior with real users. Self-initiated, no research budget. The decisions are reasoned, not tested. The evaluation plan is how I'll find out if the reasoning holds.
If I had more time
Run moderated usability tests with 5–6 participants matching the target persona — men 25–55 who have Googled a foot health question in the last 6 months. Test the review page layout against a blog-format control. Measure task completion time, information findability, and whether the e-commerce pattern reduces cognitive load for evaluation tasks.
From there: A/B test the homepage topic categories to see which entry points drive the deepest engagement. Validate the email signup placement. And pressure-test the brand direction with the audience directly — does the dark editorial tone actually lower the stigma barrier, or is that an assumption that deserves its own research cycle?
Next Case Study
Spotify — Recently Played Controls