Web design UX/UI
Rail transport, mobility and digital product
Adif—AppUIDesign
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
Categories
Services
Context and challenge
Working with the visual system of an organisation like Adif demands precision and judgement. The client didn't arrive with a blank canvas: there were 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:
- interpreting the existing visual system and translating it into a mobile interface without distortions or improvisation
- designing a clear, functional experience for a technical and operational use context
- resolving complex screens — searches, results, alerts, states, navigation — while maintaining visual consistency throughout
- producing final assets with the precision that mobile implementation requires
- working within the bounds of the corporate system without compromising interface quality
Strategic approach
When the identity is already defined, UI design becomes an exercise in precision and consistency. It is not about being creative in the traditional sense, but about making the right 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:
- fidelity to the corporate system as a starting point, not a constraint
- functional clarity on every screen as the primary decision-making criterion
The interface had to feel like part of Adif, not like a foreign product forced into its visual frame. That required a thorough understanding of the graphic documentation before a single screen was designed.
Scope of work
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
UI interface design
- 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
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 without ambiguity.
Every screen was designed with the context of use in mind: 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 needs to communicate clearly when something fails, when results are empty, when the system is loading or when an action is unavailable. Each of those states was designed with the same rigour as the main screens.
Asset production
Delivering the app does not end with 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 reduce friction between design and development.
Result and transformation achieved
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 without sacrificing usability.
SIMA's contribution on this project was concrete and executable:
- interpretation of the corporate system and translation into a mobile environment
- screen, flow and state design with visual consistency throughout
- production of final assets ready for implementation
- organised, 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 without becoming a flat catalogue of mechanically applied rules. Every screen works as part of the whole — recognisably Adif, usable as part of a real application.
Guía de color
Colores primarios
Adif UI Green
#86a20c
Pantone 377 C (aprox.)
Operational Green
#00653C
Pantone 349 C (aprox.)
Action Green
#71973C
Pantone 377 C (aprox.)
Colores secundarios
Rail Blue
#002D35
Pantone 5463 C (aprox.)
Deep Green
#1A4149
Pantone 5463 C (aprox.)
Technical Line
#33575D
Pantone 5473 C (aprox.)
Interface Grey
#4A4A4A
Pantone 446 C (aprox.)
UI Mist
#F1F1F1
Pantone Cool Gray 1 C (aprox.)
Strategic reading
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. Creativity here is not about redefining the palette — it is about knowing how to apply it precisely where it matters.
On the Adif project, every interface decision had to be justified within the system. That constraint, far from being an obstacle, 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 without ambiguity. That is what well-executed interface design looks like.
More projects
