Content First Design aplicado
O cómo diseñamos experiencias con mensajes e historias centradas en las personas.
Diseñar primero el contenido es diseñar mensajes que impacten de forma positiva en las personas que usan un producto y también en el negocio o la causa que sostiene a la experiencia.
Es definir el orden de la interacción, la cronología de la historia, qué emociones queremos despertar antes de pensar cómo va a verse todo en pantalla o cuántos pasos vamos a ofrecer para que el usuario haga una tarea.
Si algo caracteriza mi apuesta por volver a emprender con Saltolab son las ganas de hacer de este proceso una cultura, una forma de trabajar en el día a día y la llave maestra con la que aportar valor real a las personas y a los negocios de los equipos que nos eligen para formar parte de sus proyectos.
Diseñar primero el contenido es diseñar experiencias con estrategia, una buena práctica de diseño. Roles aparte, quien sea que lleve este mindset a una etapa temprana del proceso aporta solidez al diseño y lo trabaja con sentido e intención.
En esta nota voy a abrir nuestro proceso con un caso real en el que trabajamos durante los primeros meses de este 2021. Tómenlo como una cocina a la que pueden entrar y robarse un par de ingredientes para llevar a sus propios platos.
CX meets UX Content-First
El equipo de CX de Grido nos llamó para “mejorar la comunicación con sus usuarios durante el uso de la app”. Diagnóstico y research mediante, descubrimos que el producto tenía una buena historia que contar y que no lograba hacerlo a través de la interacción.
Identificamos puntos de mejora a nivel usabilidad y look & feel pero, sobre todo, la oportunidad de reflejar su valor agregado durante el primer uso y expresar la personalidad de la marca.
Lu, nuestra UX Lead, lideró el proceso de discovery, la conexión con las personas usuarias y el problema, y la definición de los pasos a seguir en equipo para crear soluciones.
Hicimos una kickoff con dinámicas de estrategia y alineación, armamos un mapa de oportunidades y decidimos crear una experiencia de primeros usos con el objetivo de acompañar a los usuarios que ingresan a la app por primera vez.
Con esto podríamos guiar el descubrimiento de las funcionalidades principales, mover métricas de negocio y mejorar las de experiencia. Sin bugs y con contenido de valor, ese que encuentra a los usuarios en el momento justo y de la forma esperada.
Juntos podemos más que la suma de las partes
Hicimos workshops con el equipo de Grido para hacer las definiciones clave del proyecto y establecimos el scope de lo que haríamos en los siguientes meses de trabajo.
Marcamos los impactos que queríamos tener a través de la experiencia y con esto visualizamos un norte, lo que teníamos que conseguir que pasara con éxito:
- Que los usuarios hagan su primer pedido online.
- Que los usuarios hagan su primera búsqueda de locales cercanos.
- Que los usuarios consigan su primer cupón de descuento.
A esto le siguió una etapa de ideación del camino feliz. ¿Cómo podría verse esta historia en 6 pasos?
Dibujamos las historias en 3 partes: con un inicio, un desarrollo y un final. Revisamos las propuestas del equipo y usamos puntos rojos para crear un mapa de calor sobre las ideas más interesantes que podíamos explorar.
Entonces, Content First Design
Nos llevamos todo este material para procesar, bajamos un brief del proyecto y trabajamos algunos flujos con más detalle para crear posibles soluciones. Y ahora sí, hora de diseñar empezando por el contenido.
El proceso podría contarse en 3 pasos:
- Qué tenemos que decir y en qué orden para que el usuario haga su primer pedido, su primera búsqueda de locales y consiga su primer beneficio.
- Cómo lo vamos a representar en la interfaz y en el flujo de interacción.
- Cómo lo va a ver el usuario final.
Qué tenemos que decir
Vic, UX Writer del proyecto, empezó escribiendo el guion de la historia. Desarrolló una conversación entre los usuarios y el producto como primer esbozo de la experiencia. Todavía no teníamos señales de la interfaz. O, mejor dicho, la interfaz era esa conversación.
Herramientas que podés usar en esta etapa:
Cómo lo vamos a representar en la interfaz
Con esas palabras exploré el paso a paso de la interacción en formato de flujos y wireframes. Hicimos Design Critiques de las opciones y procesamos el feedback antes de ir a la fidelidad alta.
Herramientas que podés usar para esto:
- Tableros en Miro, Mural, Whimsical para wireframes y flujos.
- Hojas de papel, post its y marcador para wireframes y prototipos en papel con los que tener buenas discusiones.
Mica, diseñadora UI del proyecto, exploró los primeros diseños de la interfaz y otras decisiones gráficas como ilustraciones y animaciones de los componentes en casos de error, páginas de carga y onboardings.
Cómo lo va a ver el usuario final
Llegamos a la última etapa de producción. Tiempo de activar la mentalidad pixel perfect y tomar decisiones de wording final.
Con Vic hicimos rondas de edición del contenido en baja fidelidad que teníamos en el guion hasta que dejó cerrada la propuesta de las palabras que van en la interfaz en un momento específico de la interacción.
En paralelo, Mica diseñó la UI, creó las pantallas finales y dejó los assets listos para la implementación.
Herramientas que podés usar en esta etapa:
- Propuesta de contenidos: google docs
- Diseño UI: Figma, Sketch, cualquier herramienta de diseño de interfaces
Este proceso sería impensable sin todo el material que preparamos previamente y las decisiones de estrategia que fuimos tomando junto al equipo de Grido. Al momento de escribir nos habríamos encontrado con un Google docs en blanco, desafiante.
Sumarlos en el proceso con nosotras los invitó a ver el iceberg, todo lo que se encuentra debajo de la propuesta UX: toma de decisión, estrategia, caminos posibles, limitaciones técnicas, los aaaha moments.
De esta forma ganamos entendimiento común y aprendimos de los usuarios en el proceso. Todos las personas, más allá de nuestros roles, nos retroalimentamos entre sí.
Tomar decisiones del contenido en etapa temprana agilizó el proceso de diseño y evitó rondas de correcciones ya que las definiciones estratégicas estuvieron atadas a la historia que se quería contar, de acuerdo a los objetivos que perseguimos y que seteamos en conjunto.
Thierry Brunfau desde la agencia Base toma posición en el tema con algunas declaraciones que se hacen virales entre cuentas de diseñadores:
Escribí. Vas a ser mucho mejor diseñador.
No hace falta que salgas corriendo a contratar UX Writers — aunque si lo hacés, ¡bravo!- . La magia está en que esta práctica no es tarea exclusiva del UX Writer. Es una práctica de equipo, una forma de hacer las cosas.
Alguien “pone” las palabras en la interfaz en algún momento, ¿no?. En qué momento lo hacen y qué procesos ponen en marcha para hacerlo es lo que cuenta.
Este proyecto todavía no salió a producción y, por acuerdos de confidencialidad, no podemos abrirles más data. Pero esperamos que la nota sirva para el motivo por el que decidimos escribirla: inspirar en otros equipos UX un proceso de diseño Content First.
Y si quizás les da intriga cómo estuvo conformado el equipo que se involucró en este proyecto, les contamos. Del lado del lab:
- UX Lead: Lucía Lanziano
- Content Head: Floren Ferretto, quien escribe esta nota :)
- UI Designer: Micaela Morghen
- UX Writer: Victoria Bertonasco
Del lado de Grido:
- Equipo de Customer Experience (CX — App y Club Grido)
- Equipo de marketing y diseño
- Equipo comercial
Ojalá esta puerta abierta a nuestra cocina pueda ayudarte de guía.
Si necesitás una mano o alguien que lidere el proceso con tu equipo, ¡contá con nosotras! Escribinos a hola@saltolab.com con el asunto hagamos content-first y contanos cuáles son los desafíos de tu proyecto.
