STEAMConf Barcelona

Descripción general

El centro de información de STEAMConf

El sitio web de la conferencia STEAM está dirigido a un amplio público de estudiantes, educadores, investigadores y profesionales. Proporciona información clave sobre ponentes, talleres y exposiciones, funcionando como una plataforma central para promover la educación STEAM, fomentar la colaboración y mostrar proyectos educativos innovadores.

Mi rol en el proyecto

Contribuí al diseño y desarrollo del sitio web de STEAMConf durante tres ediciones diferentes, ayudando a la organización a comunicar la visión de la conferencia. Mi trabajo incluyó analizar los requisitos, crear una identidad visual coherente e implementar una solución web moderna y adaptativa que respondiera a las necesidades de organizadores, asistentes y patrocinadores.

• Análisis de requisitos: Identificación de las necesidades de todos los grupos implicados para definir los objetivos y la estructura del sitio web.
• Desarrollo de la identidad visual: Diseño de una identidad visual coherente y alineada con la misión de la conferencia.
• Diseño web adaptativo: Garantizar una interacción adaptada a diferentes dispositivos y tamaños de pantalla.
• Desarrollo web: Desarrollo del sitio utilizando herramientas de código abierto, con control de versiones y despliegue en una plataforma web moderna.
• Enfoque en la experiencia de usuario: Optimización de la navegación, composición y funcionalidad para facilitar el uso y mejorar la accesibilidad.
• Gestión de contenidos: Facilitar la actualización eficiente de los programas, ponentes y datos de los patrocinadores.

Descubrimiento

Las necesidades de los grupos implicados**

Comprender las necesidades de todos los grupos implicados fue fundamental para ofrecer una buena experiencia web que fomentara la participación, la confianza y la satisfacción de los usuarios.

• Organizadores de la conferencia necesitan un sitio web que promocione eficazmente el evento y muestre la información esencial, con un sistema de gestión de contenidos sencillo que facilite las actualizaciones.
• Asistentes necesitan una navegación intuitiva que les permita acceder fácilmente al programa, los perfiles de los ponentes y la información de registro, garantizando una buena experiencia de usuario.
• Ponentes valoran una representación y promoción precisas de sus sesiones, con una visibilidad clara de sus conocimientos y temas.
• Patrocinadores buscan un reconocimiento destacado, mostrando estratégicamente sus logotipos, contribuciones y beneficios de patrocinio a lo largo del sitio.

El reto

El objetivo principal era crear un sitio web fácil de usar y visualmente atractivo que comunicara eficazmente la información de la conferencia, impulsara las inscripciones y mostrara su misión y patrocinadores. El sitio debía responder a las necesidades de todos los grupos implicados, garantizando al mismo tiempo accesibilidad, rendimiento y una buena experiencia de usuario.

• El sitio web debía proporcionar información clara y concisa, incluyendo el programa, los ponentes y la información logística.
• Facilitar un proceso de inscripción online sencillo y seguro.
• Mostrar la misión, los valores y los contenidos diferenciales de la conferencia.
• Dar visibilidad a patrocinadores y colaboradores para reconocer sus contribuciones.
• Garantizar que el sitio fuera adaptativo, accesible y optimizado para diferentes dispositivos.

Definir la hoja de ruta

La principal limitación de este proyecto era el tiempo: el sitio tenía que estar en producción en dos meses. Para controlar el proceso, creé un proceso estructurado que permitiera garantizar el desarrollo exitoso del sitio web.

Definir la arquitectura de la información

Realicé una auditoría de contenidos para identificar la información clave que debía incluirse en el sitio web. A continuación, definí la agrupación y priorización lógica de los contenidos y creé la estructura necesaria para garantizar una navegación sencilla y un acceso intuitivo a la información esencial.

Exploración

Bocetar las pantallas

Comencé la estrategia de diseño creando wireframes para cada pantalla con el objetivo de estructurar y visualizar su funcionalidad. Me centré en una navegación intuitiva y un diseño centrado en el usuario, definiendo la ubicación de los elementos clave y garantizando un flujo lógico de la información.

Definición

Construcción de la UI

Inspirándome en la esencia creativa de la conferencia, creé un layout vibrante y visualmente atractivo, caracterizado por imágenes impactantes, formas dinámicas y una paleta de colores con tonos enérgicos y contrastados que aportan una sensación de juego y creatividad. Todo ello, combinado con una arquitectura de la información bien estructurada, proporciona a los usuarios contenidos claros, concisos y completos.

Implementación

Del diseño al código

Para el desarrollo del sitio web, seguí los principios de la arquitectura Jamstack (JS, APIs y Markup), con el objetivo de crear una plataforma dinámica, adaptativa y eficiente. Utilicé HTML, CSS y JS para construir la estructura y los estilos principales del sitio, Hugo para la gestión de contenidos y un repositorio de GitLab para el control de versiones. Finalmente, el sitio web se alojó en Netlify, proporcionando un despliegue fiable, integración continua y un excelente rendimiento en diferentes dispositivos.

La solución

La plataforma para explorar STEAMConf

Con la solución conseguimos crear una experiencia atractiva para su diversa audiencia, garantizando un acceso sencillo a toda la información esencial de la conferencia. Diseñada para ser totalmente adaptativa, ofrece una experiencia optimizada en diferentes dispositivos. Gracias a una navegación clara y unos contenidos bien estructurados, los usuarios pueden encontrar rápidamente información sobre los ponentes, el programa y las inscripciones, convirtiendo el sitio en un punto central desde el que explorar, conectar y participar en la conferencia.

Prototipo interactivo

El resultado

• El sitio web se convirtió con éxito en un punto central de información para STEAMConf, proporcionando a asistentes, ponentes y patrocinadores acceso a toda la información del evento.
• El enfoque en la experiencia de usuario garantizó una plataforma adaptativa, accesible e intuitiva en todos los dispositivos.
• Una navegación clara y unos contenidos bien estructurados permitieron a los usuarios encontrar fácilmente información esencial como el programa, los perfiles de los ponentes y las opciones de inscripción.
• Un diseño visual coherente reforzó la misión y la identidad de la conferencia, mejorando la experiencia general.