Testimonial Section Design: How to Showcase Customer Reviews That Convert

In this guide, we walk through the testimonial card layout our team uses in web design projects. We also cover the rules for showing Google reviews on your site, the limits of star rating markup and why fabricated reviews are a serious risk. Finally, you get a checklist to use before launch.

In short, this is the one place on your site where your customer writes the most persuasive copy, not you. That is why we treat it as a step in the sales process rather than decoration.

Why is a testimonial card different from a plain review list?

A plain review list stacks every comment on top of each other. A testimonial card, by contrast, puts one person's experience in the spotlight. It answers a specific question the visitor already has in mind.

For example, a visitor on an accounting firm's site may wonder, "Will they actually call me back on time?" A card you chose carefully answers that question in another customer's words. So the card is not random praise; it is a targeted answer.

We explained the psychology and types of social proof in our guide to social proof in marketing. Here, we focus only on design and implementation.

What fields should a testimonial card include?

A strong card combines the details that make a visitor think, "This person is real." Every missing field chips away at trust. Therefore, we recommend building your card template with these parts from day one:

• Full name: the full name with permission, or first name plus last initial.
• Job title and company: on B2B sites, the decision maker's role matters a lot.
• Photo: the person's own photo, never a stock image.
• Short quote: two or three sentences with one concrete result.
• Context: which service they used and roughly when you worked together.
• Source link: a link to the platform where the review was posted, when possible.

That said, you do not need every field on every card. However, without a name and a quote, the card turns into an anonymous slogan in the visitor's eyes.

How do name, title and photo affect credibility?

Visitors check who said it before they read what was said. A full name, a real title and a natural photo signal that the quote is not marketing copy. Moreover, readers accept a quote more easily when they see someone like themselves.

A stock photo has the opposite effect. A face anyone can find through reverse image search in seconds undermines the whole section. So if you have no photo, use a simple avatar with initials instead.

Also, be careful with personal data. Get written permission before you publish a customer's name and photo, and keep a record of it. This note is general information, not legal advice; please consult a lawyer about your own situation.

To keep things consistent, ask customers for a portrait they already like. For instance, the photo they use on professional networks is usually good enough. Then crop all photos to the same ratio so the cards look like one family.

How do you get short, specific quotes from customers?

The weakest quotes are generic lines like "Great team, very happy." A strong quote describes the before and after. For example, "We used to take orders by phone; now they come through the form and we no longer miss requests" shows the reader a real change.

When you ask a customer for a quote, do not send a blank page. Instead, ask short guiding questions:

1. What problem did you have before working with us?
2. What made you request a quote?
3. Which part of the process reassured you most?
4. What has changed in your business since then?

You can shorten the answers afterwards. However, never change the meaning, and get the customer to approve the final version. That way, the copy stays tight and you never put words in anyone's mouth.

Keep the quote to two to four sentences inside the card. If you have a longer story, show a summary and move the full version to a separate case page. You can also add a short headline above the quote, such as "Requests no longer get lost," so skimmers still get the message.

Where should the testimonial section go on the page?

Placement matters as much as content. The rule is simple: the testimonial section belongs right next to the moment of doubt. Most visitors never see a review block squeezed in at the very bottom of the page.

We covered the overall homepage flow in our homepage design guide. The testimonial block fits into that flow with the same logic.

Cards, one big quote or a grid: which layout works best?

There are three basic layouts, and each does a different job. A single large quote puts your strongest line on stage, either below the hero or next to a service. Meanwhile, a row of three cards shows different customer types side by side and creates a sense of variety.

A grid or wall layout works on a separate testimonials page. It presents many reviews in a scannable way. On a homepage, however, a grid often makes the page longer and dilutes the message.

In practice, we usually recommend this setup: three cards on the homepage, one service specific quote on each service page and every testimonial on a dedicated page. As a result, each page shows the proof that matches its own question.

Whichever layout you choose, define a single card component in your design system. The same component can then appear as a row, a single quote or a grid, which keeps maintenance light.

Should you use a testimonial slider or carousel?

An auto rotating testimonial slider is a popular choice, yet in most cases it is a weak one. The card slides away while the visitor is still reading. On mobile, swiping clashes with page scrolling, and the second or third card may never be seen.

The accessibility rule is also clear. The W3C Pause, Stop, Hide success criterion requires a way to pause content that moves automatically and lasts more than five seconds. So if you use an auto rotating slider, a visible pause button is a must.

If you still need a slider, follow the principles in the W3C carousels tutorial. Start with autoplay off. Make the previous and next buttons keyboard accessible, and tell users which slide they are on.

When are video testimonials more effective?

A video testimonial carries tone of voice, facial expression and spontaneity that a written quote cannot. This makes it especially effective for high budget or long decision services, such as enterprise software or construction projects.

However, video is a heavy element. To protect page speed, show the video behind a cover image that loads the player only on click, and never autoplay it. Also, add captions to every video, because people watching on mute and users with hearing loss rely on them.

You do not need a studio. A quiet room, good light and a steady phone are often enough. Still, do not hand the customer a script; ask your guiding questions and record their natural answers.

Placing a two sentence written summary next to the video is a good habit too. That way, visitors who never press play still get the message.

What are the rules for showing Google reviews on your site?

Many businesses want to display their Google Business Profile reviews on their site. You can do this, but a few points need care. First, do not copy a review and present it as your own text. Name the source and, when possible, link to the original review.

Also, picking only five star reviews and labeling them "all our reviews" is misleading. If you show a selection, say so clearly with wording such as "a selection from our customers," and add a link to the full list.

In practice, you have two options: add reviews manually as cards or embed a review widget. Manual cards give you full design control. An embedded widget stays current, but it can slow the page down.

Handling fake reviews on your profile is a separate topic. We covered it in our guide on reporting fake Google reviews.

Can you use star rating markup for your own reviews?

Short answer: for reviews about your own business, generally no. The Google Search Central review snippet guidelines say that LocalBusiness and Organization pages are not eligible for star results when the entity being reviewed controls the reviews about itself. The guidelines add that embedded Google or Facebook review widgets fall under this rule as well.

That document also says not to aggregate reviews or ratings from other websites. In other words, pulling your Google reviews onto your site and adding star markup on top goes against the guidelines.

This does not mean you should hide reviews. You show them for visitors; you simply skip markup aimed at star results. We explained when AggregateRating markup is appropriate in our AggregateRating guide.

What is the risk of fake testimonials?

A fabricated testimonial may seem to fill an empty section in the short term. In the long run, though, it carries serious risk. Many countries prohibit misleading commercial practices, and fake customer testimonials can fall under those rules. This is general information, not legal advice; consult a lawyer about your own case.

Beyond legal exposure, there is reputational risk. Once a visitor notices that a photo is a stock image, or that the same quote appears on another site, winning back that trust is hard.

Likewise, rewriting a real review to make it sound better also causes problems. Never add a number or result the customer did not mention. Our team follows one clear rule: if there are no real reviews, we leave the section out and use verifiable trust elements instead.

What should you do if you have no testimonials yet?

A new business naturally has an empty testimonial section, and that is nothing to be embarrassed about. During this phase, the honest route is to remove the section and use other trust elements. For example, a step by step process overview, a short team introduction or clear refund terms can fill the gap.

Meanwhile, start collecting testimonials right away. When you deliver your first projects, send a short message with the guiding questions above. Once you have three or four real cards, bring the section back.

Timing matters too. Ask when the customer first feels the result, for example a few days after delivery.

It also helps to review all your trust elements together; our article on website trust signals lists them in one place.

How does a testimonial section work with a client logo strip?

Client logos and testimonial cards complement each other rather than compete. A logo strip quickly answers "Who have they worked with?" A testimonial card goes deeper and answers "What was the experience like?"

In practice, a good order is the logo strip right below the hero and the testimonial section further down, after the service description. The visitor first sees familiar brands, then reads one of those brands describe the experience.

Our sibling article on the client logo section explains when a logo strip builds trust and when it falls flat. When the same logo appears in the strip and on a card, the two elements reinforce each other.

On the other hand, stacking too many trust elements back to back makes the page feel like a showroom. Leave content sections in between so each piece of proof is read in context.

What should your testimonial permission text say?

Written permission is the least discussed yet most important part of the section. A short permission text should state clearly which details you will publish and where. For example, mention that the name, title, company, photo and quote will appear on your website and marketing materials.

Also state that the customer can withdraw permission at any time. This line shows them they stay in control, so they agree more easily. Moreover, it makes the process clear if you ever need to remove a testimonial.

In practice, an email reply is a sufficient record for many small businesses. However, personal data obligations vary by country. This section is not legal advice; have a lawyer review your wording.

How do testimonial cards differ on B2B and B2C sites?

On B2B sites, the visitor is usually part of a buying team. That is why title and company name can matter even more than the photo. A title like "procurement manager" shows the reader that someone in their role made this decision.

On B2C sites, emotion and convenience come first. For example, a furniture workshop's customer talks about delivery day, and a job title adds little. So simplify the card template for your audience.

In both cases, the quote needs a concrete outcome. B2B cards highlight process and business results, while B2C cards highlight experience and the moment of delight.

Example scenario: a cleaning company serves both offices and households. The business page shows an office manager's comment on regular service, and the home page shows a homeowner's short note about a move out clean.

How do you build visual hierarchy in a testimonial card?

When you design the card, you decide the order in which the eye moves. In most cases, the best order is the quote headline first, then the quote, then the person's details. The photo sits as a small circle next to the name.

You can use a quotation mark icon as decoration, but it should not overpower the quote. Similarly, give the section a background that differs slightly from the rest of the page, so it reads as one block.

Also, do not pad short quotes to make all cards the same height. Instead, use a flexible layout that grows with the content. Finally, set the quote slightly larger than body text and the details slightly smaller, and the hierarchy forms on its own.

Who should build this section on your site?

Collecting reviews is the business owner's job. Placing them in the right spot, in the right layout and within the rules, however, is a design job. The card template, an accessible slider, video covers and correct use of structured data all need to be planned together.

Our team builds the testimonial section into the page structure from the start of every web design project. If you want us to build this section from scratch or refresh your current one, you can request a quote through our web design service page.

We also connect the section to your content management panel. As a result, you can add a new review yourself without waiting for a developer.

How should testimonial cards look on mobile?

A large share of visitors see your site on a phone, so design the cards for mobile first. Three cards that sit side by side on desktop should stack vertically on mobile. A horizontally scrolling row is easy to miss on mobile, and visitors often read only the first card.

Keep the photo small, set the quote in a readable font size and leave enough space between cards. For example, three short stacked cards can be read in a few scrolls.

Also, avoid turning the whole card into one tap target. If there is a source link, design it as a separate target that is large enough. Lastly, test on a real phone, because browser previews miss scrolling hiccups.

What makes a testimonial section accessible?

Accessibility ensures everyone can read your testimonials. Give each photo meaningful alt text that includes the person's name. Still, skip padding like "smiling woman."

Do not show star ratings with icons alone; add text such as "5 out of 5" for screen readers. Furthermore, thin light gray text lowers contrast and makes quotes hard to read.

Give the section its own heading, too. Then keyboard and screen reader users can move between quotes without getting lost.

We covered the general principles in our web accessibility and WCAG guide. For testimonials, the critical points are contrast, alt text and control over moving content.

How do you match testimonials to services and industries?

For businesses with several services, one pool of reviews is not enough. For instance, a team that builds both corporate sites and online stores weakens its message if the online store page shows a corporate site client's quote.

Therefore, store each testimonial with tags such as service, industry and customer type. Then show only the relevant ones on each page. If you set up this tagging in your CMS early, adding new reviews becomes easier as well.

Example scenario: an architecture office. The residential project page shows a homeowner's view, while the office project page shows a company manager's view. This way, every visitor reads about someone like them.

How often should you refresh testimonials?

Three cards that have not changed for years can suggest the business no longer wins new customers. So manage the section as a living area. When a strong new review arrives, swap out the weakest card.

Keep context details current as well. If a customer's title or company has changed and you are still in touch, ask them. If a customer asks you to remove their testimonial, act on it quickly.

Decide early whether to show dates. Dates prove freshness, yet they also make old cards look old. Highlighting the service instead of the year keeps a card valid longer. In short, set a review schedule; checking the section every quarter is a good rhythm for most businesses.

How do you measure whether the section works?

It is healthier to base design choices on observation than on guesses. For example, when you move testimonials next to the form, you can track whether form submissions change. All you need is to set form submission as a conversion in your analytics tool.

Scroll depth also shows whether visitors reach the testimonials. If the section sits at a depth most visitors never reach, rethink the placement.

Change one thing at a time. If you change placement, card design and quotes in the same week, you cannot tell which change made the difference. On low traffic sites, qualitative feedback often tells you more; simply ask customers what convinced them to choose you.

What is the checklist for a testimonial section?

Before you go live, we recommend checking the section against this list:

• Every card has a real name and quote, and no photo is a stock image.
• You hold written permission for every testimonial.
• Quotes are short, specific and approved by the customer.
• The section sits near a decision point, such as a service, pricing or form.
• Any slider starts with autoplay off or shows a visible pause button.
• Videos load on click and include captions.
• Google reviews show their source and a link.
• You do not use star markup for reviews about your own business.
• Photos have alt text and ratings have readable text.
• Each service page shows a testimonial for that service.

Working through this list takes time. If you prefer, let us build the testimonial section for you; describe your project on our web design service page and request a quote.