Contact Contact Me
Toggle Theme
eWa eWa Logo
eWa Mobile Light

/ Project Overview

The modern Designer-as-Builder workflow shifts the focus from static screens to functional product logic. After structuring the product environment with NotebookLM and Google Stitch, I used Google Antigravity, Flutter, and AI-assisted development workflows to turn UI concepts into a working, deployable wallet application.

concept branding motion UI Design development working product

Solo Designer & Builder

UX/UI Design · Android APK · Web App

electronic / Wallet / app = eWa

Industry

Electronic Wallet

Mobile Tickets

Smart Parking

E-Vignettes

Year
2026
Timeline
2 weeks

/ Executive Summary

The Austrian Mobility Wallet Challenge

Designing a wallet app means balancing complexity and trust. The product needed to combine several everyday mobility and payment services — smart parking, e-vignettes, mobile tickets, wallet flows, and account management — without overwhelming the user.

The challenge was to create a product architecture that feels simple on the surface, while still being robust enough for financial interactions, mobility services, and clear Euro-based transaction logic.

For the Austrian market context, I focused on privacy-minded UX, data clarity, readable financial information, and a clean visual system that feels trustworthy rather than overloaded.

Product Designer UX/UI Designer Design Engineer AI-Assisted Prototyping

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

Key Tech

Figma, Google Stitch, NotebookLM, Google Antigravity, Flutter, Next.js

Core Challenge

Working Android APK, Web App & 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 directly in your browser. Explore the interface, test the flows, and see how the product design translates into a working application.

/ Design process & Timeline

Structuring complexity from initial product logic and user flows to high-fidelity UI architecture, with a focus on clear payment paths and working product execution.

Research

1 Day
Collected relevant market, UX, and product context in NotebookLM.
Used AI-assisted synthesis to identify pain points, service categories, and product requirements.
Defined the first product prompt and system direction.

Design

3 Days
Created initial wireframes, branding direction, and interface structure.
Connected Google Stitch and MCP workflows for design-to-code exploration.
Defined the visual system, motion direction, and component logic.

Development

9 Days
Prepared the Flutter environment and mobile development workflow.
Translated product prompts and UI concepts into a working application.
Built a deployable MVP with Android APK and Web App access.
WORKING PRODUCT

/ UX/UI Solution

palette

Architectural Scalability:
Beyond Aesthetics

Token-Driven Framework: I replaced static styling with a semantic variable system for colors, surfaces, typography, and interface states. This made the visual system more consistent, scalable, and implementation-ready.

Engineering Alignment: The design structure mirrors implementation logic. Components, states, and tokens create a shared language between interface design and front-end execution.

Adaptive Experience: Light and Dark themes are treated as system-level outputs, not separate visual skins. This keeps contrast, readability, and trust consistent across different usage contexts.

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

/ Research & Market Analysis

For this self-initiated MVP, I used NotebookLM as an AI-assisted research and synthesis tool. I combined UX studies, ergonomics material, fintech references, and mobility-service patterns to identify recurring pain points in wallet and payment experiences.

Complex interfaces

Clarity over complexity

Reducing cognitive load through focused, minimal UI.

Lack of clear guidance

Guided user flows

Step-by-step interactions that reduce uncertainty and help users complete key tasks.

Limited financial visibility

Transparent financial data

Clear visibility into balances, payments, ticket states, and transaction-related information.

/ User Flow

Insurance UI Showcase Mobile

/ User Flow

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

A logical flow architecture keeps navigation predictable, purposeful, and easy to understand across multiple service categories.

Login UI Showcase Wallet UI Showcase

/ Typography

Inter was selected for its strong screen readability, tall x-height, and flexibility across interface sizes. It supports everything from small labels and navigation elements to complex wallet data, tables, and transaction information.

Inter
Aa
Light
Regular
Medium
Semibold
Bold

/ Color

The teal and purple palette was designed for dual-theme consistency. Each color was adapted for both Light and Dark environments to support contrast, accessibility-minded decisions, and a premium fintech feel across the product.

#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

The handoff to engineering was not a static PDF. It was a working application.

Using Google Antigravity and Flutter, I moved from drawing screens to building functional product logic, including simulated payment flows, cross-platform navigation, and deployable app structures.

UI mockups became working product surfaces. The result was not only a visual prototype, but an executable MVP that demonstrates how product thinking, design systems, and implementation can move together.

UI Mockups Grid
Code Snippet

The handoff was not a static file. It was a working application with simulated product logic.

/ Deployment: Smart Cross-Platform Strategy

Smart Cross-Platform Deployment

To keep the project lean and accessible, I deployed a native Android APK alongside an optimized Web App. This allowed Android users to test a native-feeling experience while iOS users could explore the product directly from their mobile browser.

This approach avoided early-stage app store friction and kept the MVP focused on validation, accessibility, and product experience.

Antigravity Code
Android APK
Safari Web App
eWa App

/ Brand Identity

The eWa brand was designed to adapt across different services and product surfaces, from wallet interactions and mobility flows to payment-related screens and visual communication.

The goal was to maintain visual harmony, dual-theme consistency, and a premium fintech feel without making the interface feel heavy or overly decorative.

eWa Brand Screens

Product Vision

Future Roadmap & Vision

As a working prototype, eWa proves the product concept. The next steps would move it from MVP toward a broader market-ready wallet experience.

smartphone

Phase 1

Expanding the Ecosystem

The immediate next step is turning the remaining UI placeholders — including Mobile Ticket and Insurance screens — into fully interactive, data-driven Flutter screens. This would complete the core wallet experience and create a smoother end-to-end 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 as a later-stage expansion
widgets

Phase 2

The Composable Subscription Hub

star Future Feature

A differentiating future concept for eWa is a modular subscription hub where users can add, configure, and manage recurring services such as streaming, cloud storage, gym memberships, and other subscriptions. The goal is financial clarity: payment dates, recurring Euro costs, pause/cancel actions, and central control in one place.

Modular Blocks Cost Transparency One-Tap Cancel Central Control

Design That Thinks Through Implementation

The eWa Wallet App shows how deep UX/UI experience, product systems thinking, and AI-assisted workflows can help a designer act as a technical bridge-builder. Bridging the gap between business logic, user experience, and implementation is no longer just a positioning statement. In this project, it became an executable workflow.