Navigating the Politecnico di Torino: interactive web application in React JS
Tool
Development
React Native
Development
Drupal
Design
Figma
Customer
The Politecnico di Torino, which celebrated its 160th academic year in 2019, is one of the most prestigious universities in Europe. Over the years, it has become an increasingly international institution, where tradition and future, past and modernity intertwine.
Objective
Development of an interactive digital map integrated into the Politecnico di Torino website, designed to facilitate campus navigation and make it easier to locate classrooms, laboratories, and services.
The goal of the project was to redesign the “maps” section of the university’s website in order to align the user experience with that of the Politecnico’s mobile application.
The project, marked from the very beginning by a productive collaboration between our team and the Politecnico’s team, initially required a revision of the UX and UI to optimize the user interface of the mobile app for desktop navigation, followed by the development of a web application in React JS, and finally its integration into the university’s official website.
The web application had to be integrated with an internal university system that catalogs all campus facilities, organized by location and including key details (e.g., capacity, technical equipment, position, etc.), in order to retrieve all the information to be displayed on the maps.
Three navigation modes
The user interface offers three different ways to navigate the Maps section:
- direct interaction with the map: users can freely explore the map by moving between campuses and buildings, clicking on visible points of interest;
- filtering information using a dedicated dropdown menu;
- using an internal search engine with autocomplete functionality, ideal for those looking for a specific destination. The application automatically suggests the most relevant results as the user types.
The experience begins with the selection of one of the main campuses: Torino, Alessandria, Mondovì, Biella, and Verrès.
Filters and advanced features
After selecting a campus, users can filter the view by choosing from various categories of points of interest, such as classrooms, vending machines, restrooms, bike stations, laboratories, staircases, and other useful spaces.
Each building includes a dedicated menu for selecting the floor level: ground floor, first floor, etc. The selection dynamically updates the map view, loading the corresponding floor plan and displaying only the relevant points of interest for the chosen level.
When a single point of interest is selected, an information panel appears, displaying all relevant details: location name, building, associated department, floor, and room capacity. The panel also includes a direct link to Google Maps for directions and a sharing option that automatically generates a shareable link.
Are you looking for a digital tool to simplify your users’ experience? Tell us about your project and discover how we can turn your idea into an interactive, functional, and tailor-made web application for your organization.