Maps x Spotify

Responsibility

User Interface Manager

Team

5 people

Development time

15 days

Year

2024

Platform

Figma

Overview

Google Maps x Spotify began as an experiment integrating navigation and personalised listening. The goal is to create a dynamic and immersive experience for travellers, combining the precision of Maps with the predictive capabilities of Spotify. The app suggests playlists based on the route, estimated time, and environment (urban, rural, sea, mountains). This integration enhances both the driving experience and the emotional journey.

Features

MapBeats

The app recognizes the route selected in Google Maps and automatically suggests an optimized music selection. The playlists adapt to the type of road, the trip duration, and even real-time traffic. Users can preview the playlist for the journey, save the tracks played while driving, and use voice commands to change the mood or music genre without distractions.

Additionally, the app analyzes listening habits to progressively refine suggestions, offering a unique blend of music discovery and comfort.

Tre interfacce dell’app Spotify x Maps progettata dal team con Davide Molea, mostrate su iPhone: selezione della destinazione su Maps, scelta degli artisti preferiti e selezione delle canzoni.

Tre interfacce dell’app Spotify x Maps progettata dal team con Davide Molea, mostrate su iPhone: schermata di attesa per la generazione della playlist, interfaccia di navigazione in auto con player Spotify e schermata di fine viaggio.

Process

Colours

For the visual identity, I chose black and white as base colours to ensure continuity with the original Google and Spotify interfaces. The Spotify green is used as an accent colour to highlight key actions.

Colour palette for Spotify app integrated into Google Maps: black #141414, white #F2F2F2, Spotify green #1ED760 and red #FF1000.

Font

We chose Avenir Next as the main font: a typeface guaranteeing excellent readability on the move, ideal for mobile interfaces and in-car displays. I defined all necessary typographic styles to ensure visual consistency and a clear hierarchy between titles, secondary texts, and voice commands.