Redesign a Homepage with Psychology

Audit a real homepage using Cialdini's 7 persuasion principles.

Introduction

30 Second Summary

Every time you land on a website, your brain makes a trust decision in milliseconds. The difference between a page that converts and one that bounces often comes down to invisible psychology principles baked into the design.

In this project, you will audit a real business homepage against 7 proven persuasion principles and 3 cognitive UX factors, then redesign its highest-impact sections in Figma with psychology-backed annotations.

What You'll Build

A Customer Psychology Audit Playbook applied to a real homepage (spiritofhopes.com), including a 10-point scorecard, annotated screenshots, and redesigned sections with psychology annotations explaining every design decision.

By the end of this project, you'll have:

A 10-point Psychology Audit Scorecard evaluating a real homepage against Cialdini's 7 Principles of Persuasion and 3 cognitive UX factors.
A redesigned hero section and social proof section in Figma, applying loss aversion, cognitive load theory, and authority stacking.
A reusable audit framework you can apply to any homepage, landing page, or campaign for your job or business.
Secret Mission: Create a professional "Quick Wins Report" with 5 prioritized recommendations formatted as a one-page client deliverable.

Are there any prerequisites?

Basic familiarity with Figma is helpful (creating frames, adding text, and shapes). A marketing or creative background will help you move faster, but the project walks you through each psychology principle from scratch.

Set Up Your Figma Workspace and Capture the Homepage

Before you can audit a homepage through the lens of psychology, you need a structured workspace to hold your findings.

In this step, you will create a dedicated Figma file with separate pages for your scorecard, annotated screenshots, and redesign work. You will also capture the full Spirit of Hopes homepage so you have a reference to analyze.

In this step, get ready to:

Create a new Figma file with three organized pages.
Capture a full-page screenshot of spiritofhopes.com using Chrome DevTools.
Build a 10-row audit scorecard table to track your findings.

Create your Figma file and pages

Each phase of the audit lives on its own page. This keeps your scorecard, annotated screenshots, and redesign separate and easy to navigate.

Open a new browser tab and type figma.new in the address bar, then press Enter.
A new untitled Figma Design file opens in your browser.
Double-click the file name at the top center of the screen (it says Untitled) and rename it to Psychology Audit - Spirit of Hopes.
Press Enter to confirm the name.

Now create your three pages. Figma starts every file with one page called Page 1.

In the left sidebar, double-click the page name Page 1 to rename it.
Type 1. Audit Scorecard and press Enter.
Click the + icon next to the page name in the left sidebar to add a new page.
Name this second page 2. Current State (Annotated) and press Enter.
Click + again to add one more page.
Name it 3. Redesign and press Enter.

You should now see three pages listed in the left sidebar of your Figma file.

Don't see the page list?

Click the current page name in the left sidebar to expand the pages panel. If the left sidebar is hidden entirely, press Shift+\ to toggle it back on.

help me find the pages panel in Figma

Capture a full-page screenshot of the homepage

You need a complete image of the Spirit of Hopes homepage to annotate during your audit. Chrome DevTools has a built-in command that captures the entire page from top to bottom, no extension needed.

Open a new tab in Google Chrome and navigate to spiritofhopes.com.
Wait for the page to fully load, including all images and sections.
Open Chrome DevTools by pressing Cmd+Option+I (macOS) or F12 (Windows).
Open the Command Menu inside DevTools by pressing Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows).
Type Capture full size screenshot into the command field.
Select the Capture full size screenshot option that appears and press Enter.
Chrome automatically downloads a PNG file of the entire homepage to your Downloads folder.

What does this command do?

The Capture full size screenshot command captures the entire page height, not just what you currently see in the viewport. This gives you a single image of every section on the homepage, which you will annotate during the audit.

Now paste the screenshot into your Figma file.

Switch back to your Figma file in the browser.
Click the 2. Current State (Annotated) page in the left sidebar to navigate to it.
Drag the downloaded screenshot PNG from your Downloads folder onto the Figma canvas.
The image appears on the canvas as a new layer.

Resize for readability

If the image appears very large, select it and use the width field in the right sidebar to set it to around 1440px wide. This keeps it at a comfortable scale for adding annotations later.

Screenshot didn't download?

