Roomie Design System

Roomie, nuestro Design System en La Haus es igual a ese compañero de vivienda que es cool, buen parcero, que está ahí para darte una mano cuando necesites crear experiencias y productos memorables.

Diego Luque Design Lead, Angelo Leva Developer, Dayana Galindo Product Designer

La Necesidad de un Design System en La Haus

RETO

Crecimiento Rápido y Múltiples Soluciones Digitales

Ante el rápido crecimiento de la compañía y la proliferación de soluciones digitales, se hacía indispensable establecer un Design System. Este sistema permitiría crear productos de manera más eficiente y ágil.

No había una experiencia visual cohesiva

Existían numerosos componentes, cada uno diseñado de manera independiente por diferentes diseñadores de producto. Esto generaba una interfaz de usuario inconsistente en los distintos productos. Era fundamental desarrollar una experiencia unificada y optimizada, que mejorara los tiempos de diseño y desarrollo.

Desalineación de la Paleta de Colores con el Branding

La paleta de colores de los productos digitales no coincidía con los colores base de la marca. Mientras el diseño digital se basaba en tonalidades de azul, nuestra identidad de marca se centraba en verdes y tonos de acento salmón.

SOLUCIÓN

Roomie llegó para apoyar al equipo de producto en la creación de soluciones digitales coherentes y visualmente atractivas que transmiten la esencia de nuestra marca.

PASO A PASO

PROCESO

Este fue el proceso para lanzar el Design System: realizamos auditorías, análisis de métricas, estrategias de adopción y más, convirtiendo Roomie en una realidad.

CONSTRUCCIÓN

FUNDAMENTOS

Establecimos los fundamentos de Roomie, que incluyen tipografías, paleta de colores, espaciado, grids y elevaciones.

COMPONENTES

Diseñamos componentes priorizándolos según los requisitos de cada producto, lanzando primero los más utilizados por los diseñadores. En total, se lanzaron más de 46 componentes en las librerias.

ORGANISMOS

Diseñamos organismos como cards especiales para mostrar benefits and features, empty states, FAQs, propiedades featured, heros, módulo de data, entre otros.

DOCUMENTACIÓN

Docs & Specs reúne la documentación del Sistema de Diseño para garantizar la consistencia en los productos digitales de La Haus. Es nuestra fuente de verdad y el proceso clave de entrega entre diseño y desarrollo.

DESING & DEVELOPMENT

Storybook

Con Storybook, facilitamos la colaboración entre diseño y desarrollo mediante una biblioteca compartida de componentes reutilizables. Esto permitió probar y ajustar los componentes de forma aislada, asegurando coherencia y optimizando el flujo de trabajo.

Biblioteca de componentes reutilizables

MÉTRICAS

El uso de componentes reutilizables y procesos optimizados ha reducido tiempos de desarrollo, incrementado la eficiencia del equipo y mejorado la experiencia del usuario. Gracias a este enfoque sistemático, hemos podido medir y mejorar continuamente el impacto en nuestros usuarios, alineando los resultados con los OKR’s.

ANTES

Antes en los productos se utilizaban tonos de azul para CTAs y toques lilas, que estaban fuera de nuestra paleta de marca. Además, cada diseñador creaba versiones de componentes no reutilizables.

Producto La Haus Now

DESPUÉS

Ahora con Roomie creamos componentes y organismos reutilizables para más de 10 soluciones digitales, rediseñando héroes, secciones de beneficios y características, tarjetas, FAQs y footers, logrando una interfaz limpia, escalable y visualmente atractiva.