Diseño UI/UX

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. 

Prototipo
Si tienes una cuenta en figma acá podrás ver el prototipo del proyecto.
Desarrollo de la marca
Así fué la manera en que se desarrolló la marca y su resultado final.
Guía de estilos
Estas fueron las normas visuales y de comunicación de la marca.

Resumen ejecutivo

Propuesta Digital

Propuesta digital enfocada en
E-commerce de Vapers premium

Analisis de la marca Kash, apoyado en los resultados de investigación ya obtenidos (pruebas de usuario, analítica o retroalimentación cualitativa).

Contexto

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

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 UI

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

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). 

Prototipo

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.