Talento Tech

Diseño UX/UI

Comisión:25030

Colque Gabriela

JUL 2025

Proyecto-final

UI

Compras más eficientes y

más ecológicas

WIREFRAMES A MANO

LOGIN

INICIO

PRODUCTOS

FILTRAR

CONFIRMAR COMPRA

COMPRAR

WIREFRAMES DIGITALES

LOGIN

INICIO

PRODUCTOS

FILTRAR

CONFIRMAR COMPRA

COMPRAR

MATERIAL DESIGN

Márgenes: 16dp

NUESTRO DISEÑO

Calles:

8dp mínimo (o múltiplos de 8)

Elementos para hacer tap: 48dp mínimo.

​

​

OBJETIVOS

Columnas -

�Márgenes -�

Calles -

Columnas: 1, 2, 3 o 4

Elementos pequeños:

24x24 dp mínimo.

WIREFRAMES CON PATRONES

LINK

LOGIN

INICIO

PRODUCTOS

FILTRAR

CONFIRMAR COMPRA

COMPRAR

+

Diapositivas

GUIDELINES

​

ELEMENTOS PRINCIPALES

BARRA DE NAVEGACIÓN

Menú Inferior

ICONOS

Usuario - Notificaciones -

Menú - Buscar - Atrás

IMÁGENES

Carrousel - Grid Uniforme

BOTONES

Novedades - Comprar

Esta nueva estructura de la aplicación se alinea mejor a las necesidades de nuestros usuarios, siendo más intuitiva y amigable.

​

Sigue los siguientes Principios:

​

ESTRUCTURA UI - MD3 -

• Personalización: Colores generados a partir de la paleta del usuario (Dynamic Color).
• Accesibilidad: Contraste mínimo de 4.5:1 para texto (WCAG).
• Movimiento natural: Transiciones fluidas y respuestas táctiles realistas.
• Jerarquía visual: Uso de tipografía, componentes y espaciado consistente (8dp grid).

​

INSPIRACIÓN ESTÉTICA

• Papel y tinta: Metáfora de capas (elevación por superposición).
• Arte moderno: Uso de colores vibrantes pero equilibrados

UX

​

PROXIMIDAD

​

FITTS

EFECTO

VON

RESTORFF

Agrupación por cercanía.

​

• Proximidad
• Similitud
• Continuidad
• Cierre
• Conectividad

Distinción

=

Punto de Atención

Tamaño = Precisión

PRUEBAS DE USABILIDAD

​

ESCENARIO

HIPOTÉTICO

REMOTO

Sos una persona en búsqueda de alimentos certificados y decidís bajarte RecreApp©. Vamos a conectarte directamente con negocios y tiendas de tu comuna que ofrecen alimentos frescos, locales, orgánicos y de nicho (como veganos, sin gluten, fermentados etc).

Vas a poder acceder a opciones reales cerca de tuyo, con certificaciones, totalmente confiables en todos los aspectos: desde su producción hasta su distribución a tus manos.

​

Al abrir la app por primera vez, quieres verificar rápidamente si los productos son realmente orgánicos y comparar opciones según tus valores (sustentabilidad, agroecología, ecopackaging, etc)

Mid-Fi

PLAY

Archivo en

FIGMA

PRUEBAS DE USABILIDAD

​

1. Registrarse en la aplicación, mediante el formulario de Registro.
2. Buscar producto
3. Realizar compra

• Valeria Soto - 24- Vegana.
• Diego Mendoza - 31- Intolerante a la lactosa.
• Camila Ríos - 29- Vegetariano.
• Andrés López - 45- Deficiencia de Calcio.
• María González - 38- Interés en producción local.

Usuarios

Tareas

MÉTRICAS

Lado A

Antes de la Prueba

—>CUESTIONARIO

El 60% de nuestros usuarios demuestra tener un hábito por adquirir productos orgánicos o de nicho con frecuencia. Lo que corrobora que son aptos para proceder con el resto de la encuesta, consolidando el perfil de la App

Necesitan saber los beneficios nutricionales, su precio y alguna validacion respecto de su procedencia -en este orden.

Es decir qué quieren que lo que se dice en la etiqueta sea la verdad.

MÉTRICAS

Lado B

70% DE EFICACIA

EN LA FUNCIONALIDAD

Después de la Prueba

El 60% cree que la app se adapta a sus necesidades.

Super sencillo realizar la compra.

Al 60% le resultó fácil entender la app.

Al 100% le resultó cómoda la navegación entre pantallas.

Al 60% le resultó sencillo encontrar los elementos que buscaban.

CONCLUSIONES

​

​

Prioridad ALTA

• Tener maneras de envio o retiro claras disponibles después de la compra.
• Pantallas más claras para las distintas metodologías de pago disponibles hoy en dia.
• Actualizaciones más a disposición del comprador respecto del estado y sitio de su compra.

​

Prioridad MEDIA

• Mantener simpleza en la compra y sus pasos.
• Mantener un número de filtros que no abrume al usuario.
• Mantener interacciones más orgánicas del usuario con la app.

​

Prioridad BAJA

• Morfología de botonera más acorde al copy.
• Pasaje entre pantallas.
• Retocar pasos en el proceso de ingreso.

​

Recomendaciones Generales:

Futuras modificaciones en el prototipo:

COLOR

SELECCIÓN

Psicología del color + Guidelines

Color Primario

#131313

Color Secundario

#fb8c00

Color Acento

#4caf50

COMBINACIÓN

PERFECTA

​

Balance entre

energía (naranja) y

estabilidad (verde).

VALORES CLAVE

​

• Energía
• Confianza
• Crecimiento sostenible

TIPOGRAFÍA

Aa

Aa

Títulos

Recuperar cuenta

Subtítulos

Finalizar compra

Link

+ info

Body

Esta empresa se encuentra

Botones

Deslactosado

Source Serif Pro

Bold

Medium

Regular

36px

24px

14px:

16px:

18px

Se seleccionó la siguiente tipografía para dar un tono más tradicional y elegante. Este proporciona un corte con los estilos que se venían manejando por otros representantes del nicho, brindándole una identidad más distintiva.

Roboto es una tipografía sans-serif, creada por Google, conocida por su versatilidad y legibilidad en diversos contextos digitales. De estructura geométrica con curvas amigables, fácil de leer. Ampliamente utilizada en interfaces.

Source Serif Pro

Source Serif Pro

EVOLUCIÓN

Proceso en

FIGMA

Prototipo

¿Tenes una fuerte motivación por reducir tu impacto ambiental con tus compras?

RecreApp es la aplicación para personas como vos, las que valoran la transparencia y desean que las plataformas les ofrezcan productos verificados y con certificaciones claras.

LA PLATAFORMA QUÉ EL MUNDO Y VOS ESTABAN ESPERANDO