AGB Billing
Mobile UI
High-fidelity Figma prototype for a mobile billing application. Login-based access with a Quick Pay home screen, invoice management and payment flows. Designed during a short-term contract at AGB Communication Co., Ltd., following Material Design 3 guidelines.
Overview
Independently conceived and designed a mobile billing application from the ground up during a short-term contract at AGB Communication Co., Ltd. With no existing system to reference, defined the full system flow, user journeys and information architecture from scratch. Translated those flows into high-fidelity Figma prototypes following Material Design 3 guidelines - covering payment screens, billing history, invoice detail views and account management. Focused on mobile-first design, thumb-friendly navigation and a clean, consistent visual language.
Tool
Figma
Standard
Material Design 3
Type
Mobile Application
Contract
Short-term
Key Features
Mobile-first Design
Thumb-friendly tap targets and minimal navigation depth optimised for one-hand use.
Material Design 3
Google's MD3 component library - colour tokens, typography scale and elevation system.
User Flows
End-to-end flows from login → Quick Pay home → invoice view → payment and account settings.
High-fidelity Frames
Pixel-perfect mockups with interactive prototype links for stakeholder review.
Screen Coverage
Login
Secure credential-based login as the app entry point - no onboarding flow
Home & Quick Pay
Landing screen with a Quick Pay shortcut and a menu for navigating key sections
Invoice Detail
Full invoice breakdown with itemised charges and payment options
Payment Screen
Multi-method payment with confirmation and receipt summary
Billing History
Filterable transaction and invoice history list
Account Settings
Profile management and user preferences
Design Process
System Conception
With no prior system to reference, independently defined the full product concept from scratch - identifying what a mobile billing app should do, who would use it and what key journeys it needed to support.
Information Architecture
Mapped out screen hierarchy and navigation flows covering onboarding, billing, payments, history and account management.
High-fidelity Design
Applied Material Design 2 guidelines - colour system, typography scale, elevation and component library - to produce pixel-perfect mockups.