Concepto de Delivery: Diseñando una experiencia de pedido desde la identidad de marca
Un caso de estudio sobre la creación de un concepto de delivery con Vite, JavaScript vanilla y un enfoque fundamental en la experiencia de usuario.
💡 La Idea: El Problema que Quería Resolver
El mercado de las aplicaciones de delivery está saturado, pero muchas de ellas se sienten clónicas, funcionales pero sin alma. La experiencia de usuario, aunque funcional, a menudo carece de una identidad de marca fuerte que genere lealtad o una conexión emocional con el usuario.
Me pregunté: ¿Y si una app de delivery pudiera ser tan reconocible y agradable de usar como tu marca favorita? ¿Qué pasaría si el proceso de diseño comenzara con la creación de una marca sólida y dejara que esa identidad guiara cada decisión de UI y UX?
De esa idea nació este proyecto: un concepto para una aplicación de delivery desarrollado desde cero, donde la marca no es un añadido, sino el núcleo de una experiencia de usuario intuitiva, rápida y memorable.
✨ Características Principales
- 🎨 Identidad Visual Completa: El proyecto comenzó con la creación de una marca desde sus fundamentos: diseño de logo, selección de tipografía y definición de una paleta de colores distintiva.
- ➡️ Flujo de Pedido Optimizado: Un proceso de pedido de tres pasos (selección, personalización, pago) diseñado para minimizar la fricción y la carga cognitiva del usuario.
- 🚀 Rendimiento Excepcional: Construido intencionadamente con JavaScript vanilla y Vite para garantizar tiempos de carga casi instantáneos y una interacción fluida, demostrando que una gran experiencia no siempre requiere un framework pesado.
- 📱 Diseño Mobile-First: La interfaz fue concebida y diseñada primero para dispositivos móviles, asegurando una experiencia perfecta en el contexto de uso más común para una app de delivery.
🛠️ De la Idea al Código: Retos y Soluciones de Ingeniería
El principal reto no fue técnico, sino de disciplina de diseño: ¿cómo dejar que la marca dicte la funcionalidad y no al revés?
El Reto de un Diseño Guiado por la Marca
En lugar de empezar con wireframes de funcionalidades, empecé con un moodboard y bocetos del logo. La identidad visual (amigable, moderna, eficiente) se convirtió en la guía para cada componente. Los botones, las tarjetas de producto y las transiciones no solo tenían que funcionar bien, sino que debían “sentirse” como parte de la marca.
La solución fue un proceso iterativo:
- Definir la personalidad de la marca.
- Crear los activos visuales clave (logo, colores).
- Diseñar los componentes de UI aplicando esa identidad.
- Construir los wireframes y prototipos usando esos componentes.
¿Por qué JavaScript Vanilla en un Mundo de Frameworks?
La elección de no usar React, Vue o Angular fue deliberada. Para un concepto centrado en la UI/UX y el rendimiento del frontend, quería demostrar el poder de las herramientas web fundamentales.
- Control Total: Usar JavaScript vanilla me dio un control absoluto sobre el DOM y el rendimiento, sin la sobrecarga de un virtual DOM o un estado complejo.
- Velocidad de Carga: El resultado es una aplicación increíblemente ligera. Vite proporcionó un entorno de desarrollo moderno y rapidísimo, pero el producto final es solo HTML, CSS y JS puro, optimizado para la velocidad.
- Enfoque en los Fundamentos: Este proyecto fue un ejercicio para reforzar y demostrar un dominio de los pilares de la web, una habilidad crucial para cualquier desarrollador frontend.
🚀 Mi Rol en el Proyecto
Como único creador de este concepto, mis responsabilidades abarcaron todo el espectro del diseño y desarrollo de producto:
- Diseño de Marca (Branding): Creé la identidad visual completa, incluyendo el logo, la paleta de colores y la guía de estilo.
- Diseño de UI/UX: Diseñé todas las pantallas y flujos de usuario, desde la página de inicio hasta la confirmación del pedido, creando prototipos de alta fidelidad.
- Desarrollo Frontend: Traduje los diseños a código funcional y performante utilizando HTML5, CSS3 y JavaScript vanilla, empaquetado con Vite.
🤔 Reflexión y Aprendizaje
- La Marca es la Experiencia: Este proyecto solidificó mi creencia de que una buena UX comienza mucho antes del primer wireframe. Comienza con la pregunta: “¿Qué queremos que sientan nuestros usuarios?”.
- La Simplicidad es Rendimiento: Demostró que no siempre se necesita la herramienta más compleja para el trabajo. Para aplicaciones donde la interacción es clave y el estado es manejable, volver a los fundamentos puede ofrecer una experiencia de usuario superior.
- El Diseño y el Código son Dos Caras de la Misma Moneda: Mi capacidad para diseñar la marca y luego implementarla directamente me permitió mantener una visión coherente de principio a fin, sin que nada se perdiera en la traducción entre un diseñador y un desarrollador.
Construido con ❤️ por Yamir Alejandro Rodas Elvir