CarExpert · Paul Chávez

Contexto

CarExpert es una plataforma australiana de medios automotrices: reseñas, noticias y un showroom de investigación donde el lector va de una marca a un modelo y a un año concreto, con precios, especificaciones y ofertas en cada nivel. Entré en 2023, primero freelance y desde octubre a tiempo completo, como Product Designer.

Mi rol

Soy dueño del sistema de diseño y lidero el diseño de nuevas funciones del sitio de principio a fin: investigación con usuarios, arquitectura de información, wireframes, diseño de alta fidelidad, validación con usuarios y stakeholders, y lanzamiento junto al equipo de desarrollo. El trabajo que se muestra aquí es el showroom.

El trabajo

Primero la arquitectura de información. A partir de investigación con usuarios y entrevistas con stakeholders, mapeé cómo la gente investiga realmente un carro (marca, modelo, año, versión) y con eso definí la estructura de las páginas y el flujo de interacción antes de dibujar cualquier interfaz.

Cuadrícula de wireframes de baja fidelidad para el showroom de CarExpert: páginas de marca, gama y año-modelo en anchos de móvil y escritorio. — Wireframes del showroom: marcas populares, la página de marca, la página de gama y la página de año-modelo, cada una en móvil y escritorio.

Un sistema, no un conjunto de pantallas. Construí el sistema de diseño en Figma con tokens y variables, de modo que color, tipografía y espaciado se definen una sola vez y gobiernan cada página y cada breakpoint. Las páginas nuevas se arman con los mismos componentes en lugar de dibujarse de cero.

Vista general del archivo de Figma del showroom, con decenas de frames de página, sets de componentes y un grupo etiquetado de estados vacíos. — El showroom en Figma: cada página, breakpoint y estado vacío construido con el mismo set de componentes.

Del wireframe a la alta fidelidad. Tras probar los wireframes con usuarios y revisarlos con stakeholders, llevé los flujos a diseños de alta fidelidad para móvil y escritorio.

Página de año-modelo en alta fidelidad para la Ford Ranger 2020, en móvil y escritorio, con precio, fichas de calificación, pros y contras, selector de año y reseñas relacionadas. — Página de año-modelo, móvil y escritorio. Precio, calificación y pros y contras van arriba del pliegue; el selector de año y las reseñas vienen después.

Páginas de precios y especificaciones en alta fidelidad, móvil y escritorio, con tablas de versiones agrupadas por carrocería, diagramas de dimensiones y secciones de especificaciones desplegables. — Precios y especificaciones, dos niveles de profundidad: el modelo completo y luego una sola versión con sus dimensiones y especificaciones.

Dos teléfonos con el showroom móvil: la búsqueda de marcas populares y la página de Ford. — Las entradas al showroom en móvil: buscar o explorar por marca.

Resultado

Un showroom basado en componentes, publicado en carexpert.com.au para móvil y escritorio, sobre un sistema de tokens con el que las páginas nuevas se arman en vez de redibujarse. Aquí se muestran las páginas de marca, gama, año-modelo y precios de ese sistema.