Metro of Madrid
Industry
Public Transport | Urban Mobility
Public Transport | Urban Mobility
Roles
UI Design – Concept Development
– Visual Direction
UI Design – Concept Development
– Visual Direction
Overview
Redesign of Cosentino’s internal platform focused on clarity, hierarchy and structure. The goal was to modernize an outdated system and create a more intuitive, visually coherent experience. The interface was built to be clean, scalable and easy to navigate across different internal contexts.
Redesign of Cosentino’s internal platform focused on clarity, hierarchy and structure. The goal was to modernize an outdated system and create a more intuitive, visually coherent experience. The interface was built to be clean, scalable and easy to navigate across different internal contexts.
A look at the city behind the system
From architecture to signage, movement and daily routines, the visual inspiration draws directly from Madrid’s rhythm and structure. These references helped anchor the tone of the product in its real context.
From architecture to signage, movement and daily routines, the visual inspiration draws directly from Madrid’s rhythm and structure. These references helped anchor the tone of the product in its real context.
From interface to environment
The design direction was tested in a real-world context to explore how visual elements could translate beyond the app. Typography, color and layout hold together even outside the screen.
The design direction was tested in a real-world context to explore how visual elements could translate beyond the app. Typography, color and layout hold together even outside the screen.
Introducing what’s new
The onboarding sequence presents key features added to improve the overall experience. Each screen highlights a benefit with a concise, purposeful visual.
The onboarding sequence presents key features added to improve the overall experience. Each screen highlights a benefit with a concise, purposeful visual.
One screen, all essentials
The onboarding sequence presents key features added to improve the overall experience. Each screen highlights a benefit with a concise, purposeful visual.
The onboarding sequence presents key features added to improve the overall experience. Each screen highlights a benefit with a concise, purposeful visual.
One screen, all essentials
The homepage was designed as the core control center of the app. From ticket access to trip setup, everything is laid out to be intuitive and quick to interact with.
The homepage was designed as the core control center of the app. From ticket access to trip setup, everything is laid out to be intuitive and quick to interact with.
A tool for navigating the city
The app expands its purpose by integrating real-time data and location-based content. Designed for locals and visitors alike, it offers utility beyond pure transport.
The app expands its purpose by integrating real-time data and location-based content. Designed for locals and visitors alike, it offers utility beyond pure transport.
Designed for confident transactions
Wallet management and recharge screens were simplified to ensure ease and trust. Every step in the flow was designed to feel smooth, clear and secure.
Wallet management and recharge screens were simplified to ensure ease and trust. Every step in the flow was designed to feel smooth, clear and secure.
User Persona
name: Pablo González
name: Pablo González
age: 32
age: 32
occupation: Software Engineer
occupation: Software Engineer
Young professional working in tech, commuting daily via Metro. Values efficiency and punctuality, using the app to plan routes quickly and stay on time for meetings.
Young professional working in tech, commuting daily via Metro. Values efficiency and punctuality, using the app to plan routes quickly and stay on time for meetings.
name: María Rodríguez
name: María Rodríguez
age: 24
age: 24
occupation: Architecture Student
occupation: Architecture Student
University student who uses the Metro to reach campus and explore the city. Relies on clear route info and enjoys using the app to discover new spots and local landmarks.
University student who uses the Metro to reach campus and explore the city. Relies on clear route info and enjoys using the app to discover new spots and local landmarks.
