Executive summary
She was in demand everywhere, and had no home of her own.
Ayanna Lott-Pollard is a 20-year executive, the Executive Director of Resilient Coders, and the Founder and President of The Leadership Collective. She is increasingly booked as a speaker on economic resiliency and leadership. But her presence was scattered across other organizations' websites, LinkedIn, and Instagram.
When someone searched for her name, or for a leadership coach in Philadelphia, or a speaker on economic empowerment, no single place answered. For someone whose business is being booked, that is a leak.
So the site had three jobs: turn conference planners into booking inquiries, tell her story to young professionals who find her mission magnetic, and route consulting clients to a clean discovery path. All of it in a voice that is hers.
The whole thing was built AI-assisted, from strategy and research through wireframes and production code. The reason it does not look AI-built is the part worth studying: the quality tracks to how the research was done, how the work was organized, and how tightly the AI was directed at every step.
The project in numbers
3
audiences, each with its own path through the site.
4
self-hosted type families in production.
<5s
the target for the hero to answer what she speaks about and how to book her.
Toolkit
Part one · Strategy
The pressure: in demand everywhere, at home nowhere.
Chapters 1 to 4. The brief, the research, the three audiences, and a bet on answer engines. Every later decision had a reason because of what happened here.
Chapter 01 · Strategy
The problem
Her business is being booked, and there was nowhere to book her.
We met at a Pitch Please event during Philly Tech Week in May 2025. She runs two things at once: a nonprofit coding bootcamp pursuing social justice through economic empowerment, and her own consulting and coaching practice. Her career runs from advertising to healthcare to the White House Upper Press Office to tech.
What she didn't have was a home of her own. 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.
Three jobs for one site
- Book herTurn conference planners into booking inquiries.
- Tell the storyReach young professionals who find her mission magnetic.
- Start a conversationRoute consulting clients to a clean discovery path.
Ayanna Lott-Pollard · website sync
I love Cassandra, but to me it's a lot of testosterone in there.
Chapter 02 · Strategy
Research and strategy
Before any visuals, there was a strategy document with a reason behind every later decision.
A competitive audit, personas, user flows, an answer-engine plan, and a section-by-section content map. This is where AI earned its keep: not by generating a look, but by compressing days of research and synthesis into a structured strategy. The judgment stayed human.
We 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 as editorial references. Speaker sites are overwhelmingly corporate and muted, or bold but cold. One finding became the spine of the whole project:
Nobody in this space owns "warm and vibrant."
Underneath that 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. It was all filed into a structured research library, not left in a chat log. Every biographical claim on the site traces back to a verified source in that library.
The most useful piece of client direction
Her favorite reference was Cassandra Worthy's site: bold, strong, commanding. But she named exactly what was wrong with it for her, and that one sentence set the tone for every color, type, and layout call that followed. 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.
From the working files · Competitive audit
The research found the gap. Her own words aimed it.
The board of speaker and thought-leader sites, benchmarked side by side.

Chapter 03 · Strategy
Who the site is for
Three audiences, three paths, and five seconds to answer the first question.
Mapping the flows surfaced a hard constraint: the hero has to answer "what does she speak about, and how do I book her?" in under five seconds.
Funnel 01
The conference planner
Arrives from a search. Needs topics, proof, and a booking path with no friction.
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.
On persona language
Strategy work has to read the room it is being deployed into.
Chapter 04 · Strategy
Answer engines, not just search
A deliberate bet: be the source AI engines quote.
We did not chase traditional 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 those engines combine that footprint into a direct answer.
The site was written to be the quotable source for the questions people actually ask, with every answer anchored to a real, verified entity:
- Ayanna Lott-Pollard
- Resilient Coders
- The Leadership Collective
- White House Upper Press Office
- Harvard Business School
- MacKenzie Scott / Yield Giving
- Comcast Catalyst for Change
- Temple University
- West Philadelphia
- DiverseForce On Boards
- We Love Philly
- Philly Tech Week
Organized like a real practice, not a chat thread
Every strategy artifact (Research Overview, Website Proposal, Website Strategy) was moved into the client's permanent project record in ClickUp, so the work lives where she and future collaborators can find it. The workflow then became a reusable prompt template, so the next project starts from a system, not a blank page.
Part two · Design
The shaping: a Vogue cover, then everything it did not need.
Chapters 5 to 7. The creative direction, a palette that changed three times on the way to the right one, and the type.
Chapter 05 · Design
Creative direction
Step onto the page, and you have stepped into the room.
The 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.
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.
| Hero direction | What it was | What happened |
|---|---|---|
| The Stage | Dark, cinematic, type-forward. | Set aside. |
| The Declaration | A dark, structural block. | Set aside. |
| The Editorial (chosen) | Cream, Vogue-inspired, type as art with a colored sidebar. | Won, then got stripped down across more variants to test how little the hero could carry and still land. |
Her name is the brand
A specific 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.
From the working files · Mood board
Vogue covers and editorial references.
The purest statement won: headline-led, with her portrait set Vogue-style into the colored sidebar panel.

