UI design
Desing system, wireframes and prototype
Objetivo
Diseñar un plugin responsive dirigido al sector educativo que permitiera a los usuarios subir contenido de forma ágil y eficiente desde cualquier dispositivo: desktop, tablet o mobile.
Utilicé Figma como herramienta principal para el diseño de la interfaz, prototipado interactivo y crear la documentación necesaria para desarrollo. Trabajé en estrecha colaboración con el equipo de UX Research para asegurar una solución centrada en las necesidades reales del usuario.
El enfoque estuvo puesto en garantizar una experiencia intuitiva, accesible y coherente respetando las buenas prácticas de diseño y patrones de interacción. Requería de la construcción de un sistema de diseño modular y funcional desde cero.
Mi rol
Fui responsable de diseñar el sistema de diseño desde cero, asegurándome de que cada componente y sus variantes se integraran de forma modular, facilitando la escalabilidad, la reutilización y futuras iteraciones. Definí una paleta cromática accesible, alineada con la normativa y los criterios de contraste establecidos por las pautas WCAG, prestando especial atención a los distintos estados de los elementos: hover, disabled, active, etc.
Aunque mi rol principal era el diseño de interfaz e interacción, también elaboré varios wireflows de comportamiento y realicé propuestas de rediseño en ciertas pantallas para mejorar mi comprensión del producto. De esta forma, facilitar la documentación y compresión a los desarrolladores posteriormente.
Considero clave ir más allá de lo visual, por lo que intento estar activamente trabajando en concordancia con el área de UX, conectando esas conclusiones con las decisiones de diseño que de la interfaz.
Además, me aseguré de que los componentes fueran accesibles, siguiendo las medidas y prácticas recomendadas en cuanto a tamaño táctil, tipografía legible, foco visible y consistencia en los patrones de interacción.
El prototipado interactivo fue una parte clave del proceso, ya que permitió validar flujos de usuario, detectar errores tempranos y alinear al equipo en torno a una visión clara del producto.
Agilizó considerablemente el trabajo con desarrollo, reduciendo dudas y facilitando la implementación. Desde el inicio, trabajé sobre una grid consistente y utilicé las herramientas de layout responsivo en Figma para asegurar que los elementos se adaptaran correctamente a cada tipo de dispositivo. Esta estructura no solo aportó orden y coherencia al diseño, sino que también hizo más eficiente la toma de decisiones visuales y funcionales.
De cara a desarrollo, puse especial atención en la documentación de los componentes y patrones, utilizando técnicas como descripciones escritas, anotaciones visuales y prototipos navegables. El objetivo fue que el equipo pudiera comprender fácilmente el propósito y comportamiento de cada elemento, minimizando la necesidad de aclaraciones posteriores y fomentando una colaboración más fluida y autónoma.
Lo que aprendí...
Una de las principales lecciones que me llevé de este proyecto fue la importancia de mantener una comunicación fluida y continua entre todos los departamentos involucrados. Cuanto más estrecha es esa relación, más fácil resulta diseñar soluciones viables desde el inicio, evitando malentendidos, llamadas de última hora o retrabajos innecesarios. Entender cómo el equipo de desarrollo necesita recibir los entregables, conocer si hay limitaciones técnicas y anticipar posibles obstáculos me permitió tomar mejores decisiones de diseño desde el primer momento.
También, reforcé la importancia de mantener un alineamiento constante con UX, asegurándome de que cada decisión visual tuviera un respaldo funcional y estratégico.
Además, aprendí que el seguimiento posterior al diseño es clave: realizar un buen QA visual garantiza que la implementación final respete la intención del diseño y la experiencia de usuario propuesta.