Imagen de encabezado del proyecto STEAMConf

STEAMConf Barcelona

Web de la organizacion

STEAMConf es un encuentro de un excepcional grupo de educadores internacionales y locales en Barcelona, que abordan el mundo desde una perspectiva (A) y con una visión integral que promueve STE(A)M sobre la base del Aprendizaje Basado en Proyectos (PBL). Cultura, educación, ciencias y tecnología aplicadas a un enfoque creativo de la educación para despertar la curiosidad de los estudiantes.

Areas
Skills

Mockups del sitio web de SteamConf en computadora, tablet y móvil

Visión general

El Centro de Información para STEAMConf

El sitio web de la conferencia STEAM sirve a una audiencia amplia de estudiantes, educadores, investigadores y profesionales. Proporciona detalles clave sobre ponentes, talleres y exposiciones, sirviendo como una plataforma central para promover la educación STEAM, fomentar la colaboración y mostrar proyectos educativos innovadores.


Mi rol

Contribuí al diseño y desarrollo del sitio web de STEAMConf a lo largo de tres ediciones diferentes, ayudando a la organización a comunicar la visión de la conferencia. Mi rol involucró analizar los requisitos, crear una identidad visual coherente e implementar una solución web moderna y responsiva para satisfacer las necesidades de los organizadores, asistentes y patrocinadores.

  • Análisis de Requisitos: Identifiqué las necesidades de todos los interesados para definir los objetivos y la estructura del sitio web.

  • Desarrollo de Identidad Visual: Diseñé una identidad visual coherente alineada con la misión de la conferencia.

  • Diseño adaptativo: Aseguré que el sitio web proporcionara interacción adaptativa a través de dispositivos y tamaños de pantalla.

  • Desarrollo Web: Construí el sitio utilizando herramientas de código abierto, con control de versiones y despliegue en una plataforma web moderna.

  • Enfoque en la Experiencia de Usuario: Optimicé la navegación, el diseño y la funcionalidad para facilitar su uso y accesibilidad.

  • Gestión de Contenidos: Permití actualizaciones eficientes para los horarios del evento, los ponentes y los detalles de los patrocinadores.


Descubrimiento

Las necesidades de los interesados

Entender las necesidades de nuestros interesados fue crucial para ofrecer una buena experiencia web que fomente el compromiso, la confianza y la satisfacción de los usuarios.

  • Los organizadores de la conferencia necesitan un sitio web que promueva eficazmente el evento y muestre información esencial, con una gestión de contenidos fácil de usar para actualizaciones.

  • Los asistentes necesitan una navegación intuitiva para acceder fácilmente a horarios, perfiles de ponentes y detalles de registro, asegurando una buena experiencia de usuario.

  • Los ponentes valoran la representación precisa y la promoción de sus sesiones, con una visibilidad clara de su experiencia y temas.

  • Los patrocinadores buscan un reconocimiento destacado, con sus logotipos, contribuciones y beneficios de patrocinio mostrados estratégicamente a lo largo del sitio.

Diagrama del recorrido del usuario explicando las etapas, puntos de contacto, puntos de dolor e interesados



Definiendo la hoja de ruta

La principal limitación de este proyecto fue el tiempo; en dos meses el proyecto debía estar en producción. Para controlar el proceso, creé un proceso estructurado para garantizar el desarrollo exitoso del sitio web.

Diagrama de Gantt del proyecto

Los Objetivos

El objetivo principal es crear un sitio web fácil de usar, visualmente atractivo que comunique eficazmente los detalles de la conferencia, impulse las inscripciones y muestre la misión de la conferencia y sus patrocinadores. El sitio web debe satisfacer las necesidades de todos los interesados, garantizando accesibilidad, rendimiento y una buena experiencia de usuario.

  • El sitio web debe proporcionar información clara y concisa, incluyendo el programa, los ponentes y la logística.

  • Facilitar el registro en línea fácil y seguro.

  • Mostrar la misión, los valores y el contenido único de la conferencia.

  • Destacar a los patrocinadores y socios para reconocer sus contribuciones.

  • Asegurar que el sitio web sea adaptativo, accesible y optimizado para diferentes dispositivos.


Estrategia

Definiendo la Arquitectura de la Información

Realicé una auditoría de contenido para identificar la información clave a incluir en el sitio web. Luego, definí la agrupación lógica y la priorización del contenido, creando la estructura para garantizar una navegación fácil y acceso intuitivo a la información esencial.

Diagrama de arquitectura de la información con detalles para cada pantalla.


Bocetando las pantallas

Comencé con la estrategia de diseño creando wireframes para cada pantalla para estructurar y visualizar su funcionalidad, enfocándome en la navegación intuitiva y el diseño centrado en el usuario, destacando la colocación de elementos clave para asegurar un flujo lógico de la información.

Vista de wireframes de las pantallas del sitio web.


Definiendo la UI

Inspirado por la esencia creativa de la conferencia, creé un diseño vibrante y visualmente cautivador caracterizado por imágenes vívidas, formas dinámicas y una paleta de colores infundida con tonos energéticos y contrastantes para crear una sensación de juego y creatividad, lo que combinado con una arquitectura de la información bien estructurada proporciona a los usuarios contenido conciso y completo.

Vista detallada de la guía de estilo UI


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) y me enfoqué en crear una plataforma dinámica, responsiva y eficiente. Utilicé HTML, CSS y JS para construir la estructura principal y el estilo del sitio, Hugo para la gestión de contenidos, y un repositorio de GitLab para control de versiones. Finalmente, el sitio web fue alojado en Netlify, proporcionando un despliegue confiable, integración continua y un excelente rendimiento a través de dispositivos.

Vista del editor de código junto a la implementación de pantalla


La solución

La Plataforma para Explorar STEAMConf

Logramos con la solución una experiencia atractiva para su diversa audiencia, asegurando un fácil acceso a toda la información esencial de la conferencia. Diseñado para ser completamente adaptativo, ofrece una experiencia optimizada en todos los dispositivos. Con una navegación clara y un contenido bien estructurado, permite a los usuarios encontrar rápidamente detalles sobre ponentes, programas y registros, convirtiendo el sitio en un centro para que los asistentes exploren, se conecten y participen en la conferencia.


Resultados clave

  • La web sirvió exitosamente como un centro de información para STEAMConf, proporcionando a los asistentes, ponentes y patrocinadores acceso a toda la información del evento.

  • El enfoque en la experiencia del usuario aseguró una plataforma responsiva, accesible e intuitiva en todos los dispositivos.

  • La navegación clara y el contenido estructurado permitieron a los usuarios encontrar fácilmente detalles esenciales como programas, perfiles de ponentes y opciones de registro.

  • Un diseño visual coherente reforzó la misión y la marca de la conferencia, mejorando la experiencia del usuario durante la conferencia.



Prototipo Interactivo



He trabajado con

Necesitas ayuda con tu proyecto?

Hablemos