Responses by Emmanuel Bonnet and Hermine Roudaut, cofounders, La Phase 5.

Background: Relatively unknown, the city of Marseille is complex and rich; its soul can be felt by just taking the time to experience it. The second city of France—as it’s known—expresses its variety and character within its 240 square kilometers (about 92 square miles). We wanted to pay tribute to our city through a digital experience that would give people the opportunity to visit and rediscover Marseille. This project was a spontaneous initiative that we made as part of our 2021 New Year wishes, just because we like our city and are glad to be a part of it!

Design core: The heart of the website is a 3-D map of the town. The design is refined and modern. Each location is available with a 360-degree panoramic picture, with some information on the specificity of the place.

Favorite details: The buildings appearing in a noise effect brings a lot to the whole experience. It is based on a display radius, which manages the visibility of each element.

Challenges: We wanted to create a lovely experience that would be accessible to everyone. The challenge was to create an interactive map with a cool design while preserving the simplest user experience. Axel Corjon, the art director for the project, took up the challenge brilliantly.

Time constraints: We started the concept at the end of last November. We had to launch the website before the 31st of January, so we had to prioritize some choices to finish in time. Since we were our own client, we were able to make quick decisions.

Divergent paths: Initially, we would have liked the 360-degree panorama pictures to include a depth map, but time had flown as usual for an internal project and we couldn’t add the feature at launch. We had also slightly underestimated the complexity and the time to obtain authorizations to take pictures of some locations, so that’s why we decided to add places throughout the year. That way, we made this map and the project evolutionary.

Navigation structure: The site intentionally uses a clean design to suggest a pleasant visit to Marseille—and to not compromise the user experience. We focused on the readability of the map and the panoramic views.

Special navigational features: Based on classic features available to navigate in Google Maps or Plan applications, the mouse wheel and gestures enable visitors to zoom in on the town. Visitors have certainly already found these features.

Technology: The construction of the map relies on a roof-tile system. Data were extracted from OpenStreetMap. After an initial pretreatment of all the data, WebGL developer Nicolas Barradeau used multiple techniques to optimize the performance. At the end, the three.js render is really fluid. We are quite proud of it!