Year
2023
My Role
UI/UX Designer
Responsibility
End to end UX/UI design
Project Background
Shin Nan Gas previously used paper-based billing. To reduce printing costs and improve convenience, the company planned to launch a mobile bill inquiry and payment system. Since most users are older adults with limited digital experience, the challenge was to design a clear, intuitive, and reassuring interface that supports first-time users in completing their tasks smoothly.
User Insights
Many Shin Nan Gas users are middle-aged or older and rely on paper bills to remember payment deadlines. Without direct interviews, we analyzed public research to identify common issues such as poor readability, visual overload, and unclear flows. These insights guided our design approach to better support users unfamiliar with mobile systems.
Design Principles
To reduce friction for older users, we followed accessibility guidelines and focused on three key areas: clear visual hierarchy, simple task flow, and supportive error handling. These principles help build confidence and ensure a smooth first-time experience.
Deliverables
Clear Information and Payment Guidance
The billing homepage presents key details such as amount, due date, and bill info in a single card layout. A clear "Pay Now" button helps users enter the payment process immediately. This reduces search time and supports quick action. Bill details are hidden by default and can be expanded to keep the layout clean and easy to read.
Payment and Barcode Storage Design
To match the original paper bill process, we designed a separate screen for barcode payments. It clearly shows the barcode, amount, and due date, along with usage notes. A “Save Screenshot” button helps users store the barcode on their phone for easy payment at convenience stores.
Simple flow reduces cognitive load
The interface follows a clear, step-by-step flow—from viewing the bill to barcode payment, history, and invoice. Pages are arranged in a linear order with no need to go back and forth. A fixed bottom menu helps users stay oriented and understand the next action, making it easier for older users to complete the payment process confidently.
Design System
To ensure consistency across pages and improve maintenance efficiency, we built a design system alongside the project. It includes color, typography, spacing, and component states. Common elements such as buttons, forms, and layout blocks were modularized to streamline the design and development process. This approach also supports future feature expansion while maintaining a cohesive interface and high product quality.
Prototype
This interactive prototype demonstrates the full mobile bill payment flow. It simulates real usage scenarios to evaluate the experience and usability for older users on mobile devices.