Make sure the page has fully loaded before running the command. If images are still loading, the screenshot may be incomplete or may fail silently. Try refreshing the page and waiting a few seconds before opening DevTools again.

help me capture a full-page screenshot with Chrome DevTools

Build the audit scorecard table

Your scorecard is the core framework of this project. It tracks how effectively a homepage uses each psychology principle, and it becomes the reusable playbook you take to any future audit.

Click the 1. Audit Scorecard page in the left sidebar.
Select the Frame tool in the toolbar (or press F).
Draw a frame on the canvas.
In the right sidebar, set the frame width to 1200 and the height to 1600.
Double-click the frame name in the left sidebar and rename it to Audit Scorecard.

Now create a table structure inside this frame with 5 columns and 10 rows.

Select the Text tool (or press T) and create a header row at the top of the frame with five column labels:
Type the column headers: Principle, Present? (Y/N), Score (1-5), Evidence/Notes, Opportunity.
Below the header, create 10 rows. In the first column of each row, enter one of these principles:

Reciprocity.
Commitment & Consistency.
Social Proof.
Authority.
Liking.
Scarcity.
Unity.
Cognitive Load.
Loss Framing.
Visual Hierarchy.

Use the Rectangle tool (press R) to draw light grey lines between rows and columns to create the table grid.
Leave the remaining columns empty for now. You will fill them in during the audit steps.

Why these 10 dimensions?

The first 7 rows are Cialdini's Principles of Persuasion. These are the foundational behavioral science triggers that drive human decision-making.

The last 3 (Cognitive Load, Loss Framing, Visual Hierarchy) are UX psychology factors that determine whether visitors can even process the persuasion signals on the page. Together, these 10 dimensions give you a complete diagnostic framework.

Verify your scorecard frame shows all 10 principle names in the first column, with the five column headers across the top.

Text is overflowing the frame?

Make sure your column widths are balanced. The Evidence/Notes and Opportunity columns need the most space since they will hold longer descriptions. Try giving them about 300px each, and keep the Present? and Score columns around 80-100px.

help me lay out a table structure in Figma

Your workspace is ready. You have a structured scorecard waiting to be filled, a full-page screenshot ready to be annotated, and a clean redesign page for later. Next up, you will work through each of Cialdini's 7 principles and evaluate the Spirit of Hopes homepage against them.

Audit Against Cialdini's 7 Principles

Your workspace is ready and the Spirit of Hopes homepage is captured in Figma. Now it's time to shift from setup to analysis.

Cialdini's 7 Principles of Persuasion are the gold standard for evaluating whether a page is optimized for how people actually make decisions. In this step, you'll systematically evaluate the Spirit of Hopes homepage against each principle and document exactly where it succeeds and where it fails.

In this step, get ready to:

Evaluate the Spirit of Hopes homepage against all 7 Cialdini principles.
Score each principle and identify the biggest missed opportunity.
Annotate the homepage screenshot with color-coded overlays.

Evaluate each Cialdini principle against the homepage

Cialdini identified seven psychological triggers that influence how people say "yes." Your job is to check whether the Spirit of Hopes homepage uses each one, and how effectively.

Switch to the spiritofhopes.com tab in your browser (or re-open the site) so you can reference the live page alongside your Figma scorecard.
For each of the 7 principles below, ask yourself three questions: Is this principle present? How effectively is it used? What's the missed opportunity?

Work through the homepage and see what you can spot on your own. If you'd like some guidance, expand the help tab below.

✔️ I'll give it a go!

Scroll through the Spirit of Hopes homepage section by section. Look at each principle in your scorecard and hunt for evidence of it on the page. Pay special attention to the hero area (everything above the fold) and the testimonial section.

Remember: a principle can be "present" but poorly executed. A testimonial section that exists but is buried counts as weak social proof, not strong.

ⓧ Maybe a little help...

Here's what to look for on the Spirit of Hopes homepage for each principle:

