Diego Alejandro Nicolas Martinez Chaves Portfolio CV

Mobile App UX Design React Native

CLOSET VIRTUAL

App innovadora para inventariar ropa del closet con avatar 3D interactivo, categorización inteligente y probador virtual que revoluciona la forma de organizar tu guardarropa.

5 Zonas Interactivas
4 Temporadas
3 Modos de Visualización
Closet Virtual - Interface Principal

Mi rol

UX Designer

Herramientas

Figma, Maze, Miro, Notion

Plataforma

Android & iOS

Estado

Prototipo Funcional

El contexto

Closet Virtual nace de la necesidad de organizar eficientemente la ropa del guardarropa y visualizar cómo combinan las prendas antes de vestirse.

El objetivo era crear una experiencia única que combine inventario inteligente con un probador virtual interactivo, utilizando tecnología móvil para revolucionar la forma en que las personas gestionan su ropa.

Investigación de Usuarios y Mercado

¿Quiénes son los más interesados en moda?

Fuente: Ipsos/Shein, 2024

¿Qué motiva la compra de moda?

Fuente: IBM, BCG, 2024

Usuario objetivo: "Sofía"

Avatar Sofía

Sofía · 26 años · Barcelona

  • Busca moda sostenible y personalización visual
  • Compra online con frecuencia y valora la experiencia digital
  • Quiere organizar su ropa y crear looks fácilmente
  • Demanda tallas inclusivas y experiencias táctiles
"Quiero un armario digital que combine mis looks según el clima, mi estilo y mis valores."

Necesidades Identificadas

  • Organización digital del guardarropa
  • Maximizar el uso de prendas actuales (sostenibilidad)
  • Experiencia visual e interactiva
  • Personalización y recomendaciones inteligentes

Oportunidades de Innovación

  • Probador virtual con avatar 3D
  • Categorización automática de prendas
  • Gestión visual y estadísticas del closet
  • Touch gestures y feedback instantáneo

Características principales y soluciones

Desarrollé 4 funcionalidades core que resuelven los principales pain points de organización y visualización de ropa.

01

Avatar 3D Interactivo

Innovación

Silueta humana realista con 5 zonas corporales clicables: cabeza, torso, chaqueta, piernas y pies. Cada zona permite seleccionar prendas específicas.

Implementación

  • SVG responsivo con zonas táctiles optimizadas
  • Sistema de capas para superposición natural de ropa
  • Feedback visual inmediato al tocar zonas
  • Colores dinámicos basados en la ropa real
5 Zonas interactivas
Avatar 3D Interactivo - Probador Virtual
02

Captura y Categorización Inteligente

Funcionalidad

Sistema completo de captura de fotos con formulario inteligente que categoriza automáticamente las prendas por tipo y temporada.

Características

  • Cámara integrada y selección desde galería
  • Categorización automática por zona corporal
  • Filtros por temporada (primavera, verano, otoño, invierno)
  • Metadata completa: marca, talla, color, notas

Sistema de cámara integrada

Auto-categorización inteligente

03

Gestión Visual del Inventario

Organización

Interface visual que permite ver, filtrar y gestionar toda la ropa del closet con estadísticas en tiempo real y búsqueda avanzada.

Funciones

  • Grid visual con fotos reales de las prendas
  • Filtros por categoría, temporada y color
  • Búsqueda por texto en tiempo real
  • Estadísticas del closet con métricas visuales

Gestión del Inventario

Interface visual con grid interactivo

Implementación Técnica

Desarrollé la app utilizando tecnologías modernas para asegurar performance y experiencia de usuario óptima en dispositivos móviles.

Frontend & UX

  • React Native con Expo para desarrollo rápido
  • SVG responsivo para avatar interactivo
  • Navegación optimizada con React Navigation
  • Gestos táctiles nativos para mejor UX

Backend & Data

  • SQLite local para persistencia de datos
  • AsyncStorage para configuraciones
  • Sistema de captura de imágenes optimizado
  • Compresión automática de fotografías

Resultados del Proyecto

5 Zonas Interactivas

Avatar 3D con cabeza, torso, chaqueta, piernas y pies completamente funcionales

100% Mobile Optimizado

Experiencia táctil perfecta para dispositivos móviles Android e iOS

4 Temporadas Cubiertas

Categorización completa por primavera, verano, otoño e invierno

Aprendizajes clave

UX Móvil Centrada en Gestos

La interactividad táctil debe ser intuitiva y responder inmediatamente. Los usuarios esperan feedback visual instantáneo en cada touch.

Simplicidad en la Complejidad

