Visual Identity – UI
BiciMad
2021
Final project in the context of a Creative UI course. BiciMad is Madrid’s shared Bicycle service. Its visual identity hasn’t been renewed in over 10 years.
Having received a detailed brief and information about the service, the brand positioning and brand personas, we had to propose a totally new visual identity and apply it to the Web site and App. The logo and naming wasn’t to be changed.
Design Pillars
The modernisation and expansion of the service needed to be reflected in the design of their main touchpoints (website and the App). The visual identity needed to convey the concepts of Efficiency, Movement, Connection and Digital. These concepts were used as a base to define 4 main design pillars:
Gradient colours
Gradients are a great way of conveying movement as by definition, they are a transition from one colour to another. Furthermore, gradients are often related to technology and innovation.
Patterns
Patterns are great as a recognisable elements for the visual identity. They allow to break monotony, build a visual language and bring movement in static compositions.
Animations
Animation have become a must for digital brands. However, it is important to not overload pages or disrupt the reading rhythm and serenity of the user.
High contrast typography
Using large typography scales allow the user to scan through the information efficiently. By creating a strong content hierarchy, we guide the user through the featured news and elements.
Colours and Gradients
Connecting with the young and dynamic Brand persona through vibrant colours.
Madrid Municipality’s brand colour being red, it was important to include some trait of its personality in the visuals. It is accompanied of vibrant fuchsia and blue who relate respectively to youth and open air spaces.
Gradients are created with the warmest colours of the palette.
Two different gradient backgrounds are set as a base for backgrounds. They can also be overlapped with the geometrical shapes.
Typography
Apercu Arabic Pro is a type which works very well on digital interfaces for headlines and body copies. It
has a very solid and confident feeling to it.
This font is used throughout the project with high contrasts in size and weight. It allows the user to find the information easily and transmits a sense of efficiency.
Patterns
Each pattern represents one of the concept identified as core element of the brand strategy.
They are used to texturize backgrounds and as key elements of the visual identity.
Photography
People connect to people. Using genuine photography with natural lighting transmits security, positivity and helps the user to identify him/her self with the service.
Desktop Home page
The home page is a great way of showcasing all the elements of the visual system. It was important to find a good vertical rhythm and balance all the elements in a way that the user can read and go through the information in the most efficient and welcoming way.
App design
The App is the main touchpoint as it is the way the user interacts with the service. It needs to be intuitive, functional but also needs to transmit the brand’s personality and vibe.
