Diseñando una App gastronómica. Caso de estudio.

Métodos, teorías, principios y reflexiones

Me gustaría aprovechar este proyecto para escribir sobre diseño, sobre métodos y principios, y a la vez tratarlo como caso de estudio. Porque el hecho de escribirlo me ayuda a crear un thesaurus de temas que me interesan, y a pensar y comunicar más claramente.

El proyecto y su contexto

Con la voluntad de contar la vida de la gastronomía de la Comunidad Valenciana, sus cocineros, barras, restaurantes, producto y, mucho más importante, acercarlo a las personas, el magazine digital especializado en gastronomía La Guía Hedonista decide trasladarse a entornos móviles con una experiencia en forma de aplicación.

Vistas del Inicio, Mapa y Detalle de la App de IOS

La idea es trasladar una parte del magazine digital, la sección titulada Los diez mejores — que es una selección de los mejores restaurantes — a una app que iba a acompañar al anuario impreso.

En colaboración con el responsable de la publicación y director de arte Nada Importa, el equipo de VG, stakeholders, y junto a una serie de requerimientos, ayudé a identificar las necesidades y a responder las preguntas que surgieron durante la conceptualización de la app. Como diseñador de producto, lideré el proceso de diseño de la aplicación para IOS y Android, así como el concepto de un lenguaje de diseño unificado entre plataformas y escalable a entornos web.

El concepto de la App

La app cuenta con la ventaja del gran recorrido que lleva el magazine digital la Guía Hedonista, y con el proyecto se ha reformulado la estrategia de contenido y creado un producto digital para guiar mejor a nuestros usuarios y atraerlos a conocer una gastronomía que se encuentra en un momento abrumador.

Experiencias memorables, los establecimientos más relevantes, las mejores casas de comida y las barras imprescindibles. Los mejores restaurantes de Valencia y porqué.

Entendiendo al usuario (y empatizando con él)

Tomar decisiones de diseño no es fácil, pero conociendo mejor a tus usuarios es mucho más sencillo diseñar y validar esas decisiones. Con el fin de pensar en todas las diferentes posibilidades de uso, ayudé a identificar posibles usuarios, situaciones, motivaciones y metas a conseguir.

  • Persona #1. Laura, 38 años. Planea los fines de semana. Busca y no se deja llevar por lo espontáneo. Se deja aconsejar por los mejores. Leerá la crítica y probablemente llamaría al restaurante para reservar desde la aplicación si se pudiese. Cada detalle es un pequeño placer que exprime al máximo. Se deleitará con la crítica y sólo con pensarlo ya se le hace la boca agua.
  • Persona #2. Ramón, 31. Foodie. Le gusta descubrir, pero agradece un filtro de expertos. Le vendrá bien saber lo que tiene cerca para esa cena de una noche entre semana. Tiene como motivación principal disfrutar con su pasión por lo gastronómico, salir de la rutina y lo convencional. Va en busca de que la ciudad le sorprenda y emocione, y no dejará de investigar nuevas opciones para ello.
  • Persona #3. Paula 34. Urbanita. trabaja y come todos los días fuera de casa. Se cuida y suele cocinarse el día anterior, pero en ocasiones prefiere acercarse a algún restaurante cercano a su trabajo para desconectar y comer algo decente.

Definiendo el punto de vista

El mapeado del escenario ayuda a disponer de un marco, de una foto ideal de los posibles casos de uso, a crear la historia de usuario. La búsqueda y definición de nuestros usuarios nos define muchos de estos posibles escenarios. Resulta muy útil definir el escenario introduciendo el contexto y plantearlo con un foco en la causa, tratando de definir las motivaciones y las expectativas.

[Usuario] → [Motivación] → [Resultado esperado]