Aunque la funcionalidad es compleja (avatar 3D, capas, categorización), la interfaz debe mantenerse simple y accesible.

Performance es Crucial

Las imágenes y SVGs deben estar optimizados para no afectar la fluidez de la experiencia, especialmente en el avatar interactivo.

Próximos Pasos

El prototipo actual demuestra la viabilidad y potencial de la app. Los siguientes pasos incluyen desarrollo completo y testing con usuarios reales.

Fase 1: MVP Development

Desarrollo completo de las funcionalidades core en React Native para Android

Fase 2: User Testing

Testing extensivo con usuarios reales para validar usabilidad y mejoras

Fase 3: iOS & Features

Expansión a iOS y desarrollo de características avanzadas como compartir outfits

Diagrama de Flujo de la Aplicación

graph TD A[🚀 INICIO - Splash Screen] --> B{¿Primera vez?} B -->|Sí| C[📋 Onboarding] B -->|No| D[🏠 Dashboard Principal] C --> C1[👋 Bienvenida] C1 --> C2[📸 Tutorial Cámara] C2 --> C3[👕 Tutorial Categorías] C3 --> C4[🎨 Tutorial Vestidor] C4 --> D D --> E{Acción del Usuario} E -->|Ver Inventario| F[📦 Mi Closet] E -->|Crear Outfit| G[👤 Vestidor 3D] E -->|Agregar Ropa| H[📸 Captura] E -->|Configurar| I[⚙️ Ajustes] %% FLUJO MI CLOSET F --> F1[📋 Lista de Prendas] F1 --> F2{¿Qué hacer?} F2 -->|Ver Detalle| F3[🔍 Vista Detalle] F2 -->|Filtrar| F4[🏷️ Filtros] F2 -->|Buscar| F5[🔍 Búsqueda] F2 -->|Eliminar| F6[🗑️ Confirmar Borrar] F2 -->|Editar| F7[✏️ Editar Prenda] F3 --> F8[📊 Info Completa] F4 --> F1 F5 --> F1 F6 --> F1 F7 --> F1 %% FLUJO VESTIDOR 3D G --> G1[👤 Avatar Base] G1 --> G2{¿Zona Tocada?} G2 -->|Cabeza| G3[🎩 Selector Sombreros] G2 -->|Torso| G4[👕 Selector Camisas] G2 -->|Chaqueta| G5[🧥 Selector Chaquetas] G2 -->|Piernas| G6[👖 Selector Pantalones] G2 -->|Pies| G7[👟 Selector Zapatos] G3 --> G8[✨ Vista Previa] G4 --> G8 G5 --> G8 G6 --> G8 G7 --> G8 G8 --> G9{¿Confirmar?} G9 -->|Sí| G10[💾 Guardar Outfit] G9 -->|No| G1 G9 -->|Compartir| G11[📱 Compartir Look] %% FLUJO CAPTURA H --> H1{¿Cómo agregar?} H1 -->|Cámara| H2[📸 Tomar Foto] H1 -->|Galería| H3[🖼️ Seleccionar Imagen] H2 --> H4[✂️ Recortar/Editar] H3 --> H4 H4 --> H5[📝 Formulario Datos] H5 --> H6[📋 Completar Info] H6 --> H7{¿Datos OK?} H7 -->|Sí| H8[💾 Guardar Prenda] H7 -->|No| H6 H8 --> H9[✅ Confirmación] H9 --> F %% FLUJO AJUSTES I --> I1[👤 Perfil Usuario] I1 --> I2[🔔 Notificaciones] I2 --> I3[🌙 Tema/Colores] I3 --> I4[💾 Backup/Sync] I4 --> I5[❓ Ayuda/Tutorial] %% NAVEGACIÓN GLOBAL F --> D G --> D H --> D I --> D %% ESTILOS classDef startEnd fill:#4ade80,stroke:#22c55e,stroke-width:3px,color:#fff classDef process fill:#3b82f6,stroke:#2563eb,stroke-width:2px,color:#fff classDef decision fill:#f59e0b,stroke:#d97706,stroke-width:2px,color:#fff classDef important fill:#ef4444,stroke:#dc2626,stroke-width:2px,color:#fff classDef feature fill:#8b5cf6,stroke:#7c3aed,stroke-width:2px,color:#fff class A startEnd class D,F,G,H,I startEnd class B,E,F2,G2,G9,H1,H7 decision class C,F1,G1,H2,H3,H4,H5,H6,H8,I1 process class G10,G11,H9 important class F3,F4,F5,G3,G4,G5,G6,G7 feature