Documentation
Design phase 3: homepage concept
mdcraft.ai Phase 3 — Homepage Redesign Concept Direction#
Objective#
Design a homepage that increases first-action conversion while preserving premium positioning.
Core concept#
“Fast first win, premium depth behind it.”
Users should be able to start conversion immediately from the homepage, then continue deeper in workbench for advanced control.
Above-the-fold structure#
Left column (message)#
- headline focused on outcome
- short subheadline for who it is for
- trust micro-copy (privacy + beta honesty)
- secondary CTA (
Open full workbench)
Right column (quick-start module)#
Tabs:
Markdown -> PDFPDF -> Markdown (Beta)
Panel content:
- drag-and-drop area
- click-to-upload fallback
- paste markdown option
- accepted file type and size hint
Primary CTA:
Convert now
Hero content direction#
Headline options#
Turn raw Markdown into polished documents.From AI markdown to client-ready PDF in minutes.Beautiful Markdown exports, without the toolchain pain.
Subheadline pattern#
- one sentence on quality + speed
- one sentence on reliability boundaries for reverse beta
Homepage section blueprint#
- Hero + quick start
- Quality proof strip
- benchmark highlights
- preview/export parity statement
- Workflow cards
- forward conversion
- reverse beta with review
- Template/style showcase
- side-by-side style thumbnails
- Audience outcomes
- AI users, docs teams, consultants
- Pricing preview
- free/pro/team with clear “best for” labels
- Privacy/trust
- temporary processing explanation
- Docs and technical transparency
Conversion-first interaction design#
Quick-start states#
- default
- drag-over
- uploading
- processing
- success (handoff to workbench)
- error (specific, recoverable)
Handoff behavior#
When a user starts in hero:
- validate file/input
- route to workbench with preloaded mode and payload
- auto-focus relevant preview/editor panel
Messaging guardrails#
- never imply perfect
PDF -> Markdownextraction - avoid generic “convert any file” positioning
- keep quality and trust as primary differentiators
Mobile concept direction#
- stack hero message and quick-start module vertically
- keep upload control visible without long scrolling
- collapse non-critical proof blocks into concise cards
Early experiment backlog (after implementation)#
- hero CTA copy test (
Convert nowvsStart with your file) - quick-start panel default tab test (forward vs remembered mode)
- trust micro-copy position test (inside panel vs below panel)
Homepage concept acceptance criteria#
- Users can identify how to start conversion immediately.
- Homepage communicates premium quality, not commodity conversion.
- Reverse beta is discoverable but responsibly framed.
- Flow to workbench is seamless and context-preserving.
Implementation status#
Iteration 1 shipped (2026-03-10)#
- homepage hero now includes a live quick-start panel
- panel supports:
- mode switch (
Markdown -> PDF,PDF -> Markdown beta) - drag-and-drop or picker upload for markdown/pdf
- paste markdown + convert CTA
- mode switch (
- quick-start hands off users to
/workbenchwith preloaded context where possible
Follow-up opportunities#
- persist larger handoff payloads and richer source metadata
- add explicit analytics events for quick-start states
- test copy and tab defaults as defined in experiment backlog
Iteration 2 shipped (2026-03-10)#
- removed homepage docs-heavy section from the end-user landing flow
- replaced hero secondary CTA from
View docstoSee pricing - updated top navigation to
Workbench / Product / Pricing - kept homepage focused on user jobs: start conversion, understand quality, and choose plan
Iteration 3 shipped (2026-03-11)#
- changed hero from side-by-side split to vertical stack
- kept slogan and primary CTA at top under navigation
- moved quick-start converter window below the slogan/CTA block
- improved hierarchy from message -> action -> quick conversion
Iteration 4 shipped (2026-03-11)#
- widened quick-start hero window to full content width for better visual balance
- added single-column quick-start body override to prevent empty desktop split area
- aligned quick-start window proportions more closely with the header/menu bar footprint
Iteration 5 shipped (2026-03-11)#
- shortened hero slogan to
Simply professional Markdown conversion - reduced top hero spacing under the menu bar for a tighter first-screen composition
Iteration 6 shipped (2026-03-11)#
- tuned hero headline sizing and width constraints so the slogan fits on one line on desktop
- kept responsive behavior for smaller screens while preserving stronger desktop readability