Ka$h— Auditoría de UI/UX
(estudio de caso descriptivo)
Kash es una tienda digital orientada a la venta de vapers, líquidos y accesorios relacionados, con una identidad visual nocturna, saturada en tonos morados, magenta y neón, dirigida a un público joven-adulto familiarizado con e-commerce.
Contexto de la marca
Kash es una tienda digital orientada a la venta de vapers, líquidos y accesorios relacionados, con una identidad visual nocturna, saturada en tonos morados, magenta y neón, dirigida a un público joven-adulto familiarizado con e-commerce.
Categoría / sector: E-commerce vertical — retail especializado (vapeo / lifestyle).
Público objetivo: Adultos de 18–35 años, usuarios frecuentes de vapeo, que compran por catálogo visual y valoran variedad de sabores/colores.
Propuesta de valor
- Catálogo altamente visual, organizado por colecciones estacionales (“Color de verano”).
- Filtro rápido por categoría de producto: Equipos, Líquidos, Weed, Vapes.
- Exploración alternativa por color de producto, más allá del filtro tradicional por categoría o precio.
- Refuerzo de confianza mediante testimonios y una sección explícita de “por qué comprar aquí”.
Diseño del prototipo UI
El prototipo fue diseñado en Figma como layout responsive mobile-first (375px), con 9 secciones principales en una sola página de scroll continuo (long-scroll landing + catálogo).
Arquitectura de la información
Mapa de la estructura real del prototipo, extraído directamente del archivo de Figma. Representa el orden y jerarquía de secciones tal como existen hoy — no una reestructuración propuesta.
Nivel | Sección | Contenido / función |
01 | Navbar | Logo Kash + acceso a menú (icono hamburguesa). |
02 | Hero | Banner de campaña estacional (“Color de verano”) con CTA “Colecciones” + 2 tarjetas de producto destacado. |
03 | Destacados | Bloque de transición con copy de marca y CTA secundario “Ver Novedades”. |
04 | Tendencias | Catálogo filtrable por pestañas: Equipos · Líquidos · Weed · Vapes · [+ filtro adicional]. Grid de tarjetas de producto con imagen, nombre, rango de precio (COP) e ícono de favorito. |
05 | Explora por colores | Selector alternativo de navegación por color de producto (9 opciones: rojo pastel, verde lima, azul marino, blanco, azul cielo, morado, rosa, amarillo, verde oscuro). |
06 | Testimonios | Cita de cliente con nombre, ocupación y frase de respaldo sobre experiencia de compra. |
07 | Servicio (“¿Por qué comprar en nuestra tienda?”) | 3 pilares de confianza con ícono + texto: atención al pedido, servicio al cliente, calidad del producto. |
08 | Blog | Contenido editorial/publicitario con imagen, título, cuerpo y CTA. |
09 | Footer | Cierre de página (componente instanciado — navegación secundaria, legal, contacto). |
Recorrido del prototipo
(walkthrough as-is)
Descubrimiento → Exploración → Evaluación → Reserva → Preparación → Experiencia → Fidelización
1 Navbar
Barra superior minimalista: logo a la izquierda, ícono de menú (hamburguesa) a la derecha. No expone categorías ni buscador en el nivel superior — toda la navegación secundaria queda detrás del menú.
2 Hero — "Color de verano"
Banner de campaña con título de dos líneas, subtítulo de apoyo (“Más de 100 colecciones para inspirarte en la época de verano”) y CTA único “Colecciones” sobre fotografía de producto con iluminación neón. Debajo, dos tarjetas de producto destacado (Yellow Flip 2, Casual Comfort) a modo de accesos directos visuales.
3 Destacados
Bloque corto de transición: título “Destacados”, copy de apoyo sobre variedad de combinaciones, y CTA “Ver Novedades” que conduce presumiblemente al catálogo completo.
4 Tendencias
Núcleo del catálogo. Filtro por pestañas (Equipos, Líquidos, Weed, Vapes + una quinta opción) seguido de un grid de tarjetas de producto en formato mixto (2 columnas / 1 columna ancha alternadas). Cada tarjeta muestra imagen, nombre del producto, rango o valor de precio en pesos colombianos, e ícono de “favorito” (corazón) superpuesto sobre la imagen.
5 Explora por colores
Sistema de navegación alterno a la categoría tradicional: 9 chips con muestra circular de color + nombre (RED PASTEL, LIME GREEN, NAVY BLUE, CLEAN WHITE, BLUE SKY, PURPLE, PINK, YELLOW, DARK GREEN), dispuestos en grid de ancho variable según longitud del texto.
6 Testimonios
Sección de prueba social sobre imagen de fondo a página completa: encabezado “Qué dice la gente de nosotros”, cita textual de una clienta (Simona Sánchez, diseñadora de modas) sobre la experiencia de compra y empaque.
7 "¿Por qué comprar en nuestra tienda?" (Servicio)
Tres bloques verticales, cada uno con ícono + título + párrafo de respaldo: “Lo hacemos con amor” (cuidado del pedido), “Servicio al cliente amigable” (canal de chat), “Productos de calidad” (condiciones de entrega).
8 Blog
Bloque editorial con imagen, encabezado, cuerpo de texto y CTA — utilizado aparentemente como contenido de marca / publicidad más que como blog informativo puro.
9 Footer
Componente instanciado (no expandido en este análisis de nivel de página) que cierra la experiencia con navegación secundaria.