STEAMConf project header image

STEAMConf Barcelona

Organizational website

STEAMConf is a gathering of an exceptional group of international and local educators in Barcelona, who address the world from an (A) perspective and with an integral vision that promotes STE(A)M on the basis of PBL (project-based learning). Culture, education, sciences and technology applied to a creative approach to education to ignite students curiosity.

Areas
Skills

SteamConf website computer, tablet and mobile mockups

Overview

The Information Hub for STEAMConf

The STEAM conference website serves a broad audience of students, educators, researchers, and professionals. It provides key details about speakers, workshops, and exhibitions, serving as a central platform for promoting STEAM education, fostering collaboration, and showcasing innovative educational projects.


My role

I contributed to the design and development of the STEAMConf website across three different editions, helping the organization to communicate the conference’s vision. My role involved analyzing requirements, crafting a cohesive visual identity, and implementing a responsive, modern web solution to fulfill the needs of organizers, attendees, and sponsors.

  • Requirements Analysis: Identified the needs of all stakeholders to define the website’s goals and structure.

  • Visual Identity Development: Designed a cohesive visual design aligned with the conference’s mission.

  • Responsive Design: Ensured the website provided adaptative interaction across devices and screen sizes.

  • Web Development: Built the site using open-source tools, with version control and deployment on a modern web platform.

  • User Experience Focus: Optimized navigation, layout, and functionality for ease of use and accessibility.

  • Content Management: Enabled efficient updates for event schedules, speakers, and sponsor details.


Discovery

The stakeholders needs

Understanding the needs of our stakeholders was crucial for delivering a good website experience to promote engagement, trust, and satisfaction to the users.

  • Conference organizers require a website that effectively promotes the event and displays essential information, with the help of user-friendly content management for updates.

  • Attendees need intuitive navigation to access schedules, speaker profiles, and registration details easily, ensuring a good user experience.

  • Speakers value accurate representation and promotion of their sessions, with clear visibility of their expertise and topics.

  • Sponsors seek prominent acknowledgment, with their logos, contributions, and sponsorship benefits displayed strategically across the site.

User journey diagram explaining the stages, touchpoints, painpoints and stakeholders



Defining the roadmap

The top constraint for this project was the time; in two months the project had to be in production. To control the process, I created a structured process to ensure the successful development of the website.

Ghantt diagram to manage of the project

The Objectives

The primary objective is to create a user-friendly, visually engaging website that effectively communicates the conference details, drives registrations and showcases the conference’s mission and sponsors. The website must serve the needs of all stakeholders while ensuring accessibility, performance, and a good user experience.

  • The website should provide clear, concise information, including the program, speakers, and logistics.

  • Facilitate easy and secure online registration.

  • Showcase the conference’s mission, values, and unique content.

  • Highlight sponsors and partners to acknowledge their contributions.

  • Ensure the website is responsive, accessible, and optimized for various devices.


Strategy

Defining the Information Architecture

I conducted a content audit to identify the key information to include on the website. Then, I defined the logical grouping and prioritization of content and created the structure to ensure easy navigation and intuitive access to essential information.

Information architecture diagram with details for each screen.


Sketching the screens

I started with the design strategy by creating wireframes for each screen to structure and visualize its functionality, focusing on intuitive navigation and user-centric design by outlining the placement of key elements ensuring a logical flow of information.

Wireframe view of the webpage screens.


Defining the UI

Inspired by the creative essence of the conference, I created a vibrant and visually captivating layout characterized by vivid imagery, dynamic shapes, and a color palette infused with energetic hues and contrasting tones to create a sense of playfulness and creativity, which combined with a well-structured information architecture provides the users with concise and comprehensive content.

UI style guide closeup view


Implementation

From design to code

For the development of the website, I followed the principles of Jamstack architecture (JS, APIs, and Markup) and was focused on creating a dynamic, responsive, and efficient platform. I utilized HTML, CSS, and JS to build the core structure and styling of the site, Hugo for the content management, and a GitLab repo for version control. Finally, the website was hosted on Netlify, providing reliable deployment, continuous integration, and excellent performance across devices.

Code editor view alonside the screen implementation


The solution

The Platform for Exploring STEAMConf

We achieved with the solution an engaging experience for its diverse audience, ensuring easy access to all essential conference information. Designed to be fully responsive, it delivers an optimized experience across devices. With clear navigation and well-structured content, it allows users to quickly find details about speakers, programs, and registration, making the site a central hub for attendees to explore, connect, and engage with the conference.


Key Outcomes
  • The website successfully served as a central information hub for STEAMConf, providing attendees, speakers, and sponsors with access to all event information.

  • The focus on user experience ensured a responsive, accessible, and intuitive platform across all devices.

  • Clear navigation and structured content allowed users to easily find essential details such as programs, speaker profiles, and registration options.

  • A cohesive visual design reinforced the conference’s mission and branding, enhancing the overall experience.



Interactive Prototype



I´ve worked with

Do you need help with your project?

Let's get in touch.