Reciprocity: The free senior health guide exists but is buried at the very bottom of the page. The free in-home assessment is present but positioned as a form rather than framed as a gift.
Commitment & Consistency: The form asks for full name, phone, email, best time to call, AND a message all at once. This is a large first ask with no small commitment step leading into it.
Social Proof: Three testimonials exist but are placed mid-page, far from the primary CTA. No star ratings, no specific outcomes, no numbers (e.g., "served 200+ families").
Authority: "Licensed, Bonded, Insured" is the FIRST headline on the page. The "#1 Home Care Provider" claim is present but has no supporting evidence or source. RN support is mentioned but not prominently.
Liking: The empathetic copy is strong ("You give your heart to care for someone you love"). But there are no founder photos or team faces visible above the fold.
Scarcity: Completely absent. No capacity limits, no urgency to schedule today, no mention of limited availability.
Unity: Strong. The language directly addresses family caregivers ("You do everything you can to support your aging parent"). The target audience feels spoken to and understood.

What are Cialdini's 7 Principles?

Robert Cialdini identified six principles of persuasion in his 1984 book "Influence" (Reciprocity, Commitment & Consistency, Social Proof, Authority, Liking, Scarcity). He added a seventh, Unity, in his 2016 book "Pre-Suasion."

Unity is about shared identity. When a brand signals "we are the same kind of people," the audience trusts it more deeply than any credential alone could achieve.

Score each principle and note missed opportunities

Now that you've evaluated the homepage, it's time to commit your findings to the scorecard. Each principle gets a numeric score and a one-sentence note describing its biggest gap.

In Figma, switch to your 1. Audit Scorecard page.
For each of the 7 Cialdini principle rows, fill in the Present? (Y/N) column. Mark it Y if the principle appears anywhere on the page, even if poorly executed.
Fill in the Score (1-5) column for each principle. Use this scale: 1 = absent, 2 = present but ineffective, 3 = moderately applied, 4 = well applied, 5 = expertly applied.
In the Evidence/Notes column, write what you observed (e.g., "3 testimonials mid-page, no star ratings").
In the Opportunity column, write one sentence describing the biggest missed opportunity for that principle.

Suggested scores for reference

Your scores may differ slightly based on your interpretation. As a rough guide: Reciprocity (~2), Commitment & Consistency (~2), Social Proof (~2), Authority (~2), Liking (~3), Scarcity (~1), Unity (~4). The important thing is that your reasoning is clear in the notes.

Why score 1-5 instead of just yes/no?

A principle can technically be "present" on a page but so poorly positioned that it has zero impact. Scoring on a scale forces you to evaluate execution quality, not just existence. This is what separates a surface-level audit from a strategic one.

Double check that all 7 Cialdini rows are filled in. The bottom 3 rows (Cognitive Load, Loss Framing, Visual Hierarchy) should remain empty for now.

Not sure what to write for a principle?

If you're stuck on a particular row, revisit the homepage and ask: "If I removed this principle entirely, would anyone notice?" If the answer is no, that tells you the execution is weak even if technically present.

Help me figure out what to write for a principle I'm stuck on.

Annotate the screenshot with color-coded overlays

A scorecard captures your analysis in text form. Annotations make the same findings visual and portfolio-ready. You'll mark directly on the screenshot where each principle appears or is missing.

In Figma, switch to the 2. Current State (Annotated) page where your full-page screenshot lives.
Select the Rectangle tool from the toolbar (or press R).
Draw a rectangle over an area where a principle is present (e.g., the testimonial section for Social Proof).
Set the rectangle fill to green with reduced opacity (about 20-30%). You can adjust opacity in the Fill section of the right panel.
Add a text label on or near the rectangle with the principle name (e.g., "Social Proof - present but buried").
For areas where a principle is missing (e.g., no scarcity signals anywhere in the hero), draw a red rectangle with reduced opacity over the section where it SHOULD appear.
Add a text label explaining the gap (e.g., "Scarcity - absent, no urgency or capacity limit").

What should the color coding look like?

Green overlay = principle is present in this area. Red overlay = principle is missing from this area. Focus your annotations on the hero section (above the fold) and the testimonial section. These are the two areas you'll redesign in later steps.

Repeat this process for all 7 Cialdini principles. Each should have at least one colored overlay somewhere on the screenshot.
Step back and look at the full annotated screenshot. You should see a mix of green and red overlays with clear text labels identifying each principle.

Keep annotations readable

If overlays start to crowd each other, offset the text labels to the side and use a thin line connecting the label to the highlighted area. This keeps the screenshot legible while still showing your analysis.

Rectangles covering up the screenshot?

Make sure your fill opacity is set low (20-30%). If you accidentally set the rectangle to solid color, select it and lower the opacity percentage in the Fill section of the right design panel. You can also try setting the blend mode to Multiply for a tinted-glass effect.

