Contexto
Este proyecto corresponde a mi tesis de pregrado, desarrollada entre marzo y diciembre de 2024. Junto a dos compañeros y con la guía de nuestra profesora, trabajamos en el rediseño de la plataforma Wiki Casiopea.
Mi foco personal fue crear una nueva skin visual que modernizara la apariencia de la plataforma y mejorara significativamente la experiencia de usuario. Durante el primer semestre realizamos investigación con usuarios y propusimos una dirección de diseño inicial. Desde ahí, tomé la responsabilidad de diseñar un sistema de diseño completo en Figma, para luego implementarlo en código.
El problema
Wiki Casiopea es la wiki académica más grande de Chile. Estudiantes y profesores de la Escuela de Arquitectura y Diseño de la PUCV la usan para documentar cursos, proyectos y eventos. Sin embargo, la investigación reveló que la interfaz compleja y poco intuitiva era la principal barrera para su uso efectivo.
Hallazgos de investigación
Realizamos encuestas con 60 participantes y entrevistas con 12 usuarios — profesores y estudiantes de Diseño y Arquitectura. Los hallazgos fueron consistentes: la plataforma requería conocimiento técnico para editar contenido, la curva de aprendizaje era demasiado empinada, y los estudiantes de Arquitectura la percibían como inaccesible y desorganizada.
La complejidad de la interfaz y la falta de intuitividad son las principales barreras para la adopción efectiva de Wiki Casiopea.
Propuesta
El proyecto apuntaba a mejorar la usabilidad y accesibilidad de Wiki Casiopea rediseñando su interfaz para hacerla más moderna, intuitiva y amigable, mientras se reforzaba su filosofía abierta y colaborativa.
La propuesta incluía: una sidebar fija para navegación interna en una misma página, modificaciones al menú para encontrar información más fácilmente, un diseño limpio y accesible compatible con dispositivos móviles, y un sistema de diseño modular con documentación clara.
Sistema de diseño en Figma
Creé un sistema de diseño que contiene todos los componentes base y estilos, lo que permitirá el desarrollo posterior de templates en Mustache y LESS para la nueva skin. La documentación clara fue clave: necesitaba ser comprensible tanto para desarrolladores avanzados como para estudiantes de diseño desde tercer año en adelante. Cada componente fue documentado con convenciones de nombres claras, variantes y estados.
Implementación en código
Una vez estructurado el sistema de diseño y definido el diseño visual, se crearon templates usando Mustache, que luego se renderizaron como páginas HTML. Para el manejo de estilos se usó LESS, un preprocesador CSS que permite mejor organización de variables y estilos, de manera similar a cómo se gestionan en Figma. Todo el proceso se llevó a cabo usando Visual Studio Code y GitHub.
flowchart TD
A((Inicio)) --> B[Definir componente en Figma]
B --> C{¿Cumple con los tokens?}
C -- No --> D[Ajustar variables y estilos]
D --> C
C -- Sí --> E[Crear template en Mustache]
E --> F[Aplicar estilos en LESS]
F --> G{¿Pasa revisión visual?}
G -- No --> D
G -- Sí --> H[Renderizar a HTML]
H --> I((Fin))Entregable final
Se creó una página de documentación de componentes usando el mismo sistema de diseño desarrollado para el proyecto. Esta documentación está disponible públicamente y el repositorio del proyecto se puede encontrar en GitHub.
Aprendizajes
Este proyecto me permitió entender en profundidad el puente entre diseño y desarrollo — crear documentación que funciona tanto para diseñadores como para desarrolladores, llevar un sistema de diseño desde Figma hasta producción, y trabajar con las restricciones reales de un stack tecnológico preexistente.