Imprescindible esta lectura. Por ejemplo en nuestro caso:

  • Como foodie, quiero descubrir un restaurante, para disfrutar con mis amigos de una experiencia diferente.
  • Como persona que disfruta de la buena gastronomía, quiero que me recomienden un restaurante ideal, para salir con mi pareja a disfrutar de una cena especial.
  • Como urbanita que come fuera de casa, quiero comer bien, en una comida con compañeros de trabajo en un restaurante cercano que no falle.

Detectando las necesidades

Cada una de estas cuestiones asientan una sólida hipótesis de cómo deberían ser los flujos de nuestros usuarios. Y más interesante es que a través de los usuarios y sus contextos e historias, detectamos una serie de necesidades que nos ayudan a gestionar y a definir la arquitectura y las características que debería tener la aplicación. Por ejemplo:

  • Conocer un restaurante a través de una crítica → Nos avisa de poder disfrutar de una lectura clara
  • Descubrir restaurantes que encajen con mis gustos → Implica la necesidad de Filtros y Categorías + factor descubrimiento
  • Elegir un restaurante cuando está en la calle y quiere encontrar algo cerca. → Mapa y Geolocalización
  • Contactar con restaurantes para su reserva → Datos específicos y acciones relacionadas

Crear mapas de historias para cada una de las tareas fundamentales que realizarán los usuarios nos sirve para comprender los problemas, y empatizar. Ayuda a definir qué problema va a centrar nuestro foco y cuales no, qué vamos a tener que solucionar y sobretodo qué definición va a tener el éxito de las decisiones.

Cuanto más se entienda el problema, más fácil será desarrollar un punto de vista sobre cómo resolver el problema. —John Saito

La comprensión nos aporta confianza y seguridad en las decisiones de diseño. La comprensión es lo que convierte una idea en un punto de vista, es mucho más sólido y argumentable.

El desafío de diseño

Quizás la parte más crítica (y uno de los mayores retos) del proceso de Design thinking, ya que va a requerir la habilidad de sintetizar las observaciones, las hipótesis y definir el problema que el diseñador se centrará en resolver. Idealmente siguiendo una filosofía centrada en el usuario, habrá de responder a necesidades de usuarios pero no podemos olvidar que deberá de responder también a necesidades de negocio. Una buena definición y planteamiento del problema guiará al diseñador y a su equipo, y ayudará a comenzar el proceso de ideación en la buena dirección.

¿Cómo podríamos acercar la gastronomía a nuestros usuarios? ¿Cómo podríamos encontrar el restaurante ideal?

La idea de que podamos conocer y encontrar un restaurante ideal, bien sea a través de las recomendaciones de los expertos o bien a través de la localización en la que se encuentre el usuario, es uno de los motores fundamentales del proyecto, siempre teniendo en mente principios como la simplicidad, honestidad y la estética.

No es lo que puede hacer tu producto, sino lo que los usuarios pueden hacer si usan tu producto. — Donna Lichaw

Seguir una filosofía de diseño centrado en el usuario que valide la solidez de las propuestas, ser fiel a los principios fundamentales de diseño y dar al contenido — a las palabras y a las personas — la importancia que se merecen, fue en todo momento uno de los retos principales, y lo que iba a ayudar a definir la estructura de la aplicación.

Wireframes y prototipos

Partiendo de las hipótesis anteriores, comenzamos la fase de diseño. Mi trabajo comenzó recibiendo este wireframe.

Primer wireframe proporcionado en una fase muy temprana

Tomando este primer wireframe, junto a las hipótesis y el marco que habíamos definido, principios fundamentales, patrones y estándares, comencé a diseñar wireframes de más alto nivel con los que validar rápidamente estructura, flujos y usabilidad.

Primeros wireframes con indicadores y anotaciones.

