Adif — App UI Design
UI design project for Adif's mobile app developed by Elecnor Deimos: application of corporate visual identity, mobile UX/UI and production of final assets.
- Client
- Elecnor Deimos / Adif
- Year
- 2014
- Sector
- Rail transport, mobility and digital product
- Location
- Madrid
Context and challenge
Working with the visual system of an organisation like Adif demands precision and judgement. The client arrived with a system already written: colours, proportions, icons, usage rules and graphic documentation that had to be respected with exactness. Our work started where the corporate identity ended and the user experience began.
The challenge had several dimensions:
- 01interpreting the existing visual system and translating it into a mobile interface with complete fidelity
- 02designing a clear, functional experience for a technical and operational use context
- 03resolving complex screens — searches, results, alerts, states, navigation — while maintaining visual consistency throughout
- 04producing final assets with the precision that mobile implementation requires
- 05working within the bounds of the corporate system and using them to raise interface quality
Strategic approach
When the identity is already defined, UI design becomes an exercise in precision and consistency. Creativity shows in well-judged decisions: which colour belongs in which state, how typography scales on small screens, which icon communicates each action best within the established visual language.
We framed the project around two principles:
- 01fidelity to the corporate system as a starting point and a springboard
- 02functional clarity on every screen as the primary decision-making criterion
The interface had to feel naturally part of Adif. So we absorbed the graphic documentation in depth before designing the first screen.
What we made.
01
Analysis and corporate system assimilation
- reading and applying Adif's graphic standards
- analysis of colour palette, iconography and visual criteria
- interpretation of the system for translation into a mobile environment
- alignment with technical documentation provided by Elecnor Deimos
02
Interface design (UI)
- design of main screens and navigation flows
- visual hierarchy adapted to mobile screen resolutions and densities
- state design: active, inactive, error, loading, empty
- search and results screens
- alerts, notifications and system messages
- reusable components aligned with the corporate visual language
- visual consistency review across all screens
03
Asset production
- export and preparation of assets for the development team
- icons, buttons, backgrounds and graphic elements at multiple densities (mdpi, hdpi, xhdpi, xxhdpi)
- technical specifications for implementation
- documented, organised delivery for the Elecnor Deimos development team
Interface design
The ELCANO app handled operational rail information: searches, results, alerts, section navigation and system states. That content demanded interfaces that were clear, readable in varying light conditions and capable of communicating priorities with complete clarity.
Every screen was designed around the user experience and its context of use: mobility, technical information, fast decision-making. Visual hierarchy was the primary design instrument — what comes first, what can wait, what requires immediate action.
States were a critical part of the work. An operational app guides the user through every situation: an error, empty results, a load in progress or an action on hold. Each of those states was designed with the same rigour as the main screens.
Asset production
Delivering the app goes beyond mockups. Assets must reach the development team organised, correctly named and available at every required screen density.
We prepared the complete export: icons, graphic elements, backgrounds and visual components at mdpi, hdpi, xhdpi and xxhdpi densities, using the naming conventions and file structure expected by the Elecnor Deimos development team. Delivery was documented to streamline implementation and make the handover from design to development seamless.
Result and transformation
The project delivered a coherent, technically prepared interface fully aligned with Adif's corporate visual system. The app could be implemented with complete assets, clear specifications and a design that respects the organisation's identity and looks after usability on every screen.
- 01interpretation of the corporate system and translation into a mobile environment
- 02screen, flow and state design with visual consistency throughout
- 03production of final assets ready for implementation
- 04organised, documented delivery for the development team
Visual development
Adif's graphic identity has a clearly defined institutional and technical character: solid colours, a green-anchored palette, functional typography and a rigorous iconographic system. Translating that system into the app required decisions about how the palette behaves on screen, how corporate icons adapt to small touch targets and how visual consistency holds as the interface changes state.
The result respects the source system and brings it to life on screen. Every screen works as part of the whole — recognisably Adif, usable as part of a real application.
Tap a colour to copy its code
Working on an established corporate identity is a different exercise from building a brand from scratch.
It requires reading the system carefully, understanding its actual limits and knowing where there is room for considered decisions. Here, creativity lies in applying the palette precisely where it matters. On the Adif project, every interface decision had to be justified within the system. That rigour defines the quality of the result: an app that reads as part of the organisation, works well in use and can be implemented by the development team with complete clarity. That is what well-executed interface design looks like.
Spaces · 3D Visualisation
Mamula Island