Dos usuarios con roles distintos en el mismo producto. El propietario del restaurante, que no tiene por qué tener conocimientos de diseño, necesita crear y mantener su menú sin fricción: añadir platos, actualizar precios, organizar categorías. El comensal, que consume el menú en su móvil, probablemente en el propio restaurante, necesita encontrar lo que busca de forma rápida y con una experiencia visualmente agradable. El diseño del producto tenía que servir a ambos sin que ninguno notara la complejidad que había detrás.
Tres flujos definieron las prioridades del diseño. El primero: la creación del menú, que el propietario pudiera estructurar categorías, añadir platos con nombre, descripción, precio, extras, etiquetas e imágenes sin dispersión mental. El segundo: la selección y configuración del estilo visual, que el propietario pudiera elegir entre más de 50 estilos y configurar visibilidad de precios, imágenes, navegación y moneda sin tocar el contenido. El tercero: la experiencia del comensal, que el menú resultante fuera legible, navegable y visualmente atractivo en cualquier móvil, sin necesidad de zoom.
El proceso empezó con wireframes en papel. La primera exploración fue un editor unificado donde contenido y diseño convivían en la misma pantalla, el propietario veía en tiempo real cómo quedaba el menú mientras lo editaba. Se descartó porque mezclaba dos tareas cognitivamente muy distintas: organizar información y tomar decisiones estéticas. Esa mezcla generaba dispersión y ralentizaba ambas tareas. La conclusión, llegada de forma independiente, fue la misma que usan herramientas como Webflow o Notion: primero el contenido estructurado, luego la presentación. Dos modos separados, dos objetivos claros, cero dispersión.
El producto se organizó en tres áreas. La primera es el gestor de menús, vista centralizada desde la que el propietario accede a todos sus menús, los previsualiza y los gestiona. La segunda es el modo contenido, donde se define la estructura del menú: categorías, platos, precios, extras, etiquetas e imágenes. La tercera es el modo diseño, donde se elige el estilo visual y se configura la presentación: visibilidad de precios e imágenes, tipo de navegación, orden de elementos y moneda. Las tres áreas están conectadas pero son cognitivamente independientes, el propietario puede estar en cualquiera de ellas sin que las otras interfieran.
