Dr. Valerie Roberts · Website Redesign

Design Overview
& Review

This is an exploratory visual review, not a final sign-off. We've developed seven distinct design directions from the same content and structure. Your job is to react — what feels authentic, what feels aligned, and what to leave behind.

We're evaluating visual structure and aesthetic feel today. Operational copy, final photography, and technical decisions come later.

Speaker Notes
Welcome the client. Set expectations: this is a visual direction review, not a final approval. The goal is to identify which direction(s) feel closest to the brand, then refine from there. All comps share identical content, structure, and photography — the only variable is the visual language.

Overview

Seven Directions, One Structure

Every comp uses the same page layout, copy, and photography. What changes is the material language — palette, typography, geometry, and motion.

Direction Palette Display Type Body Type What to Notice
Coastal Mist white + Pacific teal Outfit (sans) DM Sans Animated fog canvas · pill buttons · breathing motion
Sanctuary Warm linen + steeped matcha Newsreader (serif) Source Sans 3 Organic border radii · tactile card surfaces · wabi-sabi warmth
Chromatic Warm ivory + burnished amber Fraunces (serif, SOFT) Plus Jakarta Sans Arch portrait frame · mid-century geometry · dual accent system
Ground Warm sand + bark taupe Newsreader (serif) Atkinson Hyperlegible Editorial sharp corners · 4-column focus grid · accessibility-first type
Bloom Apricot cream + sienna Newsreader (serif) Atkinson Hyperlegible Same structure as Ground · warmer, rosier palette variant
Repose Dusty rose cream + mauve Newsreader (serif) Atkinson Hyperlegible Radial-masked portrait · soft vignette edges · slide-down mobile nav
Stillness Pale sage + moss green Newsreader (serif) Atkinson Hyperlegible Opaque header · green-forward palette · most outdoors-connected

What stays constant: page structure, section order, copy, photography, contact details, and mobile menu behavior.

Speaker Notes
Walk through the matrix. Emphasize that the client is not picking a winner today — they're reacting to what feels right. Point out the two tiers: three polished directions (Coastal, Sanctuary, Chromatic) with animated backgrounds and refined motion, and four minimal directions (Ground, Bloom, Repose, Stillness) that share a structure with palette swaps.

Direction 01

Coastal

Biophilic Horizon · Coastal Botanical

View full prototype

Palette

Base
Accent
Text
Sky

Typography

Outfit display (Light 300) + DM Sans body
All-sans pairing · geometric with softened curves

Key Mechanics

Three.js WebGL fog canvas · pill-shaped CTAs (9999px radius) · pranayama motion timing (800ms inhale / 1200ms exhale) · diffused ambient shadows · horizon section dividers

What to Notice

This is the most atmospheric direction. The animated fog background and pill buttons create a sense of organic, breathing space. The all-sans type pairing feels modern and clinical — no serif warmth, just clean clarity.

Gut Check

Does the animated fog feel calming or distracting for someone arriving under stress?
The all-sans typography reads as modern and direct — does that match your clinical voice?
Pill-shaped buttons feel approachable. Do they feel professional enough for a psychologist's site?
Speaker Notes
Coastal is the most technologically ambitious direction. The WebGL fog canvas creates a living, breathing background. The all-sans pairing (Outfit + DM Sans) is the only direction without a serif — it reads as contemporary and clinical. Highlight the pranayama motion system: the timing curves mirror human respiration, which is a subtle but intentional biophilic touch.

Direction 02

Sanctuary

Sabi Sanctuary · Tactile Organic

View full prototype

Palette

Linen
Matcha
Persimmon
Sumi

Typography

Newsreader display (serif, opsz) + Source Sans 3 body

Key Mechanics

Asymmetric organic radii (28px 24px 32px 20px) · card-based focus items with numbered pill badges · warm parchment-to-sunken surface hierarchy · persimmon used exactly once as editorial spark

What to Notice

This is the most tactile direction. The organic border radii and warm linen surfaces evoke wabi-sabi — imperfect, handcrafted, grounded. The serif display type (Newsreader) brings literary warmth. Persimmon appears once: the word "broken."

Gut Check

Does the wabi-sabi warmth feel authentic to your practice, or too precious?
The organic photo frames are distinctive — do they feel natural or forced?
Newsreader is a literary serif. Does that match how you want to be perceived clinically?
Speaker Notes
Sanctuary is the warmest direction. The asymmetric border radii are the signature — they break the rectangular card pattern and create a handcrafted feel. The matcha accent is restrained (appears at most twice per viewport), and the persimmon secondary accent appears exactly once for the word "broken" in the statement quote. This is intentional editorial punctuation.

