Day 10: How We Work Page

After the About page established who we are, Day 10 focused on how we work. The assessment and results pages show our capabilities, but clients also need to understand our process, communication style, and what makes working with us different.

Update

  • Implemented a new /how-we-work page that explains our process, communication approach, and core promises
  • Went through multiple design iterations to refine visual hierarchy, readability, and user experience
  • Added comprehensive test coverage (unit tests and property tests) to maintain design system consistency
  • Enhanced scroll-triggered animations with proper reduced-motion support and graceful degradation
  • Polished FAQ section readability and overall page aesthetics

What Shipped

1. New How We Work page with clear process explanation

The new How We Work page (src/pages/how-we-work.astro) is structured as a narrative that builds trust through transparency:

  • Hero: “Clear process. Calm communication. Finished projects.” — sets the tone immediately
  • Process Overview: Four-step process (Kickoff & clarity → Build in checkpoints → Launch & handoff → Support)
  • Pull Quote: “We’d rather lose a project than leave you stranded mid-build” — reinforces trust
  • Four Pillars: We Respond / We’re Honest / We Finish / We Communicate — core promises
  • Typical Timeline: Realistic expectations for different project types
  • FAQ Section: Answers common questions about working with us
  • CTA: Links to /assessment and /book for next steps

2. Multiple design iterations and polish passes

The page went through several refinement cycles:

Initial Implementation:

  • Basic structure with hero, process steps, pillars, timeline, and FAQ
  • Foundation styling aligned with brand design system

Readability Improvements:

  • Increased font sizes across sections (from var(--text-base) to var(--text-lg) and var(--text-xl))
  • Enhanced FAQ section with constrained line length and centered content
  • Improved padding and spacing for visual comfort

Visual Design Enhancements:

  • Added diagonal slice transition from hero to process section for visual flow
  • Introduced accent line below intro section for emphasis
  • Added vertical connector line in process steps for better visual hierarchy
  • Redesigned FAQ section with minimal border-based styling
  • Updated CTA section to left-aligned grid layout
  • Added highlight underline effect to headline emphasis
  • Enhanced timeline and FAQ sections with hover effects and transitions

Final Polish:

  • Updated color scheme for section labels and headings using darker and lighter teal variants
  • Improved visual distinction and alignment with overall design aesthetics

3. Comprehensive test coverage

Following the pattern established in Day 09, we added tests to protect the page’s integrity:

  • Unit tests (src/pages/how-we-work.test.ts): Validates key copy, structure, and sections directly from the .astro source
  • Property tests (src/pages/how-we-work.spacing.property.test.ts): Ensures spacing consistency across the page

The tests check for:

  • Hero section presence and content
  • Process overview section with all four steps
  • Four pillars section
  • Timeline section
  • FAQ section
  • CTA sections
  • Proper semantic HTML structure

4. Enhanced scroll-triggered animations

The page uses scroll-reveal animations to create a progressive disclosure effect, but with proper accessibility considerations:

  • Intersection Observer implementation: Wrapped in try-catch for graceful error handling
  • Reduced-motion support: Respects prefers-reduced-motion media query
  • Graceful degradation: Works even in browsers without IntersectionObserver support
  • Staggered animations: Process steps and pillars animate in sequence for visual interest

5. FAQ readability improvements

The FAQ section received special attention for readability:

  • Constrained line length for optimal reading experience
  • Centered content layout
  • Increased padding for visual comfort
  • Minimal border-based styling that doesn’t distract from content
  • Hover effects for better interactivity

Design Decisions

Visual Flow and Hierarchy

  • Diagonal slice transition: Creates a clear visual break between hero and process sections
  • Vertical connectors: Help users follow the process steps sequentially
  • Accent lines: Provide subtle visual emphasis without overwhelming the content
  • Color scheme: Teal variants for section labels create visual distinction while maintaining brand consistency

Typography and Readability

  • Larger font sizes: Improved readability across all sections
  • Constrained line length: FAQ section optimized for reading comfort
  • Clear hierarchy: Section labels, headings, and body text create clear information hierarchy

Accessibility

  • Semantic HTML: Proper use of <main>, <section>, <article>, and ARIA labels
  • Reduced-motion support: Animations respect user preferences
  • Focus management: Proper focus-visible styles for keyboard navigation
  • Screen reader support: Hidden decorative elements use aria-hidden="true"

Try It

Technical Notes

  • Built with Astro’s static site generation (prerender = true)
  • Uses BaseLayout for consistent header/footer
  • All animations are CSS-based with JavaScript enhancement for scroll triggers
  • Tests validate actual source code, not rendered HTML, for better reliability
  • Property tests ensure design system compliance (spacing, colors, typography)