As part of the O-CITY redesign, I developed a scalable design system to ensure consistency, efficiency, and future product expansion across the platform.
The system was built from the ground up, focusing on clarity, modularity, and ease of implementation for both design and development teams.
At the foundation level, I defined a structured set of design tokens, including a flexible colour palette, typography scale, spacing system, border radii, and elevation levels. These elements establish a clear visual hierarchy while maintaining accessibility and readability across all screens.
On top of this foundation, I created a comprehensive component library covering all core UI elements such as buttons, inputs, cards, navigation patterns, status labels, and transaction rows. Each component was designed with multiple states (default, hover, active, disabled) to ensure consistency in real use cases.
The system also includes reusable patterns for key product areas like activity feeds, payment flows, and expense tracking, allowing faster design iterations and a more cohesive user experience.
Special attention was given to financial and mobility-related interactions, ensuring that information such as transactions, categories, and balances is always clear, prioritised, and easy to scan.
This design system not only supports the current MVP but also lays the foundation for scaling O-CITY into a broader ecosystem of city services, enabling faster product development and long-term consistency across features.
Digital Product Design
Digital Product Design
A selection of digital product design work focused on UX/UI systems, interface design, and scalable design frameworks. These projects explore how visual clarity, interaction logic, and design systems come together to create intuitive digital products.
O-CITY App — Project Summary
O-CITY is a mobile application designed to centralise city mobility and related services into a single, seamless experience. Built on an account-based ticketing ecosystem, the app allows users to plan, pay, and track their daily activities — from public transport to parking — using one unified account.
The project focuses on redefining the user experience for individuals, simplifying complex mobility systems into a clear, intuitive interface. The goal was to create an MVP that prioritises usability, transparency, and control over personal spending.
At its core, the app introduces a structured activity feed combined with smart categorisation and manual expense tracking. This enables users to not only complete transactions efficiently, but also understand and manage their spending across different city services.
The design approach emphasises clarity, minimalism, and scalability. A new UI and design system were developed to ensure consistency across components, improve visual hierarchy, and support future expansion into a broader city ecosystem.
O-CITY positions itself as a future-ready platform where mobility, payments, and data converge — transforming fragmented urban services into a connected, user-centric experience.
works
2025 — 2026