Direction 03

Chromatic Stillness

Mid-Century Contemplative

View full prototype

Palette

Ivory
Amber
Lapis
Espresso

Typography

Fraunces display (serif, SOFT/opsz variable) + Plus Jakarta Sans body

Key Mechanics

Arch portrait frame (120px 120px 16px 16px) · Fraunces SOFT axis for typographic warmth · dual accent system (amber signals, lapis acts) · sharp 4px number plates · lateral page-slide transitions

What to Notice

This is the most architectural direction. The arch portrait frame is the strongest visual signature across all seven comps — it reads as a doorway or window, evoking shelter and invitation. The dual accent system (amber for signals, lapis for actions) creates clear visual hierarchy.

Gut Check

The arch frame is polarizing — does it feel like a welcoming doorway or an unnecessary flourish?
Fraunces has visible "wonkiness" in its letterforms. Does that feel human or distracting?
The amber/lapis dual-accent system adds complexity. Is the hierarchy clear enough?
Speaker Notes
Chromatic is the most distinctive direction. The arch portrait frame is the single strongest visual element across all seven comps. Fraunces is a variable font with a "SOFT" axis that rounds the letterforms — this is intentional and gives the typography warmth without sacrificing the serif's authority. The dual accent system (amber for signals like the hero rule and number plates, lapis for all CTAs and interactive elements) is the most refined color architecture in the set.

Direction 04

Ground

Taupe & Sand · Editorial Accessibility

View full prototype

Palette

Sand
Bark
Teal

Typography

Newsreader display (serif, opsz) + Atkinson Hyperlegible body

Key Mechanics

4-column focus grid with visible mono numbers · sharp 6px border-radius · editorial large display type (clamp up to 78px) · no animated background · Atkinson Hyperlegible for maximum readability

What to Notice

This is the most direct direction. No animated backgrounds, no organic flourishes — just strong editorial typography and an accessibility-first body font. Atkinson Hyperlegible was designed specifically for low-vision readers. The taupe palette feels like natural clay.

Gut Check

The sharp corners and editorial grid feel structured. Does that match your clinical authority?
Atkinson Hyperlegible prioritizes readability over aesthetic refinement — is that the right trade-off?
The large display type (up to 78px) makes a strong statement. Does it feel confident or oversized?
Speaker Notes
Ground is the most accessible direction. Atkinson Hyperlegible was designed by the Braille Institute specifically for people with low vision — every letterform is engineered for maximum distinguishability. The 4-column focus grid with visible mono-style numbers is the most structured layout in the set. This direction prioritizes function over decoration.

Direction 05

Bloom

Apricot & Sienna · Warm Palette Variant

View full prototype

Palette

Apricot
Sienna
Teal

Typography

Newsreader display + Atkinson Hyperlegible body
Identical to Ground — only the palette changes

Key Mechanics

Identical structure to Ground · warmer apricot cream base · richer sienna accent · same editorial grid, same sharp corners, same font stack · palette-only variant

What to Notice

Bloom exists to answer one question: does the palette temperature matter? It shares every structural decision with Ground. The apricot/sienna combination evokes sunset light and dried flowers — warmer and more inviting than Ground's neutral taupe.

Gut Check

Compared to Ground: does the warmer apricot palette feel more authentic, or too soft?
The sienna accent is richer than Ground's taupe. Does it draw the eye appropriately?
If you prefer Ground's structure but want warmth, is Bloom the answer?
Speaker Notes
Bloom is a controlled experiment — it isolates palette temperature as the single variable. Same fonts, same layout, same component geometry. The apricot cream base is noticeably warmer than Ground's sand. This direction exists so the client can answer: "Do I like the structure but want a different temperature?"

Direction 06

Repose

Dusty Rose · Soft Vignette

View full prototype

Palette

Rose
Mauve
Teal

Typography

Newsreader display + Atkinson Hyperlegible body

Key Mechanics

Radial gradient mask on portrait (soft vignette fade) · slide-down mobile menu animation (not full-screen overlay) · same editorial grid as Ground/Bloom · dusty rose palette

What to Notice

Repose introduces one unique treatment: the portrait fades softly at the edges via a radial gradient mask, creating a vignette effect. The dusty rose palette is the most distinctly feminine in the set. The mobile nav also uses a different pattern — a slide-down animation instead of a full-screen overlay.