Chapter 06 · Design
The color journey
Branding is not a straight line, and that is the process working.
This is the part we would put in front of any client who thinks branding is a straight line.
Step 01 · inferred
Orange-core.
Warm and vibrant, inferred from her love of "calm warmth but vibrancy." A reasonable first read. Not yet hers.
Step 02 · her words
Coral and turquoise.
"I'm a red. I love red and turquoise. Coral red." Right structure, too much saturation at full scale.
Step 03 · final
Muted editorial navy.
Navy and deep blue with cream and soft lavender. Cyan only on dark surfaces. The photography carries all the warm color.
When she saw coral and turquoise at full size 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.
The early work wasn't wrong. It was the necessary path to the right answer.
You check what a client says they like against what they say in the moment, you show real options at real scale, and when better information shows up you revise. The AI can generate options fast. Knowing which one is hers is the human part.
From the working files · The palette at full scale
Coral and turquoise, to a warmer read, to the final muted navy.
Red and purple became the explicitly rejected direction.



Chapter 07 · Design
Typography
Four families, each with one job.
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 her own Instagram, to ground the design in her real brand language.
Display · Cormorant
Fashion-masthead authority. Sets her name.
Editorial serif · Fraunces
Soft and wonk axes, for section titles like The Backstory.
Labels · JetBrains Mono
Eyebrows and tags.
Body and UI · DM Sans
Warm, vibrant, and clear.
Part three · Development
The shine: built with AI, directed by a person.
Chapters 8 to 10. The build, the motion, and the two bugs that only careful review caught.
Chapter 08 · Development
The build
Fast, durable, and cheap to host, with nothing the project did not need.
The production site is static Astro with vanilla CSS and JavaScript. It lives in a private GitHub repo and deploys to Cloudflare Workers on every push. Forms run through Web3Forms, and a Sanity CMS is scaffolded and conditionally wired.
It was built with Claude Code. 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
Two tiers of tokens
Palette and gradient variables that every component reads from.
Texture and grid
A noise overlay for the dark editorial sections, and a container-wide grid with a full-bleed escape hatch.
One reusable band
A call-to-action band component with navy, blue, and lavender themes.
One color rule
Cyan never touches a light surface. Navy is the accent on light, cyan is the accent on dark.
In production · The Speaking page
The page that turns attention into booked engagements.
Cover hero, an auto-scrolling press marquee, a scroll-fill throughline, signature talks, an "In Her Words" strip, past engagements, and a tailored call to action.



Chapter 09 · Development
Motion with restraint
Polished does not mean maximal.
Content fades and lifts as it enters the viewport, with staggered children and a scroll-fill word animation on the Speaking page. The Speaking hero and quote bands use real parallax, tuned to 14 to 18 percent of scroll speed, and a blur-to-sharp text reveal.
All of it sits behind the reduced-motion setting, so it never fights accessibility. The same restraint runs through the contact flow, which deliberately replaces instant booking with a human process: a booking form with service cards and clear expectations, not a raw calendar embed. An inquiry becomes a conversation, not a cold slot-grab.
On building with AI
Direct the tool at a real system and it compounds your work. Point it at a blank page and it averages.
Chapter 10 · Development
The hard problems
Two bugs a fast AI build introduced, and only careful testing caught.
Both are worth keeping notes on.
| Problem | Cause | Fix |
|---|---|---|
| Content stayed invisible forever | A fully clipping clip-path sat on the same element that triggered the reveal. A clipped element reports zero intersection area, so the observer never fired. | Trigger the reveal on an unclipped wrapper and animate the clip on an inner child. |
| A thank-you message showed before the form was sent | A display: flex rule was overriding the HTML hidden attribute. Author styles beat the browser default. | Any toggled element gets an explicit hidden guard. |
Both are documented in the project's memory files so they never recur.
In production · The pages
Home, Speaking, Press and Media, Blog, and Contact.




Chapter 11 · Results
What shipped
It shipped to a happy client.
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.
3
audiences, three distinct funnels.
4
self-hosted type families in production.
<5s
target for the hero to answer what she speaks about.
| Area | Before | After |
|---|---|---|
| Presence | Scattered across other organizations' websites, LinkedIn, and Instagram. | One authoritative home in her own name. |
| Booking | No single place to book her. | A booking path that starts a conversation. |
| Search | No page that answered "Who is Ayanna Lott-Pollard?" | A site written to be the source answer engines quote. |
| Brand | Borrowed platforms. | Feminine-led command, her name front and center, warm and vibrant in a sea of corporate-cold. |
We publish numbers when they are real, never before. The figures above are scope and design targets, not traffic or booking outcomes.
Ayanna Lott-Pollard · on launch
I'm happy with it. Very happy.
Chapter 12
What we 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.
The client's offhand sentence is often the whole brief.
"It's a lot of testosterone in there" did more strategic work than any mood board. The job is to listen for the line that is really about identity, then let it govern every decision after it.
Branding is not a straight line.
Orange to coral and turquoise to muted navy wasn't indecision. It was the path to an answer she could only recognize once she saw the wrong versions at full scale.
Own the differentiator before you decorate.
The most valuable output of the research was one sentence: nobody here owns "warm and vibrant." Everything after it was execution of that one gap.
Restraint is a feature, in motion and in booking.
Parallax, scroll-fill, and reveals all bend to reduced motion. The contact flow replaces instant booking with a human process.
Everything she asked for in that first Philly Tech Week conversation is on the page.
Feminine-led command, her name front and center, warm and vibrant in a sea of corporate-cold.
Ayanna Lott-Pollard · The Leadership Collective
View live siteNext case study
