Convertir una herramienta interna hecha a retazos en un sistema que todo el equipo pudiera usar y que los devs pudieran construir.
50+
Componentes
40+
Variables
20+
Pantallas
Entregado
Guía de estilo · Librería de íconos
- Problema
- Una UI inconsistente y componentes duplicados hacían que la herramienta interna de Innovid para crear anuncios fuera difícil de usar y lenta de construir.
- Mi rol
- Fui la única diseñadora. Construí y documenté el sistema y se lo entregué a los devs, con mi líder apoyando en QA.
- Impacto
- El ciclo de diseño bajó un 25%, con una UI consistente para diseñadores y devs.
La herramienta interna de Innovid para crear anuncios CTV
CTV Composer es la plataforma interna de Innovid para crear anuncios interactivos de Connected TV (CTV). Diseñadores y desarrolladores la usan para armar layouts y elementos dinámicos sin programar cada interacción.
Componentes duplicados, comportamientos distintos
Con el tiempo los componentes se habían duplicado, y la misma interacción podía comportarse distinto de un panel a otro. Tareas simples tomaban más de lo que debían.
Empezar por una auditoría
Refinar antes de reconstruir
La plataforma ya estaba en uso, así que empecé con una auditoría. Mantuve lo que funcionaba y fusioné los duplicados en componentes reutilizables, para que el equipo siguiera trabajando mientras el sistema tomaba forma.
Diseñar para dos audiencias
Gente de todo el equipo usa Composer a diario, y los devs tenían que construir cada pieza. Por eso definí todos los estados de cada componente (habilitado, activo, deshabilitado, seleccionado), y los devs podían construir desde el archivo sin tener que volver a preguntar.
Organizarlo como funciona el producto
Los íconos y patrones están agrupados según dónde viven en la herramienta: línea de tiempo, paneles, navegación, alertas. Diseñadores y devs encuentran las cosas igual que los usuarios.
Documentarlo y luego entregarlo
Documenté cada componente, estado y patrón, y le entregué el sistema al equipo de desarrollo, desde los fundamentos hasta las pantallas completas.
El ciclo de diseño bajó un 25%
Flujos de trabajo más rápidos
Los componentes y patrones estandarizados redujeron el ciclo de diseño un 25%.
Mejor experiencia de usuario
Con una sola interfaz y lineamientos claros, la gente encontraba las cosas más rápido y cometía menos errores.
Valor para el negocio
Las funcionalidades salieron más rápido y los clientes de Innovid recibieron un producto más confiable.
Explora el sistema completo
Todo lo que diseñé para Composer: guía de estilo, íconos, componentes, navegación y pantallas completas.
Siguiente proyecto