Help me fix my annotation overlays in Figma.

You now have a complete Cialdini audit with scores, evidence, and visual annotations. Next up, you'll tackle the three cognitive UX factors: Cognitive Load, Loss Framing, and Visual Hierarchy. These will reveal why even a page with good content can fail when the structure works against the reader's brain.

Audit Cognitive Load, Loss Framing, and Visual Hierarchy

Your scorecard now has findings for all 7 of Cialdini's principles. You've identified where the Spirit of Hopes homepage uses persuasion well and where it misses critical opportunities.

Now you'll evaluate three cognitive UX factors that determine whether visitors even process those persuasion signals. A brilliantly placed testimonial means nothing if the page overwhelms the visitor's brain before they reach it.

In this step, get ready to:

Audit cognitive load by counting above-fold elements against the 4-item working memory limit.
Evaluate loss framing by analyzing the current headline's emotional angle and writing an alternative.
Assess visual hierarchy by identifying competing CTAs that dilute visitor focus.

Count and evaluate above-fold elements

The brain holds approximately 4 items in working memory at once. When a homepage packs more than 4 elements above the fold, visitors perceive the page as harder to trust before they even read a word.

What is cognitive load?

Cognitive load refers to the total mental effort required to process information on a page. Processing fluency research shows the brain treats ease-of-processing as a proxy for trustworthiness.

The fewer distinct elements competing for attention, the more trustworthy and professional the page feels. This happens in about 50 milliseconds.

Switch to your 2. Current State (Annotated) page in Figma and look at the hero section of the screenshot.
Count every distinct element visible above the fold. On the Spirit of Hopes homepage, you should find at least 6 competing elements:

"LICENSED, BONDED, INSURED" heading.
The main tagline ("Bringing Trusted Home Care to Howard, Anne Arundel, Baltimore, and Montgomery Families").
"Local RN support is just a call away, 24/7" subtext.
"#1 Home Care Provider in Anne Arundel and Howard County" badge line.
A multi-field form (Full name, Phone, Email, Best time to call back, Message).
The phone number (240)-423-3099.

That's 6+ elements fighting for attention in a space where 4 is the maximum for comfortable processing.

Switch to your 1. Audit Scorecard page.
In the Cognitive Load row, enter Y in the Present? column (the overload is present, not the solution).
Score it 2 out of 5.
In the Evidence/Notes column, write: "6+ elements above the fold. Exceeds 4-item working memory limit."
In the Opportunity column, note which elements to cut or push below the fold (for example: move the form below the fold, consolidate authority signals into a single trust bar).

Deciding what to cut

Ask yourself: "If the visitor could only absorb 4 things in the first second, which 4 would convert them?" Everything else gets pushed down or removed.

Evaluate the headline's loss framing

People feel the pain of a loss approximately twice as strongly as the pleasure of an equivalent gain. This is loss aversion, and it means a headline that names what visitors stand to lose outperforms one that simply describes a benefit.

Look at the current H1 headline on the Spirit of Hopes screenshot: "Bringing Trusted Home Care to Howard, Anne Arundel, Baltimore, and Montgomery Families."
Notice this is a gain-framed, geographic headline. It describes a positive outcome but doesn't name a pain point or potential loss.

What makes this gain-framed?

A gain-framed headline tells visitors what they'll get: "Bringing Trusted Home Care." A loss-framed headline tells visitors what they risk without action: "Don't let your loved one's safety depend on your schedule alone."

Loss-framed headlines tend to perform roughly 2x better because they activate the emotional urgency to act now rather than later.

Write an alternative loss-framed headline. Here's an example: "Don't let your loved one's safety depend on your schedule alone."
Your headline should name the emotional cost of NOT acting. Focus on what the family caregiver risks by continuing without support.
Switch to your 1. Audit Scorecard page.
In the Loss Framing row, enter N in the Present? column.
Score it 2 out of 5.
In Evidence/Notes, write: "Current H1 is gain-framed and geographic. No pain point or loss language."
In Opportunity, paste your alternative loss-framed headline.

Identify competing CTAs and assess visual hierarchy

When a page offers multiple actions with equal visual weight, visitors experience the paradox of choice and often choose none. A single dominant CTA always outperforms multiple competing options.

