STEAMConf Barcelona

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 in the project

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.

The Challenge

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.

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.

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.

Exploration

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.

Definition

Building 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.

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.

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.

Interactive Prototype

The Outcome

• 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.