2026 Website Look & Feel Refresh

Redesigning our website one page at a time — a lower-risk way to test new direction before committing the whole site. The process went as follows:

1. Claude Cowork: Product & Content Marketing drafted page contents into a visual layout to establish structure before any design work began.

2. Design in Figma: Took the AI-drafted layout into figma and manually rebuilt the visual identity: typography, color, spacing, components. This was my first Figma project where I learned the tool hands-on while redesigning these pages.

3. Refine in Claude Design: Once Claude Design launched, the team migrated the Figma work over to finish formatting and writing the content before export.

4. Handoff: Delivered the final HTML files from Claude Design over to our web developer for implementation.

Revisions continue post-handoff, often refining Claude Design outputs back in Figma for Hero images. Occasional UI/UX collaboration on the JAI Product page. This page-by-page approach validated the new direction before a full site-wide rebuild — 11 pages are live, with more in progress.

Initial Drafts from Claude Cowork

Older Revisions in Figma

Refinement in Claude Design

Old Website Design vs. Refreshed Look & Feel