Case study 02 · SPORT · Product Design · Research
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.
- Role
- Product Designer
- 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.
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.
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. The chart communicates the documented criterion inside each test; it is not a conversion or causal claim.
What this changed
The criteria fed straight into the card component in 42DS.
The value of the exercise was not a decorative redesign. The height, text-density and framing criteria that came out of it fed into the news card in 42DS — one of the core patterns of the system — and made the cards across the group more consistent.
It also changed how the decision got made: 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.