Diseño UX/UI
Rediseño de la página de inicio de BrumBee Finance
Contexto
BrumBee es una plataforma SaaS que reúne distintos productos orientados a la gestión empresarial. Como parte de la evolución de la experiencia de usuario, se planteó mejorar la página de inicio del producto BrumBee Finance, estableciendo una base visual y funcional que pudiera servir como referencia para futuras implementaciones en el resto del ecosistema.
El objetivo fue crear una interfaz más clara, moderna y consistente con el sistema de diseño de la plataforma, facilitando el acceso a la información y a las funcionalidades principales.
Objetivo
Diseñar una nueva propuesta para la página de inicio de BrumBee Finance mediante un proceso de investigación, análisis de buenas prácticas y prototipado, aprovechando herramientas de inteligencia artificial para acelerar la exploración visual sin perder el control sobre las decisiones de UX.
Proceso
1. Benchmarking de plataformas
Realizar análisis comparativo de diferentes plataformas SaaS para identificar patrones de diseño, distribución de contenido y componentes que ofrecieran una mejor experiencia de usuario.
Durante esta investigación se evaluaron estos aspectos:
- Jerarquía visual.
- Organización de la información.
- Accesos rápidos.
- Dashboards y tarjetas de contenido.
- Navegación.
- Componentes reutilizables.
- Consistencia visual.
Los hallazgos sirvieron como base para definir las mejoras que podían implementarse en BrumBee Finance.
2. Evaluación de la interfaz existente
Análisis de la interfaz actual del producto para detectar oportunidades de mejora tanto a nivel visual como funcional.
También revisar los componentes existentes para identificar cuáles podían sustituirse por alternativas más adecuadas, manteniendo la coherencia con el sistema de diseño basado en Material Design.
Este análisis permitió mejorar la consistencia entre componentes, optimizar la jerarquía visual y reforzar la escalabilidad del producto.
3. Wireframe de baja fidelidad
Antes de explorar el aspecto visual, se desarrolló un wireframe de baja fidelidad en Figma para definir:
- Distribución del contenido.
- Prioridad de la información.
- Flujo de navegación.
- Ubicación de los principales componentes.
- Organización del dashboard.
Este paso permitió validar la estructura antes de invertir tiempo en el diseño visual.
4. Exploración visual asistida con IA
Una vez definida la estructura, con Claude Design como herramienta de apoyo, se generaron propuestas visuales.
Para obtener resultados alineados con el producto, se integró un contexto completo que incluía:
- Sistema de diseño.
- Componentes existentes.
- Paleta de colores.
- Tipografía.
- Logotipos.
- Iconografía.
- Wireframe de baja fidelidad.
- Documentación funcional del proyecto.
La inteligencia artificial se utilizó como una herramienta para acelerar la exploración de interfaces, mientras que las decisiones de experiencia de usuario, arquitectura de información y selección de componentes fueron definidas previamente durante el proceso de diseño.
Resultado
El resultado fue una propuesta de interfaz para la página de inicio de BrumBee Finance con una estructura más clara, una mejor jerarquía visual y componentes alineados al sistema de diseño basado en Material Design.
La nueva propuesta mejora la presentación de la información, facilita el acceso a las funcionalidades principales y establece una base consistente para futuras implementaciones en los demás productos del ecosistema BrumBee.