Siempre he pensado que el diseño es muy bueno para simular cosas. En este sentido el uso de wireframes y prototipos clicables permite que el equipo priorice su roadmap, y obtener feedback de una manera anticipada. Esto crea un entorno para informar sobre decisiones de diseño sin la necesidad de invertir demasiado tiempo y recursos. Si tienes una idea, puedes prototipar en cuestión de un par de horas, testar y validar, y volver a repetir, creando una metodología muy parecida a lo que entendemos por método científico 👩‍🔬.

Primeros prototipos testeando interacción para el consumo de contenidos en la vista principal

El prototipado y su testeo informa de problemas en un estadio avanzado, y eso es sin ningún lugar a dudas una gran ventaja.

Si una imagen vale más que 1000 palabras, un prototipo vale más que 1000 reuniones.— Tom & David Kelley.

En este caso surgió un problema, que por pequeño que parezca, creaba confusión en cuanto a interacción. Más que confusión se trataba de un mapa mental: se asumía un comportamiento. En la pantalla en la que seleccionas los filtros, ¿debería el back button aplicar la selección?

Problemas detectados en la vista Filtros

Un gran porcentaje de gente simplemente quería volver a un estado anterior, a la seguridad de la vista principal, otros desmarcaban los filtros y luego volvían, en general el grueso de los usuarios estaba de un modo u otro asumiendo que se volvía sin saber si se aplicaba la selección, no se entendía.

Una de las necesidades básicas que todos compartimos es que todo el mundo necesita entender. Essential design principles WWDC 2017

Al detectar este problema y tras testeos y reflexiones acerca de mapas mentales, decidí tomar una solución: enfatizar la idea de cerrar, frente a la de volver a un estado anterior. Sustituyendo el icono back “←” por un close “X”, implicaba cerrar, y no volver. Además añadimos un “reset” de los filtros y un “indicador” cuando hubiese algún filtro en ejecución en la vista principal.

Volver o Cerrar? Aplicar o cancelar? Antes y después

Un pequeño cambio y el resultado fue bastante satisfactorio, un simple cambio de icono y eliminamos ambigüedades, confusión y lo más importante fue que amplificamos su uso con naturalidad.

Soluciones adaptadas a tiempos

He de decir que me gustan los mapas y la localización era otro punto importante de la app 🙃, así que enfrentarme al diseño de esta vista fue todo un reto. Tras varias propuestas, la idea de superponer una capa con los restaurantes ordenados en función de la cercanía a tu ubicación, encajó desde el primer momento.

Versión primigenia con listado vertical que muestra la Vista Principal, el Detalle, y el Mapa

La idea es sencilla, tu posición aparece en el centro y alrededor todos los marcadores de restaurantes cercanos, al pulsar en uno, la capa con las cartas se centra en el restaurante seleccionado.

El diseño nunca está terminado. — Luke Wroblewski

Sin ser la propuesta perfecta, funcionaba y se adaptaba a mapas mentales de interacción, así que decidimos apostar por esta solución, pues el tiempo apretaba, y era la propuesta que más se ajustaba a tiempos de desarrollo y validación. Por otra parte cabe decir que soluciona un gran insight como es el factor descubrimiento.

Definiendo un lenguaje

Tengo por principio documentar cada decisión de diseño que tomo. Cada cambio, cada decisión, cada nueva solución, intento que quede registrado. Esto me sirve para informar al equipo y stakeholders, y mantiene un estado del diseño que facilita el seguimiento, comprensión y su evolución. Del mismo modo trato de definir un lenguaje de diseño, que facilite su implementación y sobretodo para crear un entorno que facilite la creación de nuevas soluciones con la menor inversión de tiempo posible.

Diseñar de modo holístico para procesos y sistemas, comprender los comportamientos y necesidades de los usuarios, e incluir el diseño participativo en el proceso. John Chris Jones

