Problema
Comprar un juego de mesa sin saber cuál elegir
Las tiendas generales mezclan juegos con juguetes y no filtran por lo que importa al jugar: cuántos son, cuánto dura, para qué edad y qué tan difícil es.
← Proyectos / Caso de estudio · E-commerce
Una tienda que te ayuda a elegir tu próximo juego de mesa.
- Rol
- Diseño UX/UI De idea a prototipo
- Duración
- 5 días 1 al 5 de octubre de 2026
- Contexto
- Certificado de Diseño UX de Google
- Herramientas
- Figma
Pantallas del sitio · Desliza para explorar
Solución
Una tienda que guía la elección y el pago
Filtros propios de juegos de mesa, un quiz de cinco preguntas, fichas que explican cómo se juega y compra como invitado con PSE, Nequi o Efecty.
Resultado
Cinco personas completaron las cinco tareas
Prueba moderada con el prototipo de alta fidelidad. Nadie necesitó ayuda, y lo que pidieron mejorar llevó a desarrollar más el quiz.
01 · Investigación
El problema no es la falta de tiendas, es la falta de guía
Partí de fuentes secundarias (informes de mercado, encuestas a jugadores y estudios de usabilidad de e-commerce), un análisis de tres referentes y charlas informales con jugadores y compradores.
71%
de los aficionados descubre juegos por recomendación, no por publicidad.
PrintNinja · 545 jugadores · 2018
42%
de las grandes tiendas en línea no tiene filtros propios de su categoría.
Baymard Institute
70%
de los carritos se abandona; 4 de cada 10 abandonos son por costos extra.
Baymard Institute
63,9%
de los pagos en línea en Colombia se hace con PSE.
CCCE · 2T 2025
Descubrimiento
No se puede filtrar por jugadores, duración, edad o complejidad, así que no se sabe si un juego sirve para el grupo.
Confianza para decidir
La ficha no explica cómo se juega ni muestra reseñas útiles, y la persona sale a buscar fuera del sitio.
Costo total oculto
El envío aparece al final, sobre un precio de importación que ya es alto.
Checkout ajeno a Colombia
Obliga a crear cuenta y no ofrece PSE, Nequi ni efectivo.
Las encuestas a jugadores son de EE. UU. y Europa; las charlas informales, sin guion estructurado, sirvieron para contrastarlas con el contexto colombiano.
02 · Personas
Tres personas, tres formas de comprar
Construidas a partir de las fuentes secundarias y las charlas informales.
Andrés Ruiz
El aficionado · 31 años · Bogotá
«Antes de comprar veo una reseña en video y reviso cuánto dura una partida. Si la tienda no me lo dice, me voy.»
Meta
Encontrar novedades y expansiones por mecánica y complejidad, saber si vienen en español y reservar preventas.
Frustración
Fichas sin duración, idioma ni complejidad; no saber si hay stock.
Laura Mejía
Compra para regalar · 27 años · Medellín
«Quiero regalarle algo a mi hermano que juega mucho, pero no sé cuál tiene ni cuál es bueno.»
Meta
Elegir rápido un juego seguro para 4 a 6 personas, saber cuándo llega y pagar sin crear cuenta.
Frustración
Demasiadas opciones sin guía, jerga que no entiende y un envío que aparece al final.
Catalina Torres
Mamá de dos · 41 años · Cali
«Busco algo que mis hijos de 8 y 11 años entiendan en diez minutos y que podamos jugar todos.»
Meta
Filtrar por edad y duración corta, ver que el juego es fácil de aprender y recibirlo antes de una fecha.
Frustración
Teme comprar algo que se quede en el estante y no confía en tiendas que no conoce.
03 · Referentes
Tres referentes y un espacio libre
Ninguno combina descubrimiento pensado para juegos de mesa con pago local. Ese es el lugar de Boardos.
Amazon
Marketplace general
Hace bien
Búsqueda con selector de categoría, caja de compra clara, «comprados juntos» y reseñas.
Le falta
Mezcla juegos con juguetes y no filtra por jugadores ni duración.
Boardos toma
Buscador con autocompletado, caja de compra y venta cruzada.
Steam
Descubrimiento en videojuegos
Hace bien
Etiquetas por mecánica, recomendaciones y cuestionarios para descubrir.
Le falta
No vende juegos físicos.
Boardos toma
Las etiquetas y el quiz «Encuentra tu juego».
Buscalibre
Tienda en línea en Colombia
Hace bien
Catálogo por categorías, preventas, precios en pesos y pago local.
Le falta
Una ficha pensada para libros, sin atributos de juego.
Boardos toma
La navegación por categorías, las preventas y el pago local.
04 · Arquitectura de información
Seis ramas y diez pantallas
El mapa del sitio separa catálogo, búsqueda, descubrimiento, compra, cuenta y ayuda. Las cajas oscuras son las diez pantallas que tienen wireframe.
05 · De baja a alta fidelidad
Del wireframe gris a la tienda
Primero diez wireframes a 1440 px y un prototipo de baja fidelidad con el recorrido de compra. Después, el sistema de diseño y las mismas diez pantallas a 2560 px.
Baja fidelidad · Home
Estructura y jerarquía en gris, con encabezado, pie y tarjeta de producto como componentes.
Alta fidelidad · Home
La misma estructura con marca, portadas ilustradas y estados interactivos.
1 oct
Arquitectura y wireframes
Mapa del sitio y diez wireframes en escala de grises.
2 oct
Prototipo de baja fidelidad
Recorrido de compra completo, con autocompletado y aviso de carrito.
2 – 5 oct
Sistema de diseño
Tokens de color con contraste AA, dos tipografías y componentes.
5 oct
Prototipo de alta fidelidad
Diez pantallas a 2560 px y cerca de 600 elementos interactivos.
Después
Pruebas e iteración
Cinco sesiones de usabilidad y un quiz más completo a partir de lo que pidieron.
06 · Decisiones
Cuatro decisiones, una por punto de dolor
Decisión 01
Un quiz para quien no sabe de juegos
Cinco preguntas sobre el grupo, las edades, el tiempo, el estilo y el presupuesto llevan a una lista ordenada por afinidad. La persona no necesita entender categorías ni mecánicas. Después de las pruebas lo desarrollé completo, con las respuestas siempre a la vista.
Responde a
Descubrimiento
Decisión 02
Filtros con lo que importa al jugar
Jugadores, duración, edad, complejidad, mecánica, editorial e idioma. Los mismos datos aparecen en cada tarjeta de producto, para comparar sin abrir la ficha.
Responde a
Descubrimiento
Decisión 03
Una ficha que evita salir a buscar reseñas
Jugadores, duración, edad y complejidad van arriba. Más abajo están cómo se juega, el contenido de la caja y las reseñas con calificación por aspecto.
Responde a
Confianza para decidir
Decisión 04
El total a la vista y el pago como se paga en Colombia
El envío y el total se ven desde el carrito. Se puede comprar como invitado y pagar con PSE, Nequi o Efecty, con un encabezado de checkout simplificado.
Responde a
Costo total y checkout
07 · Identidad visual
Una marca cálida, como una noche de juegos
El dado reemplaza la «o» del nombre y la placa inclinada recuerda un tablero apilado. El sistema se llama Warm Tabletop Modern.
Exploración
Ocho caminos para el logo: seis salen de bocetos a mano y dos son propuestas nuevas.
Logo final
La placa con el dado, en tres combinaciones de color para fondos distintos.
- #B84A39TerracotaAcciones principales
- #E08A1ENaranjaAcentos y ofertas
- #234E43VerdeBloques de apoyo
- #FAF4F0CremaFondo de página
- #24201DCarbónTexto y pie
Tipografía
- Outfit
- Títulos y precios
- Plus Jakarta Sans
- Texto, etiquetas e interfaz
Sistema de diseño
Los colores base no se usan directo en las pantallas: cada uno pasa por un token con nombre de función (fondo, texto, acción, estado). Todos los textos de la interfaz usan uno de los 14 estilos.
- 39valores base en uso
- 36tokens en uso
- 14estilos de texto
Portadas
Diez juegos inventados con portada propia, hechos como componentes para llenar el catálogo sin usar marcas reales.
Componentes
Botones, chips e insignias, documentados con sus variantes. El texto blanco solo va sobre terracota o más oscuro; el naranja lleva texto oscuro para cumplir contraste AA.
08 · Pruebas de usabilidad
Cinco participantes, cinco tareas, todas completadas
Sesiones moderadas de 15 minutos con el prototipo de alta fidelidad, pensando en voz alta. Participaron cinco personas de 19 a 64 años, tres hombres y dos mujeres.
Tasa de éxito
25/25
tareas completadas sin ayuda: las cinco tareas, por los cinco participantes.
Facilidad de uso
94/100
en un cuestionario de usabilidad tipo SUS, en su versión de ocho preguntas.
Recomendación
9/10
de probabilidad promedio de recomendar Boardos a un amigo. Los cinco respondieron 8 o más.
Confianza
8,8/10
de confianza promedio para elegir un buen regalo con el quiz.
Las tareas
Una visita completa, del regalo a la confirmación
- T1
Usar «Encuentra tu juego» para elegir un regalo para alguien que nunca ha jugado.
5 de 5 - T2
Encontrar Reinos de Ámbar y abrir su página.
5 de 5 - T3
Decir para cuántos jugadores es, cuánto dura, si sirve para un niño de 10 años y qué tan difícil es.
5 de 5 - T4
Agregarlo al carrito y decir el total, cuántos productos lleva y cuánto cuesta el envío.
5 de 5 - T5
Terminar la compra y decir el número de pedido y la fecha de entrega.
5 de 5
Una participante se demoró en la tarea 4 buscando cómo desplazarse. Lo descarté como hallazgo: la vista previa de Figma no muestra la barra de desplazamiento que sí pone el navegador.
Lo que gustó
- Las portadas, la paleta de colores y la identidad visual del sitio.
- La familiaridad con plataformas como Amazon.
- La facilidad para agregar un producto a la compra.
- La forma en que está dispuesta la información de cada juego.
Lo que pidieron
«Sería bueno ver la indicación en el quiz del elemento seleccionado.»
«Me gustaría que el quiz fuera más a fondo.»
Iteración después de las pruebas
El quiz, más a fondo y con las respuestas a la vista
Los dos pedidos apuntaban al mismo lugar, así que desarrollé el quiz completo.
Paso 1 · Jugadores
Paso 3 · Tiempo
Paso 5 · Presupuesto
Cinco pasos completos
Jugadores, edades, tiempo, estilo de juego y presupuesto, cada uno con su pantalla y opciones propias.
Las respuestas siempre a la vista
El panel «Tus respuestas» y la barra de pasos muestran lo que ya se eligió y lo que falta.
Resultados que se van cerrando
La lista baja de 128 juegos a 37 y luego a 12 a medida que se responde, ordenada por afinidad.
Pensado para regalar
El primer paso pregunta si es un regalo y el de edades si la persona ya ha jugado antes.
09 · Cierre
Lo que aprendí y lo que sigue
Aprendizaje
Filtrar por jugadores y duración vale más que tener un catálogo grande.
Y diseñar para Colombia cambia el checkout: PSE y la compra como invitado no son un extra, son el camino principal.
Próximos pasos
- Probar el quiz nuevo en una segunda ronda, con el cuestionario SUS completo de diez preguntas.
- Diseñar la versión móvil, porque Laura compra desde el celular.
- Diseñar estados vacíos y de error, el mega-menú y el mini-carrito.
- Añadir estados de foco y presionado a los botones.
Siguiente caso
TuHuella