EN
Railway Wallet · Onboarding & Motion Design
Railway is a private DeFi wallet powered by the RAILGUN privacy network, allowing users to protect, send, and swap assets on Ethereum, BNB Chain, Polygon, and more — all with complete confidentiality.
Objective
The goal was to develop a consistent and functional visual experience to support the app’s onboarding flow and system states, using custom illustrations and animations that reinforce the brand’s core values: security, privacy, and simplicity.
Onboarding Illustrations
We created three custom illustrations as part of the onboarding visual system, designed to clearly and playfully communicate Railway’s key features:
Welcome
Features a wallet next to a mobile phone, representing privacy and control over your money from anywhere. The fluid motion symbolizes the freedom to transfer assets within a secure environment.
Features a wallet next to a mobile phone, representing privacy and control over your money from anywhere. The fluid motion symbolizes the freedom to transfer assets within a secure environment.
Security
A central shield icon reinforces the message of asset protection and system-wide security.
A central shield icon reinforces the message of asset protection and system-wide security.
Privacy
A lock and a secret key visually communicate encrypted privacy and the protection of private keys, core elements in any DeFi ecosystem.
A lock and a secret key visually communicate encrypted privacy and the protection of private keys, core elements in any DeFi ecosystem.
Motion Design: Loading, Success & Error
To complement the onboarding illustrations, we designed animated system states:
Loading GIF
A seamless infinite loop that accompanies waiting times, maintaining a soft and cohesive aesthetic aligned with the product’s tone.
A seamless infinite loop that accompanies waiting times, maintaining a soft and cohesive aesthetic aligned with the product’s tone.
Success
When an action is completed successfully, a checkmark (✓) animation appears, providing immediate visual confirmation.
When an action is completed successfully, a checkmark (✓) animation appears, providing immediate visual confirmation.
Error
If the action fails, a cross (✕) animation is triggered, clearly indicating the error to the user.
If the action fails, a cross (✕) animation is triggered, clearly indicating the error to the user.
---
ES
Railway Wallet · Onboarding & Motion Design
Railway es una billetera DeFi privada impulsada por la red de privacidad RAILGUN, que permite proteger, enviar e intercambiar activos en Ethereum, BNB Chain, Polygon y más redes, todo de forma confidencial.
Objetivo del proyecto
Desarrollar una experiencia visual coherente y funcional para acompañar el flujo de onboarding y los estados de carga de la app, utilizando ilustraciones personalizadas y animaciones que refuercen los valores de seguridad, privacidad y simplicidad que transmite la marca.
Ilustraciones para el Onboarding
Se crearon tres ilustraciones como parte del sistema visual del onboarding, diseñadas para explicar de forma amigable y clara las funciones clave de Railway:
Bienvenida
Muestra una billetera junto a un teléfono móvil, representando la privacidad y control del dinero desde cualquier lugar. El movimiento fluido simboliza la libertad de transferencias dentro de un entorno protegido.
Seguridad
Un escudo como elemento central, reforzando la protección de los activos y la seguridad integral del sistema.
Privacidad
Un candado junto a una clave secreta representa la privacidad cifrada y la custodia de claves privadas, elementos fundamentales en el ecosistema DeFi.
Animaciones: Loading, Éxito y Error
Complementando el sistema visual del onboarding, se diseñaron animaciones para los estados del sistema:
Loading GIF
Un loop infinito que acompaña los tiempos de espera, manteniendo una estética suave y coherente con el resto del diseño.
Un loop infinito que acompaña los tiempos de espera, manteniendo una estética suave y coherente con el resto del diseño.
Éxito
Al completarse una acción correctamente, se superpone una animación de tilde (✓), que comunica confirmación de forma directa y visual.
Al completarse una acción correctamente, se superpone una animación de tilde (✓), que comunica confirmación de forma directa y visual.
Error
En caso de fallo, aparece una animación de cruz (✕), indicando claramente que la acción no pudo completarse.
En caso de fallo, aparece una animación de cruz (✕), indicando claramente que la acción no pudo completarse.
