Interface design
Building from scratch the design system & composants to refresh an old connnectivity app.
Design System
The design system was built using IBM Plex Sans, featuring a comprehensive typography scale, an extensive icon library with over 100 custom XChange icons, and a structured color palette including brand blues, semantic states, and dark/light mode support.
Components
All screens were built as self-contained components in light and dark mode, covering key flows such as transactions, documents, profile, connection states, and progress indicators. Each component was designed to be reusable and consistent across the app.
Wireframing
The wireframes focused on the core connectivity dashboard, mapping out the connection status, data plan distribution across Corporate, Personal, and eWallet accounts, and key actions like refilling the wallet or disconnecting. The layout prioritized clarity around usage and real-time state.
Prototyping
The prototype demonstrated the live connected experience — showing the active VPN session timer, a stacked card wallet interface for switching between eWallet, Personal, and Corporate plans, and a filterable transaction history. It allowed stakeholders to validate key interactions before development.