The Ayanna Lott-Pollard homepage

Case study  ·  Ayanna Lott-Pollard

Building a room where she is the person you came to see.

An executive, speaker, and leadership coach needed to stop borrowing other people's platforms and own one of her own. The brief was easy to say and hard to do: make it feel like walking into a room where she is, unmistakably, the person you came to see.

Client
Ayanna Lott-Pollard
Platform
Astro · Sanity · Cloudflare
Timeline
Brand strategy through launch, 2026
Live site
ayannalott-pollard.com

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

Claude strategy & research synthesis Figma Make wireframes & concepts Figma design system Claude Code production build Astro static framework Sanity CMS, scaffolded Web3Forms booking form GitHub repo & CI Cloudflare Workers hosting ClickUp project record
Ayanna Lott-Pollard, portrait

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.
The Ayanna Lott-Pollard site

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.

Competitive audit board of speaker and thought-leader sites

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.

The Backstory section of the site

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.

The In Her Words quote band on the Speaking 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 directionWhat it wasWhat happened
The StageDark, cinematic, type-forward.Set aside.
The DeclarationA 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.

Design process mood board with Vogue covers and editorial references

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.

Coral and turquoise palette exploration
Coral and turquoise
Warm cream and lavender palette exploration
A warmer read
Final muted navy editorial palette
Final: muted navy

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.

The Speaking page cover hero

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.

Speaking page cover hero and editorial system
Cover hero
Speaking page scroll-fill throughline
Scroll-fill throughline
In Her Words quote band on the Speaking page
In Her Words

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.

The scroll-fill throughline on the Speaking page

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.

ProblemCauseFix
Content stayed invisible foreverA 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 sentA 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.

Full homepage of the Ayanna Lott-Pollard site
Home
The Backstory section
The Backstory
Press and Media page
Press and Media
Contact page: a simple, human process
Contact: a simple, human process

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.

AreaBeforeAfter
PresenceScattered across other organizations' websites, LinkedIn, and Instagram.One authoritative home in her own name.
BookingNo single place to book her.A booking path that starts a conversation.
SearchNo page that answered "Who is Ayanna Lott-Pollard?"A site written to be the source answer engines quote.
BrandBorrowed 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, portrait

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.

The Ayanna Lott-Pollard site

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 site

Next case study

Let's work together

Visualize your future.

If you're building something serious, let's make it shine.