No se trata solo de que un sitio web se vea «bonito». En nuestro último webinar, el equipo de diseño de Gatblac explica cómo el UX (Experiencia de Usuario) y el UI (Interfaz de Usuario) trabajan en conjunto para resolver problemas reales, aumentar la retención de clientes y convertir el diseño en una ventaja competitiva medible para cualquier empresa. 

¿Por qué el diseño es una decisión estratégica? 

A menudo, las empresas cometen el error de pensar en el diseño solo al final del desarrollo, como una capa estética. Sin embargo, un mal diseño se paga caro: funcionalidades mal pensadas, usuarios frustrados y pérdidas económicas por retrabajos en el código. 

Como explicó Josselyn Cisternas, líder del equipo UX/UI en Gatblac, el diseño centrado en el usuario no es una moda, sino una herramienta para alinear los objetivos del negocio con las necesidades de las personas. Integrar UX desde el inicio permite reducir errores, aumentar la tasa de conversión y mejorar la percepción de confianza y profesionalismo de la marca. 

UX vs UI: Entendiendo la diferencia con el caso del Ketchup 

Para que un producto digital sea exitoso, debe equilibrar dos conceptos que suelen confundirse: 

• UX (User Experience): Es cómo se siente la persona al usar el producto. Es la funcionalidad, la intuición y la resolución de la necesidad (e.g., lo fácil que es encontrar una serie en Netflix). 

• UI (User Interface): Es cómo se ve y cómo se interactúa visualmente. Incluye colores, botones, tipografías e iconos. 

El ejemplo clásico es la botella de Ketchup: la versión antigua de vidrio tenía un gran UI (se veía elegante en la mesa), pero un UX pésimo (era difícil sacar el producto). La botella invertida de plástico resolvió el problema de experiencia sin perder la identidad visual, demostrando que un buen diseño debe ser, ante todo, funcional. 

El Proceso UX: 6 pasos para diseñar con intención 

En el webinar, Consuelo Valenzuela detalló la metodología que utilizamos en Gatblac para transformar ideas en experiencias significativas, tomando como ejemplo real el sitio web de Lara Suite: 

1. Clientes y Objetivos: Alineamos las metas del negocio. En Lara Suite, se definió la necesidad de un sitio propio para posicionar el producto. 

2. Discovery e Investigación: Entrevistas y análisis para detectar dolores reales del usuario. 

3. Arquitectura y Prototipado: Definimos la estructura y creamos wireframes para visualizar el flujo antes de poner color. 

4. Feedback y Pruebas Iterativas: Revisión constante con el cliente para corregir errores temprano. 

5. Diseño de Alta Fidelidad: Aplicamos la capa visual final, branding y componentes interactivos. 

6. Entrega y Acompañamiento: Facilitamos la implementación técnica trabajando codo a codo con los desarrolladores. 

Figma: Colaboración en tiempo real 

Durante la demo práctica liderada por Daniela Salgado, vimos cómo herramientas como Figma facilitan la comunicación fluida. Gracias a su capacidad multisesión, los clientes pueden dejar comentarios directamente sobre las vistas, lo que acelera los tiempos de aprobación y asegura que todos estén alineados. 

Vimos la evolución de una pantalla desde un wireframe de baja fidelidad (estructural) hasta uno de alta fidelidad, donde las animaciones e interacciones permiten al cliente «sentir» el producto final antes de que se escriba una sola línea de código. Corregir en esta etapa es mucho más económico y rápido que rediseñar un producto ya implementado. 

Conclusión 

Diseñar escuchando al usuario es lo que diferencia a una herramienta común de una experiencia que marca la diferencia en el mercado. Si quieres profundizar en cómo aplicamos estas herramientas, los detalles de la demo en Figma y las respuestas a las preguntas de nuestra audiencia sobre adaptabilidad móvil e IA en el diseño, te invitamos a ver la transmisión completa.