Gut Check

The masked portrait creates a dreamy quality. Does that feel welcoming or unprofessional?
The dusty rose palette is distinctly feminine. Does that risk alienating any of your audiences?
The slide-down mobile nav keeps content visible. Does that feel more natural than an overlay?
Speaker Notes
Repose has two distinguishing features: the radial-masked portrait and the slide-down mobile menu. The portrait vignette is achieved with a CSS mask-image — the photo fades at the edges instead of being clipped by a frame. This is the softest, most feminine direction. The slide-down menu is part of the mobile-menu A/B test defined in the design spec.

Direction 07

Stillness

Sage & Moss · Green-Forward Naturalism

View full prototype

Palette

Sage
Moss
Teal

Typography

Newsreader display + Atkinson Hyperlegible body

Key Mechanics

Opaque header (no backdrop-filter blur) · pale sage canvas · moss green accent · same editorial grid as Ground/Bloom/Repose · the most "outdoors-connected" palette

What to Notice

Stillness is the greenest direction. The sage/moss palette evokes a garden or forest understory. The opaque header (no frosted-glass blur) gives a slightly more structured, grounded feel. This is the most outdoors-connected direction in the set.

Gut Check

The sage palette feels natural and fresh. Does it feel too "wellness" for a clinical practice?
The opaque header is more traditional. Does that feel grounded or rigid?
Of the four minimal directions (Ground, Bloom, Repose, Stillness), does green feel most like you?
Speaker Notes
Stillness completes the palette-variant quartet. It's the only direction with a green-dominant palette. The opaque header is a minor structural difference — it lacks the backdrop-filter blur that the other minimal directions use. This creates a slightly more solid, traditional feel. Ask the client: "If you had to pick one color family for the practice, which would it be?"

Comparison

Side-by-Side: Key Dimensions

Isolate what matters. Each row compares a single design variable across directions.

Dimension Coastal Sanctuary Chromatic Ground Repose
Hero Frame Rounded card (24px) Organic radii (28/24/32/20px) Arch (120/120/16/16px) Sharp card (6px) Radial mask (no frame)
CTA Shape Pill (9999px) Rounded (14px) Square (8px) Sharp (6px) Sharp (6px)
Display Type Outfit (sans, Light 300) Newsreader (serif, Light 300) Fraunces (serif, SOFT 400) Newsreader (serif, Medium 500) Newsreader (serif, Medium 500)
Body Type DM Sans Source Sans 3 Plus Jakarta Sans Atkinson Hyperlegible Atkinson Hyperlegible
Background Animated WebGL fog Static warm linen Static warm ivory Static warm sand Static dusty rose
Motion System Pranayama (800/1200ms) Fluid settle (240/720ms) Crisp ease-out (180/500ms) Standard ease (150/300ms) Standard ease (150/300ms)
Card Radius 24px (soft) 20px (organic) 16px (architectural) 6px (sharp) 6px (sharp)
Accent Usage Teal: kickers, CTAs, focus numbers Matcha: CTAs, kickers, discs · Persimmon: 1× Amber: signals · Lapis: CTAs Taupe: all accents Rose: all accents
Speaker Notes
Use this slide to help the client isolate specific preferences. "You might like Comp A's hero frame but Comp C's typography." The showdown reveals that the three polished directions (Coastal, Sanctuary, Chromatic) each have a unique hero frame treatment, while the four minimal directions share the same structure with palette swaps. This is the most efficient way to narrow the field.

Convergence

Your Feedback Framework

The Anchor

Which single direction feels closest overall? Not perfect — closest. We'll refine from there.

"If I had to launch tomorrow, I'd start from ___."

Elements to Fold In

Which specific elements from other directions should be integrated into the anchor?

"I like ___'s hero frame but ___'s typography."

Elements to Drop

What didn't work? What should be discarded without further exploration?

"Definitely no ___ — it doesn't feel like us."

Next Steps

After your feedback, we'll produce one refined direction that combines your chosen anchor with the elements you want to fold in. Round two will include desktop and mobile homepage comps, an Areas of Focus page, and a style tile.

Timeline

Consolidated feedback → refined round-two comps in 5–7 business days.

Speaker Notes
This is the decision slide. Walk through each card and let the client respond. The goal is to leave with: (1) one anchor direction, (2) a list of elements to fold in, and (3) a list of elements to drop. Do not pressure for a final decision — "closest" is enough. The mobile-menu A/B test (push-down vs. overlay) should also be resolved here.