AMPL · A Health & Nutrition App, from Magazine to Prototype

Contexto

Una revista que quería volverse un hábito

El impreso se lanza una vez al mes. Una app puede ser parte del día de alguien. El cliente veía su nueva revista de nutrición no como el producto final sino como la semilla de una relación continua, y quería saber, antes de comprometerse, si una app complementaria podía llevar ese contenido a una rutina diaria que los suscriptores realmente mantuvieran.

El encargo tenía dos mitades. Primero, mostrar el contenido de alimentación de la revista dentro de la app, disponible mediante la suscripción del lector. Segundo, hacerla útil todos los días: permitir a la gente registrar lo que come, seguir una rutina de ejercicio acorde a sus metas y estado actual, y, sobre todo, sentir que el contenido fue elegido para ellos, no sacado de una base de datos genérica.

Como esto era una prueba de concepto para sus directivos, el resultado no era una especificación: era un prototipo funcional más un deck de concepto que exponía los distintos enfoques, para que la dirección pudiera reaccionar ante algo real antes de financiar la construcción.

Benchmark

Empezar estudiando las apps en las que la gente ya confía para esto

El seguimiento de salud es una categoría madura y saturada, lo cual es un regalo para un POC. Analicé apps existentes de seguimiento de alimentación y ejercicio para separar lo básico indispensable (registro, búsqueda, rachas) de los espacios donde una experiencia curada y respaldada por una revista podía sentirse distinta.

Lo indispensable

Registro de comidas rápido, búsqueda y seguimiento de progreso: si esto no es sencillo, nada más importa.

La trampa común

La mayoría de los trackers se sienten como captura de datos: matemática de calorías que convierte el comer en contabilidad y agota a la gente.

La oportunidad

Nadie combinaba el seguimiento con contenido genuinamente curado y editorial. La revista era el diferenciador, si la app lograba que se sintiera personal.

Arquitectura de Información

Un sitemap organizado por lo que el usuario necesita, no por lo que la app tiene

En la primera etapa construí el sitemap completo de la experiencia móvil central. En lugar de agrupar pantallas por función, las agrupé por la intención del usuario en el momento: cinco zonas de experiencia, cada una planteada como algo que el usuario le pide al producto.

AMPL core mobile experience sitemap, organized into five intent-based zones

El sitemap completo de la experiencia central. Cinco zonas, cada una anclada a una necesidad del usuario y no a un conjunto de funciones.

Zona

Ayúdame a seguir avanzando

Onboarding, dashboard y mi programa: las herramientas y la estructura para lograr una meta.

Zona

Seguir mi progreso

Ejercicios, compromisos y logros que muestran el avance con el tiempo.

Zona

Algo nuevo y emocionante cada día

Un resumen diario de receta, actividad y reto del día, para construir el hábito.

Zona

Muéstrame lo que quiero, cuando lo necesito

Descubrir y contenido curado: comer bien, planes de comida, rutinas para cada situación.

Zona

Reflexionar, compartir y conectar

Comunidad, compartir y apoyo: un sentido de pertenencia y motivación.

Wireframes de baja fidelidad

Resolver la estructura en escala de grises primero

Antes de cualquier diseño visual, los flujos clave se wireframearon en baja fidelidad (onboarding, dashboard, el resumen diario, descubrir, planes de comida y recetas) para poder poner a prueba la estructura y la navegación de forma barata y acordarlas temprano.

Wireframe · onboarding question — Onboarding question

Wireframe · landing dashboard — Landing / dashboard

Wireframe · daily refresh — Daily refresh

Onboarding

La personalización empieza por bajar el nivel de presión

Lo primero que dice la app es que esto no es una dieta. El onboarding recopila lo que necesita para curar (consumo de proteína, alimentos a evitar, metas) mientras reafirma activamente que nada está prohibido. Es un flujo de 10 pasos que se siente como una conversación, no como un formulario.

Onboarding intro · No diet, no restrictions — 01
Sin dieta, sin restricciones
Marca el tono antes de pedir nada: los componentes de comidas reales, no reglas.

Onboarding · how much protein do you eat daily — 02
Consumo de proteína
Rangos grandes y fáciles de tocar, con una barra de progreso clara. Paso 2 de 10.

Onboarding · select foods you dislike or avoid — 03
Alimentos a evitar
Las opciones tachadas le dicen al motor de curación qué excluir.

Onboarding · did you know educational card — 04
¿Sabías que...?
La voz editorial entretejida en el onboarding: la revista, apareciendo desde temprano.

Registro y la Smart Camera

Que registrar una comida se sienta como tomar una foto

La mayor fricción de la categoría es el registro. La respuesta del concepto fue una "smart camera" con AR: apúntala a un plato, deja que identifique los ingredientes, confirma y registra, convirtiendo la tarea más tediosa de todo tracker en un solo gesto.

Select your meal · breakfast, lunch, dinner, snacks — 01
Selecciona tu comida
Empieza a registrar con una sola elección amigable.

Today's lunch · search and recently logged — 02
Registrar una comida
Búsqueda, accesos a lo registrado recientemente, o la smart camera.

AR smart camera scanning a plate of food — 03
Smart camera
Apunta al plato. El encuadre con AR hace el trabajo.

Ingredients identified · lemon, parsley, shrimp, lime — 04
Ingredientes identificados
Confirma los ingredientes detectados y registra en un toque.

Descubrimiento Curado

Responder la pregunta real: "¿qué debería comer en su lugar?"

El seguimiento te dice qué comiste. El Protein Finder te ayuda a decidir qué comer después: busca un alimento y desliza para comparar opciones lado a lado en proteína, calorías, grasa y fibra, con recetas a un toque. Aquí el seguimiento se convierte en guía.

Protein Finder · search results for chicken — 01
Protein Finder
Busca un alimento; cada resultado ofrece una comparación directa.

Grilled chicken card · swipe to compare — 02
Desliza para comparar
Opciones en tarjetas con los macros clave a la vista.

Comparison · grilled chicken sandwich vs wrap — 03
Lado a lado
Dos opciones, cuatro métricas, un ganador claro, y luego recetas.

Resultado

Un concepto que los directivos sí podían probar

Un prototipo funcional

No una presentación, sino un prototipo funcional que la dirección podía recorrer, que es lo que una prueba de concepto tiene que ser para ganarse una decisión real.

Los enfoques, expuestos

Un deck de concepto que presentaba las distintas direcciones consideradas, para que la decisión se tomara con las alternativas a la vista, no escondidas.

De revista a producto

Un modelo claro para convertir contenido editorial en una experiencia diaria y personalizada para el suscriptor, en comida y ejercicio.

Una IA que escala

El sitemap de cinco zonas le dio al concepto una estructura hacia la cual crecer, más allá de las pantallas construidas para el POC.

Reflexión

Lo que me llevo

Una prueba de concepto tiene un trabajo distinto al de un producto: tiene que hacer que una idea se sienta inevitable. Las funciones de seguimiento eran lo básico; lo que vendió el concepto fue la sensación de que la app te conocía, desde la bienvenida "sin restricciones" hasta las comparaciones personalizadas. Aprendí a diseñar el demo alrededor del momento que hace que un stakeholder acepte una propuesta, y construir todo lo demás para cumplir su objetivo.

Trabajo seleccionado

WinItAll · una app rediseñada en cuatro semanas

→

Trabajo seleccionado

Software para la logística de crudo de un país

→