What is visual hierarchy?

Visual hierarchy is the arrangement of elements so the visitor's eye lands on the most important action first. Size, color, contrast, and whitespace all signal "look here."

When multiple elements share equal visual prominence, there is no hierarchy. The visitor scans without committing to any action.

Return to your screenshot on the 2. Current State (Annotated) page.
Identify every element that acts as a call-to-action on the homepage. You should find at least:

The "Schedule A FREE, no-obligation, in-home care assessment" form submit button.
The phone number (240)-423-3099.
The "Refer A Loved One" link further down the page.

Ask yourself: which single action is the most valuable conversion for this business? That should be the dominant CTA. Everything else should be visually secondary.
Switch to your 1. Audit Scorecard page.
In the Visual Hierarchy row, enter N in the Present? column.
Score it 2 out of 5.
In Evidence/Notes, write: "3+ CTAs with equal visual weight. No single dominant action. Form, phone, and referral all compete."
In Opportunity, write which single CTA should dominate (e.g., "Book Your Free Assessment" button with highest contrast and largest size).

Why one CTA wins over three

Research on choice overload shows that reducing options increases conversion rates. For a home health care agency, the free in-home assessment is the highest-value first action because it gets a representative into the home.

The phone number and referral link can still exist on the page. They just need to be visually smaller, less colorful, and positioned as secondary alternatives.

Return to your 2. Current State (Annotated) page.
Add colored rectangle overlays with text labels for the three new audit dimensions: mark the above-fold clutter, the gain-framed headline, and the competing CTAs using red overlays (indicating missed opportunities).
Save your Figma file.

Your scorecard is now fully complete with all 10 rows scored and annotated. Your annotated screenshot should show red and green overlays for every principle you evaluated.

✔️ Awesome, I've got everything!

Great. Double check you've saved your Figma file with all 10 scorecard rows filled and your annotated screenshot updated.

ⓧ I'd like to double check the full scorecard

Here's what your completed 10-row scorecard should contain:

Reciprocity: Y, Score ~2. Free guide buried at bottom. Opportunity: move free resource offer above the fold.
Commitment & Consistency: Y, Score ~2. Multi-field form is a large first ask. Opportunity: add a micro-commitment step first.
Social Proof: Y, Score ~2. Testimonials mid-page, no numbers. Opportunity: place strongest proof near CTA with specifics.
Authority: Y, Score ~2. "Licensed, Bonded, Insured" as headline misuses authority. Opportunity: move to trust bar, support #1 claim with evidence.
Liking: Y, Score ~3. Empathetic copy but no team faces above fold. Opportunity: add founder/caregiver photo.
Scarcity: N, Score ~1. Completely absent. Opportunity: add capacity limits or scheduling urgency.
Unity: Y, Score ~4. Strong caregiver-identity language. Opportunity: minor, already effective.
Cognitive Load: Y, Score ~2. 6+ above-fold elements. Opportunity: reduce to 4 maximum.
Loss Framing: N, Score ~2. Gain-framed geographic headline. Opportunity: rewrite with loss language.
Visual Hierarchy: N, Score ~2. 3+ CTAs competing. Opportunity: single dominant "Book Assessment" button.

Not sure how to score?

A score of 1 means the principle is completely absent. A score of 5 means it's expertly applied and impossible to improve. Most real-world homepages land between 2 and 3.

If you're stuck on a particular score, help me decide how to score this principle on my audit.

Your audit is complete. You now have a data-driven diagnosis of exactly where this homepage fails to persuade. Next up, you'll use these findings to redesign the hero section from scratch, applying the principles that scored lowest.

Redesign the Hero Section

Your audit scorecard now tells a clear story. The Spirit of Hopes homepage has strong empathy and unity, but the hero section is overloaded, gain-framed, and lacks a single clear action.

Now you get to fix it. In this step, you'll redesign the above-the-fold hero section by applying the exact psychology principles your audit identified as missing.

In this step, get ready to:

Design a hero section that applies loss aversion, cognitive load reduction, and authority signals.
Place a social proof snippet adjacent to the CTA for maximum conversion impact.
Annotate every design decision with the psychology principle behind it.

Design the hero frame with psychology-driven elements

The current Spirit of Hopes hero section has 6+ elements competing for attention above the fold. Research suggests working memory holds about 4 items. Your redesign will strip this back to only the elements that earn their place through a specific psychological function.

