Men's Sole Revival: a foot health resource for men over 40.

I kept Googling “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.

The numbers back up the gap. Three of them set up everything that follows.

Foot pain is near-universal in this audience. Action is not. Men over 40 sit in the peak risk window for plantar fasciitis, hallux rigidus, and fungal infections, and they are the demographic least likely to act. The market knows the audience exists. Men's grooming is now a $90.7B category. The supply of foot-specific guidance has not caught up.

Design synthesis

Men need a foot health resource that is male-specific, clinically grounded, and product-informed. No existing site occupies that intersection.

Three categories of content exist for men's foot health. Each one does part of the job and stops short of the rest.

Clinical sources (WebMD, Mayo Clinic, Cleveland Clinic) deliver accuracy without a voice. Product-first content (sneaker blogs, GQ, Amazon listicles) names brands without explaining the underlying condition. Wellness platforms (Healthline, Verywell Health) write for a general audience that defaults to women. Each stops short of the same intersection.

The intersection is where the audience actually lives: male-specific, clinically grounded, and product-informed. It's the resource that should exist where the three categories overlap, not a compromise between them.

Five categories shape how a man over 40 thinks about foot health: clinical, athletic, orthopedic, wellness, and grooming. None of them speak to him directly about feet. Mapping their feature sets, pricing models, and tone shows where the gap lives and what MSR can borrow.

Synthesis

The audience moves through these categories in order. Grooming gives him permission to pay attention. Athletic content gives him gear. Wellness gives him language for symptoms. Orthopedic gives him names for conditions. Hair and skincare give him the model: short intake, specific recommendation, no judgment. MSR uses each one's entry move and avoids each one's exit. The result is the foot health resource the audience already knows how to read.

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 margin modeling kept pointing to the same answer: the friction wasn't execution. It was the starting point.

The market sizing supported the thesis. The unit economics did not.

Then the market research showed the real problem. I used a jobs-to-be-done frame to redefine it: these men aren't hiring a product. They're hiring a reason to start paying attention. The gap wasn't in the products. It was in the information layer that should precede them. Men over 40 who aren't already thinking about their feet are expensive to convert. They need a resource they trust before they'll buy anything. The e-commerce model puts the transaction before the relationship that makes the transaction possible.

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.

Seven primary routes, each designed for a different user task. The information architecture is the product strategy made navigable. Every route maps to a specific intent.

Two paths to the product. Symptom-first and question-first end at the same decision.

Flow A is the symptom-first path. The user takes the assessment, answers a Q1 that branches into one of three Q2 sets, and lands on a personalized recommendation. Flow B is the question-first path. The user reads a guide, follows an in-article reference into related products and reviews, and out to the product CTA. Both paths converge on the same decision. The branch rules, click states, and end-state rationale are annotated inline.

The original assessment ends in a tier label. The redesign ends in a specific next step. Six artifacts below: where the live version falls short, every question grouped by section, the wireframes at component fidelity, the decision flow behind the routing, the trade-offs that drove every scope move, and the layout rationale that defends every visual decision.

Problem & comparative analysis

The live assessment has three gaps worth closing. Five comparable intake tools (Function Health, WHOOP, BetterHelp, Hims, Eight Sleep) point to specific moves worth borrowing: symptom-first triage, why-we-ask microcopy, short branching paths, and scheduled re-engagement.

Every question, in order

Twenty-nine items across five sections. Step 0 is the only branching question; after triage, each visible section shows its full item set. Pain and Inflammation is the only three-state section because pain is interoceptive and binary forces false positives. The rest are binary checks. The note at the bottom of each section translates the flag count into a recommendation tier.

Wireframes at component fidelity

Six desktop states. Triage as Step 0. In-progress section with a sidebar that shows completed sections, the current one, and what is left. Skip confirmation. Results loading with an acknowledgment line. The three-block result (articles to read, a routine to follow, language for a podiatrist). Email capture as the primary save with a 30 and 90 day check-in opt-in. Two mobile variants for the touch-critical states.

Decision flow

Every branch in the routing logic, surfaced as a flowchart. Diamonds are decisions, rectangles are screens or actions, pills are start and end states. The Pain section is the only branch that renders three-state radios; everything else is binary. composeResult bucketizes flags, shifts on duration, and only surfaces the clinic callout when a section bucket reads high. Email and PDF endings opt the user into 30 and 90 day follow-ups.

Trade-offs and the decision argument

Nine decisions documented as trade-offs. What I chose, what I deliberately did not choose, and why. Closes with the case-study argument: personalization, re-engagement, and first-party data can be earned without trading the editorial trust the audience came for.

Layout rationale

Four layout decisions, each defended on usability, cognition, and emotional grounds. Each one was a deliberate choice over a documented alternative. The form is centered, supporting education sits beside it, the column is narrow, and the typography is editorial. The goal across all four is to lower the stigma barrier before the user reads a word.

Two design decisions define the case study: the visual language and the review page layout. Each one is a hypothesis about the audience that the design has to pass or fail. Aesthetic preference is not part of the test.

Brand Direction: Dark Editorial

Hypothesis. A dark editorial aesthetic, borrowed from premium grooming and performance gear, lowers the stigma barrier before the user reads a word.

Test. Three visual directions were prototyped and evaluated against one question: does this aesthetic lower the stigma barrier before the first word is read?

Visual Directions Explored

Clinical · Rejected

Salesy · Rejected

Wireframe Explorations

Hero + Topic Grid · Chosen

Editorial hero, then a topic grid keyed by condition. Orient → Browse → Read in one scroll.

Symptom-First Picker · Rejected

Homepage = the assessment Step 0. Strong intent capture. Felt clinical at the door before trust was earned.

Library-First Index · Rejected

Homepage = full content grid. Strong SEO surface. Buried the brand voice and the “is this for me” moment.

Dark Editorial \u00B7 Chosen

Logomark: from footprints to monogram

Hypothesis. A serif monogram, anchored in the same typography as the editorial body, lowers the stigma barrier through quietness. The footprint mark we started with reads closer to mall-podiatry than premium grooming.

Test. Three monogram directions were prototyped against the same question as the visual direction: does this mark lower the stigma barrier before the first word is read?

Chosen mark · four colorways

Navy

#1C3F5E

Cognac

#BE7241

Stone

#C4BCAE

Charcoal

#1A1A1A

Review Pages: E-Commerce UX, Not Blog Format

Hypothesis. Review readers want to evaluate, not read. A blog format buries the signal in narrative.

Test. An e-commerce layout (hero, specs grid, rating, pros/cons, buy links) does the orienting work. Users already know how to scan this pattern from every product page they have used. The site borrows it because it matches the task, not because the site sells anything. There is no checkout. There is no inventory.

Three typefaces, each with a job. The roles are explicit, not decorative. Below, each one is shown set in itself.

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.

The system on one page

Three signature documents pulled together for portfolio handoff. Each one stands on its own. Together they document the full visual system, the assessment flow, and the production component library.

02BRAND & IDENTITY

Wordmark at four sizes, three logomark directions explored, four colorways of the chosen mark, lockups, palette of eight, typography specs with live specimen, glyph set, and four application mockups.

03PRODUCT UI/UX

Flow map of the redesigned assessment. Five primary screens with arrows, four dashed branch states, six-cell annotation grid (tap targets, loading, haptic, error handling, accessibility, motion), legend strip.

04DESIGN SYSTEM · COMPONENTS

Spacing on a 4-point base, radius scale, zero-drift token mapping for every component. Primary button by variant and state, article header, inputs, icons, and the CSS custom-property output side-by-side with the design tokens.

Success is defined before the data exists. Below: proxy metrics for each hypothesis, a phased evaluation plan, and the decision criteria that would tell us to stop, iterate, or scale. No fabricated numbers. No live data yet. Five things to measure, in priority order.

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.