Club La Tercera
Rediseño del club de beneficios para suscriptores: nuevo buscador, tarjeta virtual del socio y una web pensada primero para móvil.
- Cliente
- Grupo Copesa
- Año
- 2020 — 2021
- Mi rol
- Diseñador UX/UI principal
- Plataforma
- Sitio web responsivo
Contexto
El Club La Tercera reúne a los suscriptores de los medios del grupo Copesa. A través de él se ofrecen beneficios, concursos, ventas especiales y planes de suscripción impresos y digitales.
El sitio no se renovaba hace años. Necesitaba adaptarse a la nueva gráfica de La Tercera, mostrar mejor la tarjeta digital del socio y apoyarse en un buscador con contenidos bien etiquetados.
El reto
Que los socios encuentren y usen sus beneficios fácilmente, con el nuevo buscador como eje del producto.
Mejorar la navegabilidad, simplificar la lectura de beneficios y categorías, adaptar la web a móvil y dar visibilidad a la tarjeta virtual.
Mi rol
- Diseño de interfaz y UX
- Investigación de usuarios
- Mapeo del viaje
- Wireframes
- Arquitectura de información
- Diseño de interacción
- Sistema de diseño
Herramientas: Photoshop, Illustrator, Adobe XD, Animate, After Effects, HTML, CSS, JS y WordPress.
Proceso
Como diseñador principal trabajé de cerca con las gerencias de marketing y de producto. Entrevistamos a socios del club para definir objetivos y validar conceptos hasta llegar a un MVP que permitiera evaluar el rediseño.
- EmpatizarEvaluación de flujos, historias de usuario, entrevistas y research de la competencia.
- DefinirPrioridades de desarrollo, estructura general y específica, conceptos clave.
- IdearUser journey map, flujos de negocio y de pago, wireframes.
- PrototiparBiblioteca de diseño, alta fidelidad, priorización del MVP y A/B testing.
- Desarrollo del sprintDiseños finales, videos explicativos y guías de estilos y componentes.
Investigación
Me reuní con las gerencias del Club para conocer su flujo de trabajo, fijar objetivos y la hoja de ruta, y bocetear conceptos en la pizarra. Luego hice encuestas por email a distintos tipos de socios. Con esos hallazgos armé user personas y mapas de viaje que guiaron los wireframes.
Bocetos
Diseño final
Tras varias iteraciones y A/B testing con usuarios reales y gerentes, las mejoras pasaron a un equipo de desarrollo externo en archivos de Adobe XD y videos de microinteracciones, con reuniones periódicas para corregir detalles que aparecían en nuevas pruebas de usabilidad.
