UX/UI

GRAPERTE

Sector
AgroTech
Año
2025
Etiquetas
Trazabilidad · Blockchain · IA Visual · Tokenización

Servicio de trazabilidad

Diseño de una plataforma para mejorar la trazabilidad de productos del sector vitivinícola. El proyecto combina blockchain, visión artificial e integración de datos para reunir toda la información del producto en un mismo lugar y facilitar su consulta y verificación.

MI ROL

Arquitectura de la información
Flujos de usuario
Wireframes
(LOW TO HIGH FIDELITY)
Prototipo final
(INTERACTIVO)
Handoff

¿Qué hacía difícil este proyecto?

Detrás del proyecto había mucha complejidad técnica. Mi trabajo consistió en traducirla a una experiencia clara, intuitiva y fácil de usar para cualquier perfil de usuario.

Capturar correctamente la etiqueta

El reconocimiento mediante IA dependía de la calidad de las fotografías. La interfaz debía guiar al usuario para obtener imágenes válidas sin complicar un proceso que debía sentirse rápido y natural.

Entender la trazabilidad del producto

La aplicación mostraba todo el recorrido del producto, desde su origen hasta su certificación. El reto estaba en presentar esa información de forma clara, sin abrumar al usuario con datos innecesarios.

Combinar automatización e intervención manual

No toda la información podía ser detectada automáticamente por la IA. La experiencia debía permitir completar los datos que faltaban de forma sencilla, sin romper el flujo de uso.

Diseñar para cualquier perfil de usuario

La herramienta debía ser igual de útil para personas con experiencia tecnológica que para usuarios de 70 u 80 años. Cada decisión buscó reducir la curva de aprendizaje y facilitar el uso desde el primer momento.

DE LA IDEA A LA SOLUCIÓN

Cada decisión de diseño tuvo un mismo objetivo: transformar conceptos técnicos en una experiencia clara e intuitiva para usuarios con distintos niveles de conocimiento.

1.

Definir arquitectura de la información

Organicé el contenido y definí la estructura del producto para facilitar la navegación y que cada usuario encontrara lo que necesitaba sin esfuerzo.

2.

Iterar flujos de usuarios

Los recorridos se diseñaron para reducir pasos innecesarios y facilitar las tareas más importantes del producto.

3.

Crear wireframes

Convertí las necesidades del proyecto en primeras propuestas de interfaz, priorizando la funcionalidad antes de trabajar el diseño visual.

4.

Prototipar la solución

Validé la experiencia con un prototipo interactivo que permitió detectar mejoras e iterar la solución antes de su desarrollo.

5.

Preparar handoff

Documenté la solución y acompañé al equipo de desarrollo para asegurar una implementación fiel al diseño durante todo el proceso.

RESULTADO FINAL

Flujo principal

Happy path

Captura de varias fotografías

Edición manual de la información

En caso de que el reconocimiento mediante IA falle

Trazabilidad clara y visual

UI KIT

Se definió un sistema de componentes reutilizable para mantener la coherencia visual, facilitar el desarrollo del producto y pensando en la escalabilidad del producto y proyecto. Esta es solo una parte del kit:

Spacing

Scale

NamePixelsScale
XS4px
S8px
M16px
L24px
XL32px
2XL40px
3XL48px
4XL56px

Horizontal spacing

Pixels

XS

S

M

L

XL

XXL

Name

4px

8px

16px

24px

32px

40px

Vertical spacing

Name

Pixels

XS

4px

S

8px

M

16px

L

24px

XL

32px

2XL

40px

3XL

48px

4XL

56px

Icons

Iconos del UI KIT

Border Radius

.rounded-none
(0px)
.rounded-M
(8px)
.rounded-L
(16px)
.rounded-XL
(24px)
.rounded-full
(50%)
TIP: Corner radius space
Buttonsinputs

Más sobre el proyecto

Si quieres profundizar en el proyecto, aquí encontrarás más información sobre la iniciativa y la tecnología que hay detrás.