En este caso el sistema de diseño engloba la cultura y filosofía del proyecto, dando importancia a las palabras y a las personas y sus platos, a sus fotografías y sus nombres, bajando hasta el branding y documentando librerías de componentes que, sin ser demasiado extensas, definen un lenguaje de diseño. 4 colores, 2 tipografías, un sistema de 8pt, átomos, componentes y bloques repetibles, usos del espacio — y del white space — , de la imagen y de la iconografía, mensajes y tono de la interfaz, y unas pocas cosas más, están incluidas para permitir generar más pantallas con el menor esfuerzo y la mayor intuición posible. Intentando mantener las cosas sencillas, intuitivas y estéticas.

Muestra de una parte de la guía de estilo
La Style Guide sirve como un vehículo para ayudar a las personas a través de disciplinas diferentes, a compartir conocimientos y a colaborar entre sí. — Brad Frost

Usando el imaginario para construir una voz personal

La fotografía es crucial para la experiencia de la app. Dejar que la fotografía lidere, le da a la interfaz de usuario un aspecto audaz y ordenado, y hace que la navegación de listado a detalle sea fácil y cómoda. A esto se le suma la genial iconografía creada por Calpurnio para representar las categorías. El resultado es una voz que actúa con gran personalidad.

Iconografía de Calpurnio

No more Lorem Ipsum, por favor

Trato de diseñar siempre teniendo en cuenta el contexto — qué importante es el contexto. Diseñar con datos reales es a priori un proceso muy recomendable, no cabe duda que el contexto al que te enfrentas es real, y también se gana en comunicación con el equipo de ingenieros 😉, pues vas a tratar la información de un modo muy similar. Además podemos testear prototipos con datos reales, y validar si los diseños planteados están preparados para escalabilidad, repetición, etc. y en general es un proceso en el que interviene el trabajo de equipos diferentes — comunicación, desarrollo, diseño.. Es un win-win sin lugar a dudas.

{
“Restaurante”:”Ricard Camarena”,
“Cocinero”:”Ricard Camarena”,
“Estrellas”:4,
“Plato estrella”:”Lo suyo es abandonarse al menú degustación.”,
“Imagen”:”ricard_Camarena.png"
“Crónica “:”2012. Ricard Camarena y Mari Carmen Banyuls [...]”,
“Colaborador”:”Jesús Terrés”,
“Calle”:”c/ Sumsi, 4",
“Latitud y Longitud”:”39.463595, -0.369633"
“Teléfono”:”(+34) 963 355 418",
“Web”:”http://www.ricardcamarenarestaurant.com",
“Precio Medio”:”90€”
}

Con un sencillo json, desde Sketch + InVision Craft puedes hacer una petición al servidor o subirlo directamente desde un archivo local, e insertar los datos en el diseño ⚡💥️. Aquí una demo:

Insertando datos en sketch desde un json vía Craft

Utilidad, honestidad, simplicidad y estética ♠️ ♥ ♣️️ ♦️

Al final estoy bastante satisfecho de cómo funcionó todo. La app es consistente y encaja en un balance perfecto entre utilidad, simplicidad y estética. La honestidad viene de parte de los críticos y su opinión, personal, subjetiva y absolutamente insobornable. La fotografía e iconografía lideran y aportan personalidad, la interacción está trabajada para que sea intuitiva a la vez que eficaz, y el equipo ha quedado satisfecho con los resultados.

Los principios de diseño son universales: verdades contrastadas una y mil veces que nos dicen lo que funciona. — Javier Cañada
Diferentes pantallas de la primera versión en producción de la app de IOS

Hay muchas formas de entender, enfocar y solucionar problemas de diseño, de definir un punto de vista. Este caso de estudio es tan solo un ejemplo con el que he querido comentar teorías, métodos y principios que me interesan y bajarlos para tratar detalles concretos. Ojalá pueda resultar de alguna ayuda.


Si has llegado hasta aquí quiero agradecértelo. Muchas gracias a la gente que me ha inspirado y animado a escribir.

If anyone is interested in reading this case study in english, please contact me and I’ll find the time to translate it.

Like what you read? Give Carlos March a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.