Cotalker DS
Sistema de diseño creado para promover escalabilidad y consistencia dentro de la UI de la plataforma Cotalker.
Rol
Diseñadora UX/UI
Herramientas
Figma
Contexto
Año
2023-2024
Equipo
01 Product Manager
01 Diseñadora UX/UI
¿CUÁL es el problema?
La interfaz de usuario de Cotalker se componía principalmente por componentes extraídos de Material UI usada como librería de Angular para el front-end de la plataforma.
Esto facilitaba el desarrollo rápido, pues los componentes venían con estilos predeterminados. Sin embargo, el dolor de ésto se veía reflejado en que la plataforma presentaba un look genérico y que en instancias no conversaba con la paleta de colores creada hace años en Cotalker.
Objetivo principal
Diseñar un sistema de diseño (o design system) para Cotalker que sea consistente dentro de la interfaz y coherente con la imagen de marca.
Objetivos específicos
Diseñar componentes utilizando principios de Atomic Design.
Adaptar componentes ya existentes para que tengan los colores y tipografía correspondientes a Cotalker.
Mejorar la consistencia dentro de la interfaz para evitar confusión en los usuarios.
Proceso
Se tomó como base la paleta de Cotalker definida años atrás, además de una tipografía gratuita que se asemejara a la usada en el logo.
Lo siguiente fue empezar a construir los componentes base utilizados en la plataforma.
Una vez definidos los componentes base, se procede a crear componentes más complejos, nacidos de los componentes base (los átomos). De aquí comienza un proceso de creación incremental hasta llegar a la construcción de vistas completas (las páginas).
Aprendizajes
Esta fue mi primera experiencia construyendo un sistema de diseño desde cero. Fue un desafío que al principio se sintió muy grande, por la cantidad de componentes que se necesitan para crear una aplicación.Sin embargo, una vez los componentes base estaban diseñados, el proceso fue incremental y lo principal se centró en asegurar que todas las piezas conversaran entre sí.
Con esto entendí la importancia de la consistencia dentro de un producto digital, además de confirmar que un sistema de diseño jamás termina de actualizarse, pues evoluciona constantemente junto con el producto en sí.
