Artefactos on Fernando Ruiz

Customer Journey Maps

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Customer Journey Map (CJM) es una visualización de la historia completa de la interacción de un usuario con un producto o servicio a lo largo del tiempo y a través de diferentes canales. Narra la experiencia desde la perspectiva del usuario, destacando sus acciones, pensamientos, sentimientos y puntos de dolor en cada etapa.

¿Qué son los Customer Journey Maps?

Si las Personas es una foto de tu usuario, un Customer Journey Map es una película sobre él. No se enfoca en un solo momento, sino que mapea toda la experiencia de un usuario mientras intenta alcanzar un objetivo, desde que se da cuenta de que tiene una necesidad hasta que la resuelve y más allá.

Especificaciones de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Documentación detallada que traduce diseños en instrucciones de desarrollo—el puente entre diseño y código.

¿Qué son Especificaciones de Diseño?

Las especificaciones de diseño son documentos detallados que describen la intención del diseño lo suficientemente preciso para que los desarrolladores puedan implementarlo sin volver a los diseñadores para aclaración. Las especificaciones cubren todo: espaciado (el botón tiene 16px de padding), colores (el azul primario es #0066FF), interacciones (al pasar el ratón, el botón se vuelve 2% más oscuro), y casos borde (estado deshabilitado muestra 50% opacidad).

Mapas de Sitio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un diagrama jerárquico que muestra todas las páginas y cómo se relacionan—el plano antes de diseñar una sola página.

¿Qué es un Mapa de Sitio?

Un mapa de sitio es una representación visual de la estructura de un sitio web. Muestra cada página y cómo se conectan. La página de inicio se sienta en la parte superior. Las páginas de productos se ramifican hacia abajo. Las páginas de soporte se ramifican por separado. Cada página tiene un padre claro y hermanos.

Mockups

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un mockup es una representación estática y de alta fidelidad de la interfaz de un producto. A diferencia de los wireframes, los mockups se centran en el aspecto visual y estético, incluyendo colores, tipografías, imágenes y otros elementos gráficos para simular la apariencia del producto final.

¿Qué son los Mockups?

Si un wireframe es el plano de una casa, un mockup es la maqueta a color o el render 3D que muestra cómo se verá la casa terminada. Es un diseño estático (no interactivo) que comunica la dirección de arte y el diseño visual del producto.

Personas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una Persona (o User Persona) es un arquetipo de usuario ficticio, pero basado en datos reales de investigación, que representa a un grupo de usuarios con comportamientos, objetivos y motivaciones similares. Se utiliza para humanizar a los usuarios y mantener al equipo de diseño enfocado en sus necesidades.

¿Qué son las Personas?

Imagina que estás diseñando una mochila. Podrías diseñarla para “todo el mundo”, pero probablemente terminarías con algo genérico que no le encanta a nadie. En cambio, podrías diseñarla para “Ana, la estudiante universitaria de 20 años que va al campus en bicicleta, necesita llevar su portátil y libros, y valora la sostenibilidad y el estilo”.

Prototipos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un prototipo es una simulación interactiva de un producto final que se utiliza para probar y validar conceptos de diseño antes de su desarrollo. A diferencia de los mockups (que son estáticos), los prototipos son “clicables” y permiten a los usuarios experimentar el flujo de una aplicación.

¿Qué son los Prototipos?

Si un mockup es la maqueta a color de una casa, un prototipo es una visita guiada virtual por esa maqueta. Permite abrir puertas, encender luces y moverse entre habitaciones para entender cómo se siente vivir en ella.

Red Routes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los 5 mejores viajes de usuario que tu producto debe apoyar sin falla—identifica estos y todo lo demás es secundario.

¿Qué son Red Routes?

Las red routes son los viajes de usuario principales que tu producto debe apoyar perfectamente. El término viene del Underground de Londres—las red routes son las líneas principales que llevan el tráfico más pesado. Todo lo demás es secundario.

Para un sitio de e-commerce, las red routes son: navegar productos, leer reseñas, añadir al carrito, pagar y contactar soporte. Todo lo demás (listas de deseos, recomendaciones, compartir social) es nice-to-have.

Service Blueprints

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Service Blueprint (o Blueprint de Servicio) es un diagrama que visualiza las relaciones entre diferentes componentes de un servicio (personas, procesos y objetos) en las diferentes etapas de la interacción del cliente. Es como un [[Customer Journey Maps|Customer Journey Map]] con superpoderes, ya que no solo muestra lo que ve el cliente, sino también todo lo que sucede “detrás del telón” para que esa experiencia sea posible.

¿Qué son los Service Blueprints?

Imagina que un [[Customer Journey Maps|Customer Journey Map]] es la vista que tiene un comensal en un restaurante: ve el menú, habla con el camarero, recibe su comida. Un Service Blueprint es el plano completo del restaurante: muestra al comensal, al camarero, pero también a los cocineros en la cocina, el sistema de pedidos, los proveedores que traen los ingredientes y los procesos de limpieza.

User Flows

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un User Flow (Flujo de Usuario) es un diagrama que visualiza la ruta completa que sigue un usuario a través de un producto digital para completar una tarea específica. Muestra las pantallas, las acciones y las decisiones que el usuario toma de principio a fin.

¿Qué son los User Flows?

Si un wireframe es el plano de una habitación y un mapa del sitio es el plano de todo el edificio, un User Flow es la ruta de evacuación de incendios. No muestra todas las habitaciones, solo la secuencia específica de pasos para ir desde un punto A (por ejemplo, “estar en el pasillo”) a un punto B (por ejemplo, “estar a salvo fuera del edificio”).

Wireframes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un wireframe es un esquema visual de baja fidelidad de una interfaz, similar al plano de un arquitecto. Se enfoca en la estructura, la jerarquía del contenido y la funcionalidad, ignorando deliberadamente los elementos visuales como colores, tipografías o imágenes.

¿Qué son los Wireframes?

Imagina que quieres construir una casa. Antes de decidir el color de las paredes o el tipo de muebles, necesitas un plano que defina dónde estarán las habitaciones, las puertas y las ventanas. Eso es exactamente un wireframe para un producto digital.