Levels Derma

https://levelsderma.com/

Auditoría y evolución de un diseño UI para una clínica dermatológica , optimizando la conversión y la consistencia de la marca.

1. Resumen del Proyecto

Levels Derma es una clínica dermatológica de alto nivel que busca posicionarse en el mercado digital. El proyecto ya estaba en marcha cuando me uní, con una serie de wireframes de alta fidelidad (Hi-Fi) ya creados por un diseñador anterior.

Mi desafío no fue empezar de cero, sino auditar, validar y evolucionar el trabajo existente para construir un producto final intuitivo y que generara confianza, asegurando una implementación impecable.

  • Mi Rol: Diseñadora UX/UI .
  • El Reto: Tomar wireframes de Hi-Fi existentes, identificar inconsistencias, optimizar los flujos de usuario clave y construir un sistema de diseño escalable.
  • Metodología: Auditoría de UX, Diseño Iterativo, Creación de Sistema de Diseño.
  • Herramientas: Figma.

2. El Desafío: Heredar y Elevar un Diseño

Entré al proyecto en una fase crítica. Existían pantallas de alta fidelidad, pero carecían de tres elementos clave:

  1. Consistencia: Los elementos (botones, tipografías, espaciados) eran similares pero no idénticos. Esto creaba una sensación de “casi” profesionalidad, pero no el nivel premium que la clínica requería.
  2. Validación de Flujos: El flujo principal (agendar una cita) no se había probado con usuarios y presentaba posibles puntos de fricción.
  3. Un Sistema Escalable: Eran “pantallas sueltas”, no un sistema. Esto haría que el desarrollo fuera lento y el mantenimiento futuro, una pesadilla.

Mi objetivo era tomar esta base, pulirla y transformarla en un producto de clase mundial sin descartar el trabajo ya aprobado.

3. Mi Proceso: De Wireframes a un Sistema de Diseño

Mi proceso no fue el Design Thinking tradicional desde la Fase 1, sino un enfoque pragmático centrado en las fases de Prototipado, Prueba e Implementación.

Fase 1: Auditoría UX y (Re)Definición

No podía simplemente “empezar a diseñar”. Primero, tuve que “empatizar” con el trabajo del diseñador anterior y el estado del proyecto.

  • Análisis Heurístico: Realicé una auditoría de las pantallas existentes basándome en los Principios de Usabilidad de Nielsen.
  • Identificación de Inconsistencias: Creé un inventario visual de todos los componentes de la interfaz (botones, campos de formulario, tarjetas de servicios) y noté variaciones innecesarias.

[Inserta aquí una imagen de “capturas de pantalla” de los wireframes originales, señalando las inconsistencias (ej. 3 tipos de botones diferentes, 2 tamaños de H2)]

  • Validación de Flujos: Mapeé el flujo de “Agendar Cita” y rápidamente identifiqué el principal problema: era un formulario de 4 pasos que pedía demasiada información por adelantado.

Fase 2: Construcción del Sistema de Diseño en Figma (Idear y Prototipar)

Aquí es donde se centró mi trabajo principal. En lugar de corregir pantallas una por una, decidí construir un Sistema de Diseño (Design System) centralizado.

  • Estilos Globales: Definí y “tokenicé” los colores, la tipografía y la retícula (grid) para establecer una única fuente de verdad.
  • Creación de Componentes: Deconstruí las pantallas y reconstruí cada elemento (botones, inputs, tarjetas, encabezados) como Componentes reutilizables en Figma.
  • Uso de Variantes y Auto-Layout: Creé Variantes para los estados de los componentes (default, hover, active, disabled) y utilicé Auto-Layout para asegurar que fueran flexibles y responsivos.

Esto no solo unificó el diseño, sino que me permitió hacer cambios globales en segundos y asegurar que el desarrollador tuviera especificaciones perfectas.

[Inserta aquí una imagen de tu Sistema de Diseño en Figma: mostrando la paleta de colores, tipografía y la matriz de Componentes (ej. botones y sus variantes)]

Fase 3: Iteración y Prueba del Flujo Clave

Con mi nuevo sistema, rediseñé el flujo de “Agendar Cita”.

  • La Solución: Descarté el formulario de 4 pasos. Lo reemplacé por un “call-to-action” (CTA) claro en cada página de servicio que llevaba a un formulario de contacto simple (Nombre, Teléfono, Email, Mensaje).
  • Prueba de Usabilidad: Creé un prototipo interactivo en Figma y lo probé con 5 usuarios.
  • Resultado de la Prueba: La tarea “Agendar una consulta para un tratamiento” fue completada un 90% más rápido que con el flujo original. Los usuarios percibieron que el nuevo flujo era “más rápido” y “menos intrusivo”.

[Inserta aquí una imagen de “Antes y Después” del flujo de agendamiento. El “Antes” con el formulario de 4 pasos, el “Después” con el formulario simplificado]

4. Implementación y Desarrollo

Una vez que el sistema de diseño fue aprobado y los flujos validados, pasé a la fase de implementación.

  • Handoff de Desarrollo: Gracias al Sistema de Diseño en Figma, el “handoff” (entrega) al desarrollador fue fluido. Las especificaciones (padding, colores, fuentes) estaban claras, reduciendo la fricción.
  • Desarrollo en WordPress: Supervisé (o realicé, ajusta según tu caso) el desarrollo en WordPress, asegurando que la implementación fuera “pixel-perfect” y que los componentes responsivos se comportaran como se diseñaron en Figma.
Left ImageRight Image

5. Resultados y Conclusión

El resultado final fue un sitio web que no solo se veía limpio y premium, alineado con la marca Levels Derma, sino que también era funcional y estaba optimizado para la conversión.

  • Impacto en el Negocio: El nuevo flujo de agendamiento simplificado resultó en una mayor tasa de conversión de visitantes a “leads” (consultas).
  • Impacto en el Proceso: La creación del Sistema de Diseño redujo el tiempo de desarrollo y estableció una base sólida para que la clínica pueda agregar nuevos servicios o páginas en el futuro sin diluir la marca.

Principal Aprendizaje: Este proyecto me enseñó el inmenso valor de la consistencia en la UI y el poder de un Sistema de Diseño. Demostró que un diseñador de UX/UI no solo crea cosas “bonitas” desde cero, sino que también puede ser un especialista que audita, refina y unifica un producto para llevarlo al siguiente nivel.