Toolkit
The Result
The Site
The site became the editorial front door Ayanna never had — a place where a conference planner, a young professional, and a potential consulting client each find what they came for inside five seconds, without her having to be in the room.
3
Audiences, three distinct funnels
4
Self-hosted type families in production
<5s
Target for the hero to answer what she speaks about
It does not read like a speaker site. Most of them are corporate and cold, built to look "safe" for a procurement team. This one is warm, vibrant, and unmistakably feminine-led, with a Vogue-cover sense of arrival on the homepage and a deep navy editorial system carrying the rest.
What most people won't see is that the entire thing was built AI-assisted — strategy, research, wireframes, and production code. The reason it doesn't look AI-built is the part worth studying: the quality tracks directly to how the research was done, how the work was organized, and how tightly the AI was directed at every step.
That's it. I love it.Ayanna Lott-Pollard · final site review
The Problem · Phase 0
The Brief
Ayanna and I met at a Pitch Please event during Philly Tech Week in May 2025. She runs two things at once: she's the Executive Director of Resilient Coders, a nonprofit coding bootcamp pursuing social justice through economic empowerment, and the Founder and President of The Leadership Collective, her own consulting and coaching practice. She's a 20-year executive whose career runs from advertising to healthcare to the White House Upper Press Office to tech, and she's increasingly in demand as a speaker on economic resiliency and leadership.
What she didn't have was a home of her own. Her presence was scattered across other organizations' websites, LinkedIn, and Instagram. When someone Googled "Who is Ayanna Lott-Pollard?" or "leadership coach in Philadelphia" or "speaker on economic empowerment," there was no single, authoritative place that answered. For someone whose business is being booked, that's a leak.
The goal: a personal brand site that does three jobs at once — convert conference planners into booking inquiries, tell her story to young professionals who find her mission magnetic, and route potential consulting clients to a clean discovery path. All of it in a voice that is hers. As she put it, her advantage is walking into a room of executives, being underestimated, and then setting the agenda. The site had to do the same thing: the command is there, but the feminine has to lead the command.
Phase 1 · the core of this project
Research and Strategy
Before any visuals, the project started with a full pre-design strategy document — competitive audit, personas, user flows, an AEO plan, and a section-by-section content map — so every later decision had a reason behind it. This is where AI earned its keep: not by generating a look, but by helping compress days of research and synthesis into a structured, defensible strategy. The judgment stayed human; the leverage was the AI.
Deep entity & competitive research
I benchmarked the speaker and thought-leader space: Cassandra Worthy, Jadah Sellner, Jay Baer, and Michelle B. Griffin as direct peers, with Sinéad Burke, Vogue, The Cut, and Iyanla Vanzant pulled in as editorial references. One finding became the entire strategic spine of the project: nobody in this space owns "warm and vibrant." Speaker sites are overwhelmingly corporate-muted or bold-but-cold. That gap was the opening.
Underneath the competitive work ran a full research pass on Ayanna herself — press coverage (Boston Globe, Bay State Banner, Technical.ly, Philanthropy News Digest), podcast appearances, speaking engagements, and awards — all filed into a structured research library rather than left in a chat log. Every biographical claim on the site traces back to a verified source in that library.
The single most useful piece of client direction
Ayanna's favorite reference was Cassandra Worthy's site — bold, strong, commanding — but she named exactly what was wrong with it for her. That one sentence set the tone for every color, type, and layout call that followed. The research surfaced the gap; the client's own words aimed it.
I love Cassandra, but to me it's a lot of testosterone in there.Ayanna Lott-Pollard · website sync
She wasn't trying to play "a woman in a man's world." Her brand is feminine by design, and the authority sits on top of that, not in place of it.
Personas and user flows
Three audiences, three distinct funnels. Mapping the flows surfaced a hard design constraint: the hero has to answer "what does she speak about, and how do I book her?" in under five seconds. A note on language — an early persona carried a "DEI lead" title, which I flagged as too politically loaded for the current climate and replaced with functional titles (HR director, program manager, L&D lead). Strategy work has to read the room it's being deployed into — and that's exactly the kind of judgment call the AI doesn't make for you.
FUNNEL 01
The Conference Planner
Arrives from a Google search. Needs topics, proof, and a frictionless booking path.
FUNNEL 02
The Young Professional
Here for the story and the mission. Finds her arc magnetic and wants to follow it.
FUNNEL 03
The Consulting Client
Needs services and an easy discovery call. Routed to a clean, human intake.
Answer Engine Optimization, not just SEO
This was a deliberate bet. Rather than chase traditional Google rankings, the strategy targeted AI-powered answer engines (ChatGPT, Perplexity, Google AI Overviews, Claude) — because Ayanna's name already appears across podcasts, press, and speaking bills, and AI engines synthesize that corroborating footprint into a direct answer. The site was written to be the quotable source for the questions people actually ask — every answer anchored to a real, verified entity.
Organized like a real practice, not a chat thread
Every strategy artifact — Research Overview, Website Proposal, Website Strategy — was transferred into the client's permanent project record in ClickUp under a master "Ayanna Research and Strategy" doc, so the work lives where the client and future collaborators can find it. The whole workflow was then abstracted into a reusable prompt template so the next client project starts from a system, not a blank page. That's the organizational discipline that makes an AI-assisted process repeatable instead of a one-off.
Phase 2
The Design
The creative direction came down to one reference that kept earning its place: the Vogue magazine cover. Bold display type wrapped around a strong portrait, the subject as the unmistakable center of gravity. Step onto the page, and you've stepped into the room.
Hero exploration
Three distinct hero directions were mocked up — "The Stage" (dark, cinematic, type-forward), "The Editorial" (cream, Vogue-inspired, type-as-art with a colored sidebar), and "The Declaration" (a dark, structural block). The Editorial direction won, then got stripped down across further variants to test how little the hero could carry and still land. The purest statement won — headline-led, with Ayanna's portrait set Vogue-style into the colored sidebar panel.
A specific, important correction happened here. The first concepts led with "The Leadership Collective" as the hero mark. Ayanna was clear: she wanted her own name front and center, not the company. Her name is the brand.
The color journey
This is the part I'd put in front of any client who thinks branding is a straight line. The first palette was orange-core, inferred from her stated love of "calm warmth but vibrancy." A later strategy call gave us her own words — "I'm a red. I love red and turquoise. Coral red." — so the palette was corrected to coral and turquoise. Then we put it in front of her at full size and she pulled back: "I want to back away from the red and the blue… this was a little too playful for me." The Vogue-cover feeling she loved was still right — the saturation was not.
Step 01 · inferred
Orange-core. Warm and vibrant, inferred from "calm warmth but vibrancy." A reasonable first read — not yet hers.
Step 02 · her words
Coral & turquoise. Corrected to her stated favorites over navy and cream. Right structure, too much saturation at full scale.
Step 03 · final
Muted editorial navy. Navy and deep-blue with cream and soft lavender. Cyan reserved strictly for dark surfaces — and the photography carries all the warm color.
The lesson inside that arc — and the reason to trust an AI-assisted process with taste-sensitive work — is that the early work wasn't wrong, it was the necessary path to the right answer. You cross-reference a client's stated preferences against what they say in the moment, you show real options at real scale, and when better information shows up you revise instead of defending the first idea out of inertia. The AI can generate the options fast; knowing which one is hers is the human part.
The palette at full scale — coral + turquoise, to a warmer read, to the final muted navy. Red and purple became the explicitly rejected direction.
Typography
Cormorant for display gave us the editorial, fashion-masthead authority. The accent script took the longest — Dancing Script was rejected as "too pretty," and a run of signature-style alternatives followed, including a font pulled directly from Ayanna's own Instagram to ground the design in her real brand language rather than an invented one. Final production type pairs four self-hosted families.
Display
Ayanna
Cormorant — fashion-masthead authority
Editorial serif
The Backstory
Fraunces — soft / wonk axes
Labels
THE COLLECTIVE
JetBrains Mono — eyebrows & tags
Body & UI
Warm, vibrant, and clear.
DM Sans — body & interface
Phase 3 · AI-built, human-directed
Development
The production build is a static Astro site with vanilla CSS and JavaScript — fast, durable, and cheap to host, with no framework overhead the project didn't need. It lives in a private GitHub repo and auto-deploys to Cloudflare Workers on every push; forms run through Web3Forms; a Sanity v3 CMS is scaffolded and conditionally wired. It was built with Claude Code — but the durability comes from directing it toward a real design system and catching the traps AI code tends to leave behind.
A real design system, not just styles
The build runs on a two-tier token system — palette and gradient variables, a noise-texture overlay for the dark editorial sections, a container-wide grid with a full-bleed editorial escape hatch, and a reusable CtaBand component with navy / blue / lavender themes. One rule keeps the whole site coherent across pages: cyan never touches a light surface — navy is the accent on light, cyan is the accent on dark.
Motion with restraint
An IntersectionObserver-driven reveal system fades and lifts content as it enters the viewport, with staggered children and an Apple-style scroll-fill word animation on the Speaking page. The Speaking hero and quote bands use real parallax (tuned to 14–18% scroll speed) and a blur-to-sharp text reveal — all of it gated behind prefers-reduced-motion so it never fights accessibility.
The hard problems — where human review beat the AI
Two bugs in this build were worth keeping notes on, because both are the kind of thing a fast AI build introduces and only careful testing catches:
The reveal system deadlocks if you put a fully-clipping clip-path on the same element that triggers the IntersectionObserver — a clipped element reports zero intersection area, so the observer never fires and the content stays invisible forever. Fix: trigger the reveal on an unclipped wrapper and animate the clip on an inner child.
Separately, a thank-you message was showing before form submission because a CSS display: flex rule was overriding the HTML [hidden] attribute — author styles beat the browser default, so any toggled element needs an explicit [hidden] { display: none } guard. Both are documented in the project's memory files so they never recur.
The pages
Home; a full editorial Speaking page (cover hero, auto-scrolling press marquee, scroll-fill throughline, signature talks, an "In Her Words" strip, past engagements, tailored CTA); a static Press & Media page; and a Contact page built around "a simple, human process" — a booking form with service cards and clear expectations, deliberately not a raw calendar embed, so an inquiry becomes a conversation rather than a cold slot-grab.
The Final Build
It shipped to a happy client
The site shipped to a confident green build. The homepage delivers the Vogue arrival; the Speaking page does the heavy lifting of turning attention into booked engagements; the Contact flow sets expectations instead of just collecting a form. Everything Ayanna asked for in that first Philly Tech Week conversation — feminine-led command, her name front and center, warm and vibrant in a sea of corporate-cold — is on the page.
I'm happy with it. Very happy.Ayanna Lott-Pollard · on launch
Reflections
What I Learned
AI is leverage on research and structure, not a substitute for judgment
What makes the site not look AI-built is everything the AI didn't decide: the strategic gap to own, the color that's actually hers, the persona language that reads the room, the two bugs caught in review. Direct the tool at a real system and it compounds your work; point it at a blank page and it averages.
The client's offhand sentence is often the whole brief
"It's a lot of testosterone in there" did more strategic work than any moodboard. The job is to listen for the line that's actually about identity, then let it govern every downstream decision.
Branding is not a straight line, and that's the process working
Orange to coral-and-turquoise to muted navy wasn't indecision — it was the necessary path to an answer the client could only recognize once she saw the wrong versions at full scale.
Own the differentiator before you decorate
The single most valuable output of the research phase was one sentence: nobody here owns "warm and vibrant." Everything after — color, type, the Vogue direction — was execution of that one strategic gap.
Restraint is a feature, in motion and in booking
Parallax, scroll-fill, and reveals all bend to reduced-motion. The contact flow deliberately replaces instant-booking with a human process. Polished doesn't mean maximal.
