Rediseño para Network of Centers (NoC)
Un nuevo sitio web para una red global que promueve buenas prácticas en Internet y tecnología
Contexto del proyecto
The Global Network of Centers (NoC), afiliada al Berkman Klein Center de Harvard, contaba con un sitio web funcional pero visualmente desorganizado, sin una línea gráfica clara y con un diseño que no reflejaba su prestigio global. Irónicamente, una red que trabaja por mejorar el ecosistema digital tenía un sitio web que no estaba a la altura de su misión.
El cliente ya había intentado rediseñar la web, pero el enfoque era confuso y excesivamente colorido. En cambio, propuse una solución más sobria, profesional y centrada en la claridad. Mi objetivo fue que el nuevo sitio se sintiera como un espacio diseñado a la medida de la misión del centro, priorizando el fácil acceso a la información y utilizando una identidad que se integrara con la de la academia.

Auditoria del problema
Durante mi auditoría UX identifiqué los siguientes puntos críticos:
Falta de jerarquía visual
Mala legibilidad (bajo contraste, uso poco estructurado de color)
Navegación poco clara
Estética desalineada con el perfil académico e institucional
Interfaz recargada y desorganizada
Además, el sitio dificultaba el acceso rápido a información clave como cómo unirse a la red o explorar centros activos.
Proceso y enfoque UX
Antes de comenzar con el diseño, realicé una serie de entrevistas y un cuestionario para entender la misión de la red y lo que esperaban del sitio web.
Objetivos del cliente:
Tener una web clara, funcional y profesional
Mostrar con claridad los centros que hacen parte de la red
Reflejar el prestigio y la misión del NoC
Auditoría UX: Evalué la estructura, legibilidad, navegación, y tono visual.
Benchmark: Revisé sitios de otras redes académicas, ONGs y centros de investigación, para entender mejores prácticas en arquitectura de información y presencia digital institucional.
Sistema Visual y High Fidelity
Desarrollé una propuesta que cubre desktop, tablet y móvil, cuidando todos los aspectos del sistema visual:
Tipografías: sistema jerárquico basado en Roboto, desde títulos hasta etiquetas pequeñas.
Tokens de color: reducción y estandarización del uso de color. El blanco y negro dominan, con colores institucionales como acento.
Grid modular: 12 columnas en desktop, 8 en tablet, 4 en móvil. Espaciado en múltiplos de 8px.
Logo adaptado: eliminé el ícono para dejar solo el nombre, haciéndolo más claro y escalable.
Accesibilidad: contraste de texto ajustado a estándar AAA según WAC.
Componentes reutilizables: tarjetas, botones, menús con puntas redondeadas sutiles para balancear estructura y calidez visual.
#Tools
#Tools
Propuesta y
Prototipo
Una vez se definieron los principales hallazgos de la auditoría y se establecieron los lineamientos visuales, comencé a trabajar en una propuesta de diseño que reflejara tanto la misión del NoC como su identidad académica y su rol en el ecosistema tecnológico global.
Durante varias reuniones de revisión, el cliente enfatizó la importancia de proyectar una imagen más cercana a una red académica seria, pero sin perder la conexión con el componente de tecnología y colaboración entre centros. Esa conversación fue clave para definir el tono visual del sitio: debía sentirse institucional y claro, pero también accesible, actual y bien organizado.
Basado en ese enfoque, desarrollé un diseño más editorial, con una estructura limpia y legible. Reduje el uso de color a acentos estratégicos para dar respiro visual y reforzar jerarquías. Se trabajó con una nueva estructura de navegación, contenido más modular y una estética mucho más sobria y elegante que ayudara a reforzar su credibilidad.
El prototipo fue creado en versiones para desktop, tablet y móvil, cuidando que el diseño se mantuviera consistente y funcional en todos los tamaños. Además, he ido agregando microinteracciones como efectos de hover en tarjetas, transiciones suaves entre secciones y pequeños detalles de comportamiento que le dan más vida al sitio. Estos detalles buscan hacer la experiencia más fluida, intuitiva y atractiva sin sobrecargar al usuario.
Estado del proyecto y siguientes pasos
El proyecto esta listo para implementación, el feedback del cliente ha sido muy positivo. Consideran que la nueva propuesta está bien encaminada y representa claramente lo que esperaban del nuevo sitio. En este momento se esta evaluando la mejor opción de desarrollo.
La idea es que el sitio no sea tan estático como antes, sino que siga evolucionando. Planeo seguir trabajando en microinteracciones como animaciones suaves en la navegación, transiciones entre secciones, efectos de hover más dinámicos en tarjetas y botones, y la posible incorporación de animaciones de carga o scroll.
Me gustaría explorar el uso de elementos en 3D, especialmente en áreas destacadas como la portada o la sección de centros, para darle un toque más inmersivo y contemporáneo al sitio.
Resultado esperados
Conectividad
Sea más fácil que los centros se conecten entre sí.
Presencia Virtual
Mejorar la identidad del sitio y su percepción
Desempeño
Aumente el tráfico y el interés en la red.
Accesibilidad
Los textos y la información cumplen con estándares WCAG
Participación
Sea más claro cómo unirse o participar en el NoC.
Reflexión Personal
Me gustó mucho este proyecto porque representó un reto: hacer un proyecto independiente, asumiendo procesos de planificación, cronograma de trabajo, donde tomé todas las decisiones de diseño. Quería hacer un sitio que se viera más elegante y que ofreciera una experiencia de lectura y navegación mucho más fluida.
Traté de seguir un plan de trabajo sólido, pero también me apoyé en recursos disponibles en línea. Aprendí bastante y sentí que el proceso me hizo crecer como diseñador de productos, en especial incorporando herramientas de IA a mi proceso. Aunque sé que hay cosas por mejorar, estoy contento con el resultado: el nuevo sitio está mucho mejor que el anterior y sé que puede marcar una diferencia en cómo la organización es percibida.
Mi deseo es que esta nueva propuesta motive al equipo del NoC a aprobar su desarrollo, pero también a mantener un sitio que siga evolucionando constantemente, y que refuerce su credibilidad como referente internacional en el mundo de la tecnología, el derecho digital y la academia.