Madrid en Contraste
CEU San Pablo University · Jun 2021 · Madrid
UX/UI
mobile app
UX research
rebranding
brandbook
double degree final thesis
cum laude
PROJECT
Unlike other global cities, Madrid lacks a cohesive and openly recognizable branding, so I identified this opportunity to merge my two bachelor's degree's thesis, creating "Madrid en Contraste". This project, which is composed of a city branding proposal and a mobile app, aims to improve Madrid's visual recognition, contribute to its digitalization, promote the cultural agenda and increment tourism.
*In Spanish, there is a wordplay in “encontraste and en contraste”. The first one means “in contrast to” and the second title would translate into “Madrid was found”.
REBRANDING - DESIGN TASK
An in-depth investigation about the Spanish city was carried out, along with it's current perception through a self-made survey that proved that the majority of the participants, including locals, expats and turists, do not associate any image with Madrid.
After the extensive benchmarking of other cities' brandings and UX research of of Madrid-based cultural apps, the conceptulization of the proposal took a practical approach. The outcome is a detailed brandbook, which gathers all the style elements and aesthetic specifications, along with the usage guidelines for the correct application of the design proposal.
+200
answers
68%
don't have a visual association to Madrid
REBRANDING - WORK PROCESS
The strategy of the proposal is based on the respect for the city’s values and history, in contrast to the need of modernization and adaptability. The art direction relies on existing mental associations symbolism, with warm colors and strong inspiration from the Bauhaus school: a functional thinking based on a transformational key visual that ensures recognition, even when the main version changes. This is exactly the concept behind the triangles of “Madrid en Contraste”: the contrast of the transformation from the tradition into the future.
Strategy & Concept
The initial letter from the name of the city: The “M” from Madrid and from”madrileños/as”
Triangles: taken from the stars of the Comunidad de Madrid: tradition as base for evolution
Creativity, adaptability, dynamism & accessibility: some of the characteristics of the city
The point where everything confluences: the km 0. Where everything en contraste.
Color contrast & wheel: represents where we come from, what we are and where we are going
Six colors: bright, live, strong and close. Our colors, inspired by the national and regional flag
A part of our history: represented by the typefont of the tiles that name the streets that have seen us grow up
Logotype
It consists of a geometrical icon and a word mark, an regardless of its strong meaning, there is still space to interpretation. This freedom is what will strengthen the connection between the person and the city, bringing Madrid closer to them and making it feel a bit more their own.
Colors
The 6 shades palette fills the proposal with vibrancy, personality and meaning. Each of them represents a trait of Madrid, and all of them create a strong contrast among themselves. The red, which is the starting point of the color wheel, pays homage to the Community of Madrid. It seeks to represent the city's roots and is directly related to love, passion, and connection.
Typeface
The primary typeface is “Chulapa Bold”, a free and open-source font that Madrid City Council also uses. It is non-geometric and highly recognizable, strongly associated with Madrid’s ceramic tiles that mark the street names. It also has glyphs for certain characters, offering maximum dynamism at the same time as easy mental connection.
The secondary typeface is an open source called Omnes (by Darden Studio). Although application varies with each creative piece, the use is limited to the weights between Thin and Semi-bold for highlights. This fluid font is relaxed and provides visual balance and functionality.
Both typefaces appear together in communications, since they share characteristics aligned with the brand’s attributes, and their combination conveys trust and approachability.
Key Visual
Just like the icon, it is based on triangles that can be repositioned and rotated in creative ways to recompose into other visual constructions and adapt into new designs. It carries the implicit meaning of taking a part of tradition to build something modern.
Pattern
It is formed from the key visual. The triangles make up a dynamic, flexible, and adaptable pattern suitable for any format.
Verbal Identity
The tone of voice is informal and approachable, aiming for a “one-on-one” communication style. All the texts across materials are fun, direct and easy to understand, even including colloquial words and popular idioms. The strategy is to make everyone feel part of Madrid, speaking like a true Madrileño (local).
Madriz
Mola mazo
Me flipa
Me rents
Te catas
Garito
Canteo
Pibe
Ir a pachas
Debuti
Delux
Chupa
MADRID APP
With this part of the project I intended to prototype a smartphone app that gathers useful information both for citizens and visitors and services offered by the Madrid Tourism Department in combination to other features, such as an informational portal for addressing common questions.
Work started with an in-depth investigation about nowadays social and digital paradigm in the Spanish capital, along with a market competitors analysis. The prototype was developed in Adobe XD, and it consisted of the app hero screens design, content and interactions to provide the realest testing experience possible. Moreover, there was a style guide and Component Library that covered all the graphic assets as well as design rules of the proposal.
Target Public
This app is aimed at both Madrid locals and visitors, since the cultural agenda should be accessible to everybody, but other features might be blocked unless the user registers. For this reason, there are no requirements to download the app, which is available for free on mobile devices.
User Journey
It is the integration of all these into a single digital space, where everything needed to enjoy the city is centralized in one place, with the assurance that the content about the city and activities is accessible, reliable and up to date.
Value Proposition
-
Digitalize the services of Madrid Tourism Department
-
Centralize all live updated governmental information
-
Habilitate a communication supportive channel
-
Increase visibility and discovery of cultural activities
-
Improve the perception about Madrid city
-
Foment digitalization
-
Provide a virtual space accessible to everybody
-
Propose a potential space for advertising
Goals
App Sections
Nearby "Cerca"
It consists of a map that the user can navigate to discover nearby points of interest, including places and events. Results can be sorted and filtered by categories, and are displayed in an expandable format if they want additional information on them
News Feed "Muro"
This section chronologically archives all official announcements by topic, so users can check the latest updates.The format looks like a thread. To improve the experience, there is a keyword system so that information is easier to find
Agenda
A complete list of cultural events can be viewed here either from a calendar view or by using the category grid
Info
In this portal user can find information via FAQs, or through a live chat
Profile + Settings
Users can manage their accounts and access their favorited elements
Nearby (Home)
Agenda View 1
Info / Support
News Feed
FINAL DESIGN
FINAL REFLECTION
I have enjoyed every part of working in a project with such strong personal interest for me - contributing to my pride on my hometown. I am satisfied with the city branding proposal, since I believe it pays respects to the origins of the city: the essence and the personality of Madrid, a city open to everyone and for everyone, no matter where you are from; while opens the door to a flexible future that adapts and perdures over new times. All this is collected in a brandbook open to the public.
On the other hand, the interface design has posed a fun challenge, and its outcome is an entire fully functional prototype, detailed with relevant content and polished with microcopying, that could be presented to the Community of Madrid. All in all, it has been an amazing learning experience, beyond academics — one that improves people’s lives and adds value to Madrid.