Contact Contact Me
Toggle Theme
eWa eWa Logo
eWa Mobile Light

/ Project Overview

The 2026 'Designer as Builder' paradigm shifts focus from static screens to building functional logic. After planning the environment with Notebook LM and Google Stitch, I utilized Google AntiGravity — Google's AI-agent-based IDE — and Flutter to transform UI mockups into fully functional, deployable applications.

concept branding motion UI Design development working product

Solo designer and developer

UX/UI Design & Android APK

electronic / Wallet / app = eWa

Industry

Electronic Wallet

Mobile Tickets

Smart Parking

e-vignettes

Year
2026
Timeline
2 weeks

/ Executive Summary

The Austrian Market Challenge

Designing a Wallet App requires balancing complexity. It must house multiple critical services—like smart road tolling, parking meters, and comprehensive digital wallets—without overwhelming the user. The primary challenge was crafting an architecture robust enough for mobility but secure enough for daily fintech operations in EURO (€).

Targeting the Austrian market meant adhering to high expectations of privacy, data clarity, and clean, uncompromised aesthetics.

UI/UX Designer AI Prototyper Material 3

*Note: Installing the APK may require enabling "Unknown Sources" in your Android settings.

Key Tech

Figma, Google Stitch, Notebook LM, Antigravity, Flutter, Next.js

Deliverable

Functional Android APK & Design System

Parking Map Snippet (Light)
Parking App on Phone (Light)

/ Live Demo

phone_android

Try the Live App:
Experience in Action

Interact with the actual eWa Wallet App in your browser. Test the interface, explore features, and see how the design translates to a real working application.

/ Design process & Timeline

Structuring complexity: From initial user flows and pencil sketches to high-fidelity architecture, focusing on logical payment paths.

Research

1 Day
Uploading all relevant data to NotebookLM
Consulting with NotebookLM
Define prompt

Design

3 Days
Wireframe
Branding
Connect MCP
Motion

Development

9 Days
Implement Prompt from NotebookLM
Preparing Environment for Mobile Dev.
Start Building Real Product
WORKING PRODUCT

/ UX/UI Solution

palette

Architectural Scalability:
Beyond Aesthetics

Token-Driven Framework: I replaced static styles with a Semantic Variable System (surface-primary, text-accent) for cross-platform consistency. This architecture enables instant white-labeling and scalable, logic-based global updates.

Engineering Alignment: The structure mirrors JSON schemas, cutting design-to-dev friction by 70%. This "Single Source of Truth" ensures that accessibility (WCAG) is inherited at the token level, not retrofitted.

Adaptive Experience: Light/Dark transitions are programmatic outputs of the variable logic. This ensures perfect legibility and trust in any lighting condition via automated, system-wide theme-switching.

Design Tokens System
Tickets Screen (Light)
Tickets Mobile (Light)

/ Research & Market Analysis

Instead of traditional user interviews, I used NotebookLM as an AI research engine — feeding it UX studies, ergonomics research, and market data to identify real pain points in mobile wallet

Complex interfaces

Clarity over complexity

Reducing cognitive load through focused, minimal UI

Lack of clear guidance

Guided user flows

Step-by-step interactions that eliminate confusion

Limited financial insights

Transparent financial data

Real-time visibility into balances and transactions

/ User Flow

Insurance UI Showcase Mobile

/ User Flow

Onboarding
Sign Up
Password
Email
With Google
Sign In
Dashboard
E-Vignette
Mobile Ticket
Smart Parking
Wallet
Insurance
Tickets
Profile
Log Out

A logical flow architecture that mirrors how users actually think — keeping navigation predictable, purposeful, and friction-free.

Login UI Showcase Wallet UI Showcase

/ Typography

Inter is a variable sans-serif font engineered for screen readability featuring a tall x-height that ensures clarity across all sizes, from interface labels to complex data tables.

Inter
Aa
Light
Regular
Medium
Semibold
Bold

/ Color

A bold teal and purple palette built for dual-theme consistency — each color purposefully adapted for both Light and Dark environments, ensuring contrast, accessibility, and visual harmony across every screen.

#082a33
#04c2c2
#5A00D1
#6E00FF

Light Theme

Primary:
#10424F
Accent:
#6E00FF
Surface:
#FFFFFF
Primary Dark:
#082a33
Accent Dark:
#5A00D1
Background:
#F1F5F9

Dark Theme

Primary
#06f9f9
Accent
#6E00FF
Surface
#1f2635
Primary Dark
#04c2c2
Accent Dark
#5A00D1
Background
#0a0e17
eWa Brand Identity Mobile

/ Brand Identity

/ Development: Designer as Builder

Embracing the 2026 'Designer as Builder' paradigm, the handoff to engineering wasn't a static PDF—it was a fully working application. Using Google Antigravity and Flutter, I shifted the focus from merely drawing screens to building functional logic, complete with simulated payments and cross-platform navigation.

UI Mockups Grid
Code Snippet

The handoff to engineering wasn't a static PDF, it was a working application with simulated payment logic.

/ Deployment: Smart Cross-Platform Strategy

Smart Cross-Platform Deployment

To keep the project lean and bypass the costly Apple App Store requirements, I deployed a native Android APK alongside a fully optimized Web App.

This strategic cross-platform approach allows iOS users to explore the complete experience seamlessly from their mobile browsers.

Antigravity Code
Android APK
Safari Web App
eWa App

/ Brand Identity

Showcasing how the eWa brand adapts across different touchpoints and services. Maintaining visual harmony, dual-theme consistency, and a premium fintech appeal.

eWa Brand Screens

Product Vision

Future Roadmap & Vision

As a working prototype, eWa proves the concept. These are the two strategic phases that would take it from MVP to market-ready Wallet App.

smartphone

Phase 1

Expanding the Ecosystem

The immediate next step is transitioning the remaining UI placeholders — including the Mobile Ticket and Insurance screens — into fully interactive, data-driven Flutter screens. This will complete the core Wallet App experience and deliver a seamless, end-to-end user journey across every eWa service.

  • check Mobile Ticket & Transit screens
  • check Insurance & document hub screens
  • check Full data-driven Flutter integration
  • German language activation
  • check Light theme integration
  • iOS implementation (low priority since high expansion cost)
star Unique Feature
widgets

Phase 2

The Composable Subscription Hub

A truly innovative feature I have not seen in any competitor: a LEGO-style modular system where users freely add, configure, and stack custom subscription blocks — Netflix, OneDrive, Spotify, gym memberships, and beyond. Users gain total financial transparency, tracking payment dates, monitoring recurring Euro costs, and pausing or cancelling any subscription with a single tap — all from within eWa.

Modular Blocks Cost Transparency 1-Tap Cancel Central Control

The Future of Collaborative Design

"The eWa Wallet App proves that combining 20+ years of systematic UI/UX experience with cutting-edge AI logic accelerators allows designers to act as technical bridge-builders. Bridging the gap between functional business solutions and high-engagement interfaces is no longer just a tagline; it's an executable workflow."