Brote | Diseño UI de app mobile
Una interfaz gamificada para cultivar hábitos sostenibles con impacto positivo
Tipo de proyecto: Conceptual
Duración del proyecto: Junio 2025
El punto de partida
La propuesta de esta app surge de una inquietud concreta: ¿Cómo podemos hacer que el cuidado del ambiente se sienta cotidiano, cercano y motivador para personas que quieren incorporar hábitos sostenibles en su día a día?
Inspirada en recursos de educación ambiental, bienestar digital y dinámicas de gamificación, imaginé una app que guíe y acompañe al usuario a través de pequeños gestos, aprendizajes y acciones cotidianas.
El corazón conceptual del proyecto es “Brote”, una narrativa donde el usuario es representado por una semilla que crece a medida que reduce su huella ecológica, incorpora conocimientos y mantiene sus hábitos.
La app busca transmitir esa transformación desde una experiencia visual amable, emocional y clara.
El desafío
Diseñar una interfaz mobile que refleje calidez, accesibilidad y motivación desde lo visual, con una identidad gráfica coherente, adaptable y estimulante.
El foco estuvo en construir un sistema visual sólido que guiara, motivara y recompensara al usuario a través de elementos gráficos consistentes y una narrativa visual clara.
Se integraron recursos de gamificación —como insignias, personajes y seguimiento de retos— pensados para resultar atractivos tanto para adolescentes como para personas adultas, sin caer en un tono infantil ni excesivamente serio.
El reto implicó balancear claridad, jerarquía y usabilidad en pantallas con alta densidad de contenido, sin perder la cercanía emocional ni el tono lúdico.
Mi rol
Me desempeñé como UI Designer en todas las etapas del proyecto.
Me enfoqué en:
Definir la identidad visual del producto (colores, tipografías, iconografía, tono).
Diseñar un sistema de componentes flexible basado en Atomic Design.
Crear las pantallas clave de la app, asegurando coherencia visual y experiencia fluida.
Explorar soluciones gráficas accesibles, gamificadas y motivadoras.
Documentar decisiones de diseño y su impacto en la experiencia general.
Por qué este proyecto
Este proyecto fue concebido como un estudio de diseño UI con foco en narrativa visual, gamificación y construcción de una identidad gráfica coherente.
A lo largo de mi recorrido como diseñadora freelance, trabajé en múltiples productos digitales, muchos de ellos bajo acuerdos de confidencialidad o formando parte de equipos de otros diseñadores.
Por eso, decidí desarrollar un proyecto conceptual que me permitiera mostrar con total libertad creativa mi estilo actual, mis decisiones visuales y mi enfoque en la construcción de experiencias visuales significativas.
Esta propuesta busca reflejar no solo habilidades técnicas, sino también sensibilidad estética, pensamiento sistémico y capacidad para diseñar interfaces en contextos donde UI, storytelling e impacto positivo se potencian mutuamente.
Exploración inicial
Antes de comenzar a delinear la interfaz, me detuve a entender quiénes podrían ser los usuarios de esta app y qué tipo de experiencia visual y funcional podría conectar con ellos.
Aunque este proyecto tiene un enfoque UI, esta etapa fue clave para aterrizar el concepto general y tomar decisiones visuales más informadas y empáticas.
Para guiar el diseño, trabajé con tres recursos fundamentales:
• Una proto-persona, que sintetiza necesidades, motivaciones y contexto de uso.
• Un benchmark compacto de apps similares o relevantes, enfocado en sus abordajes visuales, mecánicas de gamificación y tono.
• Un moodboard visual y variables de tono, que orientaron tanto el estilo gráfico como las elecciones de copy e interacción emocional.
Proto-persona
Se definió un perfil de usuario tipo para orientar decisiones visuales, tono y dinámicas de gamificación. Martina representa a personas jóvenes-adultas interesadas en llevar una vida más consciente y sostenible, que buscan experiencias visualmente atractivas, motivadoras y fáciles de incorporar a su rutina.
Analizando la competencia
Examiné brevemente algunas aplicaciones que combinan hábitos sostenibles, gamificación y visuales centrados en el usuario.
En particular, The Planet App y Earth Mission presentan propuestas temáticas alineadas, utilizando misiones y recompensas para fomentar comportamientos conscientes.
Por otro lado, Flora, Habitica y Duolingo demuestran cómo un diseño con microinteracciones, niveles y badges puede mejorar la motivación y retención en público joven-adulto.
A partir de estas referencias, el objetivo fue combinar lo mejor de ambos mundos: una UI clara, actual y atractiva, con mecánicas accesibles que refuercen comportamientos con impacto ambiental positivo.
Inspiración visual y tono
Para construir una experiencia visual coherente y emocionalmente conectada con el propósito de la app, desarrollé un moodboard como punto de partida.
Las imágenes seleccionadas reflejan una combinación de calidez, naturaleza, acción cotidiana y belleza visual simple.
Este enfoque fue clave para tomar decisiones de diseño visual —como la paleta cromática, las ilustraciones 3D y una tipografía clara pero expresiva—, manteniendo siempre un tono optimista y cercano.
Voz, tono y elementos emocionales
Diseñé una voz que se sintiera como un acompañamiento diario: amigable, clara y motivadora. Las frases buscan impulsar sin imponer, enseñar sin tecnicismos, y construir una experiencia que inspire acción positiva. El uso de emojis e ilustraciones 3D no fue decorativo, sino estratégico: refuerzan el contenido, aportan calidez, y hacen que la interfaz se sienta viva y cercana, sin interferir en la comprensión o la estética visual.
De la idea a la interfaz
Mi proceso de diseño comenzó con papel y lápiz, tanto por practicidad como por eficiencia. Esta etapa temprana me permitió iterar rápidamente sobre la estructura de las pantallas y tomar decisiones clave sin invertir tiempo ni recursos innecesarios en arte visual de alta fidelidad.
Este enfoque, simple pero estratégico, me ayuda a enfocar el diseño en lo que importa: contenido, flujo, intención y funcionalidad visual.
Relación entre pantallas
Para mostrar de forma clara cómo se interconectan las pantallas dentro de la app, diseñé una breve arquitectura de navegación.
Esto permite visualizar la lógica detrás de los módulos principales y cómo el usuario se desplaza entre retos, comunidad y contenidos.
Coherencia visual desde lo modular
Para asegurar consistencia y facilitar la evolución futura del diseño, organicé los principales componentes visuales siguiendo los principios de Atomic Design.
Si bien el proyecto no requería una implementación exhaustiva del sistema completo, este enfoque me permitió construir una base visual clara, escalable y fácil de mantener.
Se documentaron los elementos clave de los niveles atómico, molecular y algunos organismos, priorizando aquellos más representativos del sistema y su funcionalidad principal.
Pantallas finales: coherencia visual y claridad funcional
Esta selección de pantallas resume la identidad visual y la experiencia propuesta para la app. Cada decisión en cuanto a jerarquía, color, forma y composición fue pensada para facilitar la navegación, reforzar la motivación del usuario y sostener una estética clara, amigable y adaptable a distintos perfiles.
Diseño del onboarding
El onboarding fue diseñado para brindar una primera aproximación cálida, clara y motivadora a la experiencia de la app. A través de ilustraciones 3D y mensajes directos, busca enmarcar el propósito de la herramienta, reforzar el tono positivo y guiar al usuario sin fricciones desde el primer contacto.
Se priorizó una narrativa breve, con visuales atractivos y copy emocional, alineados con los valores y estilo visual del sistema UI.
Impacto visual y próximos pasos
El diseño está pensado para acompañar hábitos sostenibles de forma clara y atractiva. La estructura visual sostiene la experiencia desde lo funcional y lo emocional, combinando jerarquía, estímulo y simplicidad. En una posible implementación, algunos aspectos clave a evaluar con usuarios serían:
Claridad de la jerarquía visual en pantallas con alto contenido.
Facilidad para identificar y ejecutar acciones principales.
Efecto motivador de los recursos gráficos y tono general.
Legibilidad y contraste en distintos dispositivos y condiciones.
El sistema de componentes, construido bajo una lógica reutilizable, permite escalar o adaptar el diseño con consistencia, tanto en futuras funcionalidades como en posibles versiones para otros públicos o contextos.
Reflexiones sobre el enfoque visual y estratégico
Este proyecto consolidó una mirada de diseño centrada en la intención visual, el equilibrio entre estímulo y claridad, y la construcción de una narrativa estética coherente. Cada decisión —desde el uso de gamificación hasta la selección tipográfica o los recursos gráficos— estuvo alineada con el propósito de guiar, motivar y conectar emocionalmente con el usuario.
La combinación de diseño modular, tono accesible y estética cuidada permitió traducir una propuesta de impacto en una interfaz que comunica desde lo visual, motiva desde lo emocional y se sostiene desde la funcionalidad.