Why loss-framed headlines outperform gain-framed ones

The current homepage headline is "Bringing Trusted Home Care to Howard, Anne Arundel, Baltimore, and Montgomery Families." This is a gain-framed, geographic headline. It tells visitors what they get.

Loss-framed headlines tend to perform roughly 2x better because people feel the pain of a loss approximately twice as strongly as the pleasure of an equivalent gain. Leading with the emotional cost of NOT acting creates urgency that a gain-frame cannot.

In Figma, navigate to your 3. Redesign page using the page list in the left panel.
Press F on your keyboard to activate the Frame tool.
Draw a frame on the canvas, then set its dimensions to 1440 width and 900 height in the right-hand Design panel. This is a standard desktop viewport size.
Rename this frame to Hero - Redesign by double-clicking its name in the Layers panel.

Now add exactly 4 elements to this frame. Each one earns its place through a specific psychology principle.

Press T to activate the Text tool. Click inside the frame and type a loss-framed headline. Example: "Every day without the right support puts your loved one at risk." Make this your largest text (try 48-60px, bold).
Add a supporting subheadline below the main headline. This should be one line of gain-framed reassurance. Example: "Compassionate, RN-led home care for Maryland families." Set this at a smaller size (20-24px).
Create a single CTA button. Press R for the Rectangle tool, draw a button shape, and give it a contrasting fill color. Then press T and type "Book Your Free Assessment" on top of the rectangle.
Add a small trust bar at the top or bottom of the frame. Create a narrow horizontal strip with the text "Licensed, Bonded, Insured | RN-led care" at 12-14px. This is your authority signal, repositioned from its current role as the primary headline.

Why only 4 elements?

The current homepage crams 6+ elements above the fold: the "Licensed Bonded Insured" heading, the main tagline, "Local RN support" subtext, the "#1 Home Care Provider" badge, a multi-field form, and a phone number. More than 4 elements above the fold makes the page feel harder to trust, independent of content quality.

Your redesign uses exactly 4: headline, supporting line, one CTA button, and one trust signal. Each element has a single job.

Single CTA vs. multi-field form

The current page asks for full name, phone, email, best time to call, and a message all at once. That is a large first commitment. Your single "Book Your Free Assessment" button reduces the paradox of choice. Visitors make one decision (click or don't) instead of facing five input fields.

Add a social proof snippet near the CTA

Visitors remember the first and last thing on a page. The current homepage buries its three testimonials mid-page, far from any conversion point. Placing social proof adjacent to the CTA means visitors see evidence of trust at the exact moment they decide whether to click.

Press T and add a one-line social proof statement directly below or beside your CTA button. Use either a stat (e.g., "Trusted by 200+ Maryland families") or a short testimonial quote with a real name.
Keep this to a single line at 14-16px. The goal is reinforcement at the decision point, not a full testimonial section.
If using a testimonial quote, include the person's first name and relationship (e.g., "Sarah M., daughter of client"). Specificity makes social proof more believable.

Why place social proof next to the CTA?

This applies Cialdini's Social Proof principle at the highest-leverage moment. When a visitor's cursor hovers over the CTA, seeing that 200+ families already trust this service reduces perceived risk. On the current page, testimonials sit far from any action button, so the social proof does its work too early (or too late) in the decision process.

Annotate each design decision with its psychology principle

Annotations transform your redesign from a pretty mockup into a strategic document. They show anyone viewing this file exactly why each element exists and what behavioral principle it triggers.

Press R to draw a small rectangle near your loss-framed headline. Give it a yellow fill to create a sticky-note style callout.
Press T and type your annotation inside the yellow box. For the headline, write: "Loss-framed headline: triggers loss aversion, ~2x more motivating than gain framing."
Use the Line tool (press L) to draw a connector line from the annotation box to the headline element.
Repeat this annotation process for each of the remaining design elements:

For the 4-element layout: "Max 4 above-fold elements: reduces cognitive load, increases processing fluency and trust."
For the CTA button: "Single CTA: reduces paradox of choice, lowers cognitive load vs. multi-field form."
For the trust bar: "Authority signal repositioned: supports credibility without stealing headline focus."
For the social proof snippet: "Social proof at decision point: evidence of trust shown at the moment of conversion."

Keep annotation style consistent

Use the same yellow fill color, text size (10-12px), and line style for every annotation callout. Consistency makes the file look professional and portfolio-ready. You can select your first annotation box, copy it (Cmd+D on macOS, Ctrl+D on Windows), then just update the text.

Review your completed hero frame. You should see a clean layout with 4 core elements, a social proof snippet, and yellow annotation callouts connected by lines to each element.

Hero section feeling cluttered?

If your frame feels busy, check that your annotations sit outside the main content area (to the side or above). The annotations document your thinking but should not visually compete with the design itself.

Also confirm you have no more than 4 core design elements (headline, subheadline, CTA button, trust bar). The social proof snippet counts as part of the CTA area, not a fifth independent element.

Help me check if my hero redesign follows the cognitive load principle correctly.

Your hero section now demonstrates how behavioral science translates into layout decisions. Next up, you'll apply the same approach to the social proof section, turning generic testimonials into a trust-building machine.

Redesign the Social Proof Section

Your hero section is complete. It applies loss aversion, reduces cognitive load, and drives visitors toward a single clear action. Now it's time to tackle the second highest-impact section on any homepage: social proof.

The current Spirit of Hopes page has three testimonials buried mid-page with no visual hierarchy between them. You'll redesign this section to leverage the serial position effect, specificity, and authority stacking to make those testimonials actually convert visitors into leads.

In this step, get ready to:

Design a testimonial section applying serial position effect and specificity principles.
Add a horizontal trust stack of authority badges below the testimonials.
Annotate every design decision with its psychology principle.

Design the improved testimonial section

Visitors remember the first and last thing on a page. This is the serial position effect. The current Spirit of Hopes testimonials sit mid-page with no visual hierarchy between them, so the strongest proof gets lost in the middle.

Switch to your 3. Redesign page in Figma.
Create a new frame below your hero section by pressing F on your keyboard or selecting the Frame tool from the top toolbar.
Set the frame dimensions to 1440x600px in the right-hand Design panel.
Position this frame directly below the 1440x900px hero frame from the previous step.

Now add a quantity header at the top of this frame to establish scale before the visitor reads individual testimonials.

Press T to select the text tool.
Add a section header at the top of the frame: Trusted by families across 4 Maryland counties.
Make this header large and prominent. It acts as a quantity signal that tells visitors many families already trust this service.

Why lead with a quantity signal?

A quantity signal ("200+ families served" or "families across 4 counties") activates social proof at scale. Before the visitor reads any individual testimonial, they already know this isn't a one-off experience.

This is Cialdini's Social Proof principle at its most efficient: one line does the work of dozens of individual reviews.

Next, design the individual testimonial cards. The serial position effect means the first testimonial gets the most attention, so you'll place the strongest one first.

Create 3 testimonial cards arranged horizontally below the quantity header.
For the first (strongest) testimonial, include all four specificity elements: a full name, the relationship to the client (e.g., "daughter of client"), duration of service (e.g., "18 months"), and a specific outcome (e.g., "Mom can stay in her own home safely").
Design the second and third testimonials with the same structure: full name, relationship, duration, and outcome.
Make the first testimonial visually larger or more prominent than the others. Use a slightly bigger font size, bolder weight, or a subtle background card to draw the eye there first.

Why specificity makes testimonials believable

A quote like "Great service!" is forgettable. A quote with a name, relationship, timeline, and concrete outcome feels real. The more specific details a testimonial includes, the harder it is for a visitor's brain to dismiss it as fabricated.

The current Spirit of Hopes testimonials have quotes but lack these specificity elements. Your redesign fixes that gap.

Add the trust stack

Authority signals placed directly after social proof create a compounding effect. The testimonials say "other people trust them" and the badges say "they're officially qualified." Together, they remove two separate objections in sequence.

Below the testimonial cards, create a horizontal row of 5 trust badges.
Label each badge with one of these authority signals: Licensed, Bonded, Insured, RN-Staffed, Background-Checked.
Use simple shapes (circles or rounded rectangles) with icons or text inside to represent each badge.
Keep the badges visually understated. They should support the testimonials above, not compete with them for attention.

Why place authority AFTER social proof?

This is Cialdini's Authority principle in a supporting role. On the current Spirit of Hopes page, "Licensed, Bonded, Insured" is the primary headline. That wastes the highest-attention real estate on a credential nobody searches for.

Moved here, authority signals reinforce the emotional trust built by testimonials. They answer the logical follow-up question: "But are they actually qualified?"

Annotate with psychology principles

Annotations are what turn a design into a portfolio-ready case study. They show that every element exists for a reason, not just aesthetic preference.

Create yellow sticky-note style text boxes (the same style you used on your hero section) for each annotation.
Draw a line from each annotation to the element it explains. Use the Line tool (shortcut L) in the top toolbar.
Add an annotation to the quantity header labeling it: "Quantity signal: establishes social proof at scale before individual testimonials."
Add an annotation to the first (largest) testimonial labeling it: "Serial position effect: strongest proof placed first where attention peaks."
Add an annotation to the testimonial detail fields (name, relationship, duration, outcome) labeling it: "Specificity: concrete details make claims harder to dismiss as fabricated."
Add an annotation to the trust stack row labeling it: "Authority stacking: credentials in supporting role reinforce emotional trust from testimonials."

Keep annotation language client-friendly

If you plan to use this case study in a portfolio or client presentation, write your annotations in plain language. "People remember the first thing they see" is more persuasive to a stakeholder than "serial position effect" alone. Include both: the principle name and a one-line plain-English explanation.

Your social proof section is now fully designed and annotated. Step back and review the full "3. Redesign" page. You should see both frames: the 1440x900px hero at the top and the 1440x600px social proof section below it, each with yellow annotation callouts connected to their elements.

Annotations overlapping or hard to read?

If your annotations overlap with the design, move them further outside the frame and use longer connector lines. You can also reduce the font size of annotation text to 12px while keeping the design text at its normal size.

If the yellow boxes blend into a light background, add a thin border or drop shadow to make them stand out.

Help me organize my Figma annotations so they don't overlap with the design elements

Secret mission

Create a Professional "Quick Wins Report"

Your audit findings are powerful, but they're scattered across a scorecard and annotations. Turn them into a polished one-page deliverable that a client or stakeholder could act on immediately. This is the format agencies use to deliver audit results.

Clean Up Your Resources

This project runs entirely on Figma's free plan and Google Chrome, so there are no ongoing costs. Decide whether to keep your Figma file for your portfolio or delete it.

Resources you created:

Figma file: "Psychology Audit - Spirit of Hopes" (contains your audit scorecard, annotated screenshots, redesigns, and Quick Wins Report).

Keep everything running

No action needed. Choose this if you want to keep your audit file as a portfolio piece or reference for future audits.

Your Figma file stays in your Drafts (or team project) indefinitely on the free plan.
Consider renaming the file with a date stamp so you can find it later (e.g., "Psychology Audit - Spirit of Hopes - May 2026").

Pause - I'll come back to this later

There's nothing to pause for this project. Figma files on the free plan have no running costs or active processes.

Your file remains accessible in Figma whenever you return.
No storage limits apply to your personal Drafts on the free plan.

Delete - I don't want to use this again

Remove your Figma file entirely if you no longer need it.

Open Figma in your browser and navigate to your file browser (the home screen where all your files are listed).
Right-click on Psychology Audit - Spirit of Hopes.
Select Delete from the context menu.
The file moves to your Trash in Figma. To permanently remove it, click Drafts in the left sidebar, then Deleted, right-click the file, and select Delete forever.

Nice Work!

You've just completed a full psychology audit and strategic redesign grounded in behavioral science. You took a real homepage, evaluated it against proven persuasion principles, and redesigned the highest-impact sections with every decision backed by research.

You've learned how to:

Build a 10-point Psychology Audit Scorecard evaluating a real homepage against Cialdini's 7 Principles of Persuasion and cognitive UX factors like loss aversion and cognitive load.
Redesign a hero section and social proof section in Figma with psychology-driven annotations explaining the principle behind each design decision.
Apply a reusable audit framework you can use on any homepage, landing page, or campaign for your marketing job or your own business.
Create a professional Quick Wins Report deliverable with prioritized recommendations ready to present to clients or stakeholders.

You now have a systematic way to look at any page and immediately identify the psychology gaps. Instead of saying "I think this page could be better," you can say "Here's exactly why this page underperforms, backed by behavioral science, and here's the fix."

Ready to quiz yourself?