Men's Sole Revival
A diagnostic-first foot-health resource for men over 40. Research, assessment redesign, brand identity, and a production design system.
“The middle, where someone could teach men what’s happening to their feet and what to do about it, didn’t exist.”
The problem.
Men over 40 quietly Google their foot problems. Clinical sites scare them. Commerce sites push to them. The middle, where someone could teach them what’s happening and what to do about it, didn’t exist. The articles that ranked were written for women, repackaged with a stock photo of a guy.
Week 1
Margin modeling
Week 2
Customer interviews
Week 3
The pivot
Three weeks of margin modeling, one pivot
The Original Plan
E-commerce
- Shopify storefront
- Product reviews
- Cart / checkout
- Subscription tier
- Newsletter popup
Week 3
Margin modeling kept pointing at information, not products.
What Shipped
Editorial
- Long-form pillars
- Assessment branch
- Affiliate context
- Routine prompts
- No popups
The bet.
Build a male-specific foot-health resource at the intersection of clinical, wellness, and product-first. The first plan was e-commerce. Three weeks into margin modeling, the research kept pointing at the same thing: information, not products. I pivoted to content authority and used e-commerce UX patterns to frame editorial decisions.
Men’s
Sole
Revival
“After years of neglect, men over 40 finally have a place to start.”
A brand that’s actually for men.
Most men’s wellness brands aren’t for men. They’re rebranded women’s content with a stock photo of a guy. MSR starts from how men actually search for foot problems: quietly, with shame, after years of neglect. The brand voice is direct and clinical, never cold. Barlow Condensed for editorial heat, Lora for long-form trust, cognac as a grounded accent against editorial near-black.
Built once.
Used everywhere.
Token-led from the start. Color, type, spacing as primitives. Article pattern, assessment branch, review card, routine prompt all read from the same vocabulary. Thirteen components carry every page on the site. Documented in Figma so the next designer who picks this up doesn’t have to rebuild the rules.
→ Click 01 · 02 · 03 to switch panels
Six tokens. Every color on every page resolves through one of these. Cognac is the only saturated tone; everything else is a paper-to-ink scale.
Editorial Ink
#13100C
Display + body ink
Cognac
#C4703A
Brand + key actions
Deep Cognac
#A35E32
Hover + emphasis
Paper
#F5F0E8
Surface
Stone
#A99B8A
Borders + secondary
Pulse Red
#C8341A
Severity high
Two faces, no third. Barlow Condensed carries every display and section label. Lora carries every long-form paragraph and italic callout.
Display · Barlow Condensed
Aa
The Men’s Foot Health Assessment
700, 800 weights · uppercase displays + section labels
Long-form · Lora
Aa
Long-form reading sits in Lora. Italic for citations and callouts.
“After years of neglect, men over 40 finally have a place to start.”
400, 500, 600, 700 weights · roman + italic
Thirteen components carry every page. Each one is documented in the Figma source with use rules, anatomy, and the data shape it expects.
Article hero
Eyebrow · title · meta · cover
Pull quote
Italic Lora + cognac rule
On-page nav
Sticky section TOC, mobile drawer
Symptom card
Check-list + count threshold
Severity gate
Tier callout (low / mid / clinic)
Triage option
Select-all-that-apply chip
Routine prompt
Action · cadence · duration
Review card
Product · verdict · disclosure
Affiliate CTA
Disclosure-first link button
Editorial figure
Inline image + caption + credit
Footnote rail
Citation list + cross-links
Author byline
Photo · role · update date
Site footer
Nav · sources · accessibility
Shipped.
menssolerevival.com, live since April 2026. Long-form pillar articles, a five-section assessment that branches by symptom, product reviews structured for trust, and an editorial system documented in 13 components. The site exists where the three categories overlap, not as a compromise between them.
Two of the assessment’s twelve frames. The full flow lives at menssolerevival.com/assessment.
Section 01 · Nail Health · annotated
Four decisions visible on one screen.
- 01
Skip is always one tap away.
Sticky section nav lists only the sections the user triaged. The Skip This Section button never disappears.
- 02
Stat, then source. Never the reverse.
8.57% prevalence with a peer-reviewed citation directly under it. Journal, author, year. Trust before recommendation.
- 03
Humane checklist language.
“Nails are thick, yellowed, white, or brittle” instead of clinical terms. Written the way a man actually describes what he sees.
- 04
Every section closes with a 3-beat block.
“3+ checks likely points to fungal infection or an ingrown nail. Both are treatable. The guide at the end points you in the right direction.” What the count means · reassurance · next step. The user never gets left with a raw number.
6
users started the flow
100%
finished the triage step
83%
reached results
13×
avg results revisits
Assessment funnel · live data · n = 6 users over 10 weeks
The mobile read is the dominant one. Pillar articles, assessment, and reviews all designed mobile-first.
