ANDROMEDA DESIGN SYSTEM
OUTTA SPAC
*
OUTTA SPAC *
Introducción
ADS: Sistema de Diseño interno de Telecoming en continuo desarrollo, documentado y testeado.
Proyecto creado en 2017 enfocado a crear un sistema de diseño para implementar en los diferentes servicios web de la compañía.
Diseño UX/UI basado en componentes dinámicos y directrices Atomic Design.
El desarrollo
Roles y Responsabilidades
Diseñador UX para estudio, research, planteamiento, documentación técnica y diseño de componentes, organizados siguiendo las directrices de Atomic Design, generando desde átomos a páginas completas.
Partners y Stakeholders
Trabajé en estrecha colaboración con el equipo de Producto, equipo de Diseño, desarrollo front / back-end y QA, así como con el equipo directivo y el departamento de ventas como decisores y validadores del proyecto.
El Problema
Dado el alto volumen de trabajo de producción digital en la factoría de producción de Telercoming, era necesario agilizar el proceso de creación de servicios web por parte del departamento de Producto, hacer más fluido el trabajo entre equipos involucrados (UX/UI, IT & QA) y minimizar errores para un proceso QA más ligero.
Usuarios y Audiencia
Suscriptores de los productos Telecoming a nivel europeo y Asia, consumidores de contenido audiovisual y noticias en formato web mobile first.
Proceso de Diseño
Comienzo analizando la necesidad de implementar un componente nuevo en el sistema, evaluando el impacto en los servicios donde se incorporaría y la escalabilidad del mismo.
Tras eso se procede a hacer un research de componentes en otros sistemas para analizar estándares de uso, construcción, funcionalidad, aplicación técnica, etc.
En el siguiente paso se comienza a bocetar en papel la disposición de los sub-componentes y se empieza a plantear de manera digital.
Se identifican los diferentes átomos y tras una breve implementación técnica se comienza a estresar cada componente en un entorno de pruebas para afinar su comportamiento dinámico.
Una vez validado, se documenta en InVision gráficamente y tras ello se pasa a la documentación técnica en el espacio Confluence, con ejemplos de status, variables css, tamaños, restricciones, usos, etc.