heyama.ai · customer quote section · design lab · 10 Nov 2026

Eight ways to show a customer quote, each in two versions.

A design study for a new section on www.heyama.ai. Nothing here is on the live site. Click a picture to open that variant in the browser. Vote with Like or Dislike under each one and leave a comment if you want. Votes and comments are anonymous.

8concepts: three single-quote layouts, two streams, three with motion
A / Beach concept as first built (A) and after a design-rules pass (B)
0on the live site: this is a preview for the team

People, firms and logos are stand-ins · wording from pilot customer feedback · serif: Newsreader

How to read this page

Every concept is shown as built and after a rules pass

Version B applies one set of web design rules to version A. It is a second opinion, not a verdict: the rules remove most automatic motion.

A, as built

A
  • Key phrase of the quote in green italics
  • Cards lift and photos zoom on hover
  • Rows drift, panels advance on a timer, parts fade in on scroll
  • Section height follows the content

B, after the rules pass

B
  • Key phrase in italics, same ink as the quote
  • No hover effect on cards that are not links
  • Nothing moves by itself: still rows, click tabs, words that light up on scroll
  • Every section is exactly one screen tall
  • Two layouts add one number beside the quote
One quote

A single quote carries a section in three layouts

The large portrait in the lime ring and the serif quote are the same in all three. They differ in where the portrait sits and how much frame the quote gets.

Split

Split, version AA · as builtPortrait left, quote and signature right.
Split, version BB · rules passAdds one number beside the person.

Centred

Centred, version AA · as builtPortrait on top, everything on the centre line.
Centred, version BB · rules passA before-and-after quote, sized to one screen.

Card

Card, version AA · as builtPortrait pane and quote pane in one box.
Card, version BB · rules passOne fill and a hairline, plus one number.
Three to four quotes

Several quotes fit side by side, moving or still

Version A drifts sideways on a loop and pauses on hover. Version B shows whole cards on the grid and does not move.

Stream, cards

Stream, cards, version AA · as builtFour across, the row drifts, tones change card by card.
Stream, cards, version BB · rules passFour whole cards, one fill, still.

Stream, portrait first

Stream, portrait first, version AA · as builtThree across, the centred layout repeated, the row drifts.
Stream, portrait first, version BB · rules passThree whole columns, still.
Motion

Motion can pick the quote for the reader, or follow the reader

Open these in a browser: a still picture shows one frame only. In version A the page moves by itself. In version B it moves when the reader does.

Spotlight

Spotlight, version AA · as builtThe row drifts, the middle card turns petrol, drag to steer.
Spotlight, version BB · rules passThe row stands. The lit card follows the pointer.

Relay

Relay, version AA · as builtFour panels open in turn. The portrait ring is the 7 s timer.
Relay, version BB · rules passClick tabs, no timer. A bar slides to the person.

Draw-in

Draw-in, version AA · as builtRing, portrait and words build once on scroll.
Draw-in, version BB · rules passNothing hides. Words turn from half ink to ink on scroll.
In the page

The centred layout fits between the closing cards and the founder letter

The full homepage with the centred quote (version A) in place. Menu and footer links are switched off in this preview.

The centred quote inside the homepageA · as builtOpens the homepage at the quote.
Votes

Every vote is anonymous and counts once per browser

The list is sorted by likes minus dislikes. A second click on your own vote takes it back.

VariantLikesDislikesComments
Before go-live

Four things are open before one of these goes live

  • People, firms and logos are stand-ins. The wording comes from pilot customer feedback. A named quote needs that customer's consent, portrait and logo.
  • The serif (Newsreader) is not in the site's design system yet and loads from Google Fonts here.
  • The two numbers in version B (80–90% accepted profiles, 20 min per Talent Market Map) need a check against the current claims.
  • There is no German version yet.