Case study 02 · SPORT · Prensa Ibérica · 2023—2026
Product thought the cards were too tall. I started by measuring them.
The question looked visual: could mobile cards show more content in the first scroll? The useful answer needed evidence — and a clear view of what we might lose by compressing them.
In 30 seconds
- The tension
- Product believed the mobile news cards were too tall, and there was no shared way to test it.
- My call
- Measure before redesigning: 279 production cards against three criteria, then 51 cards in a 16:9 alternative.
- The evidence
- 86% of the Type A cards crossed the text-height threshold; 81.88% kept meaningful framing, and 100% did in the 16:9 test.
- What changed
- The 16:9 card was adopted, and the height, text-density and framing criteria fed the news card in 42DS.
- Role
- Product Designer — benchmark, criteria and measurement
- Question
- Can mobile cards become denser without losing editorial value?
- Methods
- Benchmark · Figma · Google Sheets · measured sampling
- Evidence
- 279 production cards + 51 cards in a 16:9 alternative
The product question
“Are these cards simply too tall?”
At SPORT there was a strong product culture around the first scroll and how much editorial content a user sees on mobile. The concern was that the current news cards were consuming too much vertical space.
Instead of starting from a redesign, I turned the concern into measurable criteria: text height, image height and whether cropping damaged the informational meaning of the photograph.
Does text cross the defined height threshold?
Does text extend beyond the image height?
Does cropping preserve the informational meaning of the photograph?
| Sample | Image | Observation | Result |
|---|---|---|---|
| Type A | 1:1 | Text above threshold | 86% |
| Type A | 1:1 | Text beyond image height | 40.86% |
| Type A | 1:1 | Meaningful framing retained | 81.88% |
| Type B | 16:9 | Meaningful framing retained | 100% |
The original Figma/Sheets study remains the source evidence; the portfolio reconstructs the useful data as readable front-end content.
What I was aiming at
The target was not a shorter card. It was a better argument.
The two get confused easily, so it is worth separating them before any number appears.
- What I set out to change
- How the decision got made. Product held a firm view about card height and there was no shared way to test it, so what I was after was a vocabulary — text height, image height, whether the crop destroys the meaning of the photograph — that anyone could argue with using evidence instead of taste.
- What I deliberately did not do
- Start from a redesign. Compression was the proposed answer, not the problem. Opening with a shorter card would have settled by opinion the exact question the measurement existed to open.
Who was in it
I did the measuring. I did not do it in a vacuum.
The benchmark, the criteria and the measurement were mine — that part is in the fact sheet and I will stand behind it. What surrounded them was not. A study like this is only worth running if its output has somewhere to land, and these are the people it landed with.
- Juan Francisco MolineraProduct Design LeadLinkedIn ↗
- Susana CabadoDesign System EngineerLinkedIn ↗
- Tania DomínguezDesign, and Figma support through the studyLinkedIn ↗
Research setup
Define the problem before changing the component.
I benchmarked other editorial brands and digital products, then measured the production card against explicit criteria. The Type A sample used the existing 1:1 image proportion with a 140px minimum height across three SPORT front pages.
Finding
The concern was real — but “smaller” was not automatically “better”.
The report documented that 86% of the analysed cards crossed the defined text-height threshold. In 40.86% of the total sample, text extended beyond the image height. At the same time, 81.88% of images were considered to retain an acceptable or meaningful framing.
in Type A
279 cards analysed · one dot per card
Alternative
Test a 16:9 image without assuming the trade-off.
I created a Type B alternative using a 16:9 image and no minimum image height, then tested 51 cards using comparable criteria.
In this second sample, 100% of images were judged to keep an acceptable informational framing, although the text crossed the midpoint of the card in every case, with an average excess of 29.26%.
Trade-off
The tighter card improved framing in the test — without removing the text-density question.
Important: the samples and layouts were different — 279 production cards against 51 in the alternative. The chart communicates the documented criterion inside each test; it is not a conversion or causal claim.
What this changed
The alternative did not stay an alternative.
The 16:9 card was adopted. And the criteria that came out of the study — height, text density, framing — fed into the news card in 42DS, one of the core patterns of the system, which is what made the change consistent across the group instead of local to one front page.
It also changed how the decision got made, which was the actual target: Product gained a shared way to discuss card height, text density and image meaning, with the evidence attached to each trade-off.
The goal was never to make cards smaller at any cost. It was to understand what we gain — and what we risk losing — when we compress editorial content.
What I’d carry forward
Measure the assumption before polishing the answer.
This project reinforced a habit that now shapes how I approach Product Design: translate subjective concerns into observable criteria, make the trade-offs visible and let the evidence improve the quality of the design conversation.