Caso de estudio 02 · SPORT · Product Design · Investigación
Producto creía que las tarjetas eran demasiado altas. Yo empecé por medirlas.
La pregunta parecía visual: ¿podían las tarjetas móviles mostrar más contenido en el primer scroll? La respuesta útil necesitaba evidencia, y una visión clara de lo que podíamos perder al comprimirlas.
- Rol
- Product Designer
- Pregunta
- ¿Pueden las tarjetas móviles ser más densas sin perder valor editorial?
- Métodos
- Benchmark · Figma · Google Sheets · muestreo medido
- Evidencia
- 279 tarjetas de producción + 51 tarjetas en una alternativa 16:9
La pregunta de producto
«¿Estas tarjetas son simplemente demasiado altas?»
En SPORT había una cultura de producto muy fuerte alrededor del primer scroll y de cuánto contenido editorial ve un usuario en móvil. La preocupación era que las tarjetas de noticia de entonces consumían demasiado espacio vertical.
En lugar de partir de un rediseño, convertí la preocupación en criterios medibles: altura del texto, altura de la imagen y si el recorte dañaba el significado informativo de la fotografía.
¿El texto cruza el umbral de altura definido?
¿El texto se extiende más allá de la altura de la imagen?
¿El recorte conserva el significado informativo de la fotografía?
| Muestra | Imagen | Observación | Resultado |
|---|---|---|---|
| Tipo A | 1:1 | Texto por encima del umbral | 86% |
| Tipo A | 1:1 | Texto más allá de la altura de la imagen | 40.86% |
| Tipo A | 1:1 | Encuadre significativo conservado | 81.88% |
| Tipo B | 16:9 | Encuadre significativo conservado | 100% |
El estudio original en Figma/Sheets sigue siendo la evidencia de origen; el portfolio reconstruye los datos útiles como contenido front-end legible.
Diseño de la investigación
Definir el problema antes de cambiar el componente.
Hice un benchmark de otras marcas editoriales y productos digitales, y después medí la tarjeta de producción contra criterios explícitos. La muestra de tipo A usó la proporción de imagen 1:1 existente, con una altura mínima de 140px, en tres portadas de SPORT.
Hallazgo
La preocupación era real, pero «más pequeño» no era automáticamente «mejor».
El informe documentó que el 86% de las tarjetas analizadas superaba el umbral de altura de texto definido. En el 40.86% de la muestra total, el texto se extendía más allá de la altura de la imagen. Al mismo tiempo, se consideró que el 81.88% de las imágenes conservaba un encuadre aceptable o significativo.
Alternativa
Probar una imagen 16:9 sin dar por hecho el compromiso.
Creé una alternativa de tipo B con una imagen 16:9 y sin altura mínima de imagen, y después probé 51 tarjetas con criterios comparables.
En esta segunda muestra, el 100% de las imágenes mantuvo un encuadre informativo aceptable, aunque el texto cruzaba el punto medio de la tarjeta en todos los casos, con un exceso medio del 29.26%.
Compromiso
La tarjeta más compacta mejoró el encuadre en la prueba, sin eliminar la pregunta sobre la densidad de texto.
Importante: las muestras y los layouts eran distintos. El gráfico comunica el criterio documentado dentro de cada prueba; no es una afirmación de conversión ni de causalidad.
Qué cambió esto
Los criterios se incorporaron directamente al componente de tarjeta de 42DS.
El valor del ejercicio no fue un rediseño decorativo. Los criterios de altura, densidad de texto y encuadre que salieron de ahí se incorporaron a la tarjeta de noticia de 42DS —uno de los patrones centrales del sistema— e hicieron que las tarjetas fueran más consistentes en todo el grupo.
También cambió la forma de tomar la decisión: Producto pasó a tener un lenguaje común para hablar de altura de tarjeta, densidad de texto y significado de la imagen, con la evidencia asociada a cada compromiso.
El objetivo nunca fue hacer las tarjetas más pequeñas a cualquier precio. Era entender qué ganamos, y qué nos arriesgamos a perder, cuando comprimimos contenido editorial.
Qué me llevo
Medir la creencia antes de pulir la respuesta.
Este proyecto reforzó un hábito que hoy define cómo enfoco el Product Design: traducir preocupaciones subjetivas en criterios observables, hacer visibles los compromisos y dejar que la evidencia mejore la calidad de la conversación de diseño.