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 -> PDF
  • PDF -> 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#

  1. Turn raw Markdown into polished documents.
  2. From AI markdown to client-ready PDF in minutes.
  3. 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#

  1. Hero + quick start
  2. Quality proof strip
    • benchmark highlights
    • preview/export parity statement
  3. Workflow cards
    • forward conversion
    • reverse beta with review
  4. Template/style showcase
    • side-by-side style thumbnails
  5. Audience outcomes
    • AI users, docs teams, consultants
  6. Pricing preview
    • free/pro/team with clear “best for” labels
  7. Privacy/trust
    • temporary processing explanation
  8. 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:

  1. validate file/input
  2. route to workbench with preloaded mode and payload
  3. auto-focus relevant preview/editor panel

Messaging guardrails#

  • never imply perfect PDF -> Markdown extraction
  • 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)#

  1. hero CTA copy test (Convert now vs Start with your file)
  2. quick-start panel default tab test (forward vs remembered mode)
  3. trust micro-copy position test (inside panel vs below panel)

Homepage concept acceptance criteria#

  1. Users can identify how to start conversion immediately.
  2. Homepage communicates premium quality, not commodity conversion.
  3. Reverse beta is discoverable but responsibly framed.
  4. 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
  • quick-start hands off users to /workbench with 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 docs to See 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