Starting from zero with no existing design language, the app needed to serve five distinct modules (Circle, Study, Media, Vendor, Me) while feeling like a single coherent product. The design system had to be built before the screens, otherwise five people building in parallel would produce five inconsistent interfaces.

The Challenge

Before writing a single screen, I built a component library in Figma covering typography scale, colour tokens, buttons, tabs, cards, switches, ratings, and navigation primitives. Every component was designed with the dark theme as the primary variant. The decision to establish tokens and components first meant that visual consistency was structural rather than something enforced through code review.

Design System First

Key Screens

Every component in the Figma library was shipped directly into React Native by me, with no handoff to another engineer. The image below shows the Figma mockup alongside the production app — the layout, spacing, and component structure transfer directly without translation loss.

Design to Production

Independently delivered approximately 80% of all frontend features across a 5-person Agile team. The design system held consistency across five modules without requiring design review on every PR, because the constraints were built into the components themselves.

Outcome

Developed as a Master's capstone project, SLACA is a mobile application designed to improve student life at UOW. Led front-end development and UI/UX design, focusing on building a seamless cross-platform experience using Expo and Tailwind CSS. Implemented features such as an AI chatbot, personalised content recommendations, and location-based utilities to enhance accessibility and engagement.

An AI-assisted student lifestyle app that centralises campus information, social interaction, and personalised support.

SLACA

Took over static HTML deliverables from an external design agency and integrated them into a Vue architecture, translating pixel-perfect layouts into dynamic, interactive pages. Responsible for nearly 90% of all front-end implementation, including custom interactive components built without interaction specifications.

A government-facing platform for accessing archival records in Taiwan.

NEAR

Participated across the full development lifecycle of a national government records management system, from requirements gathering to front-end implementation. Served as the bridge between civil service stakeholders and the engineering team, translating domain-specific requirements into actionable UI/UX decisions. The platform replaced paper-based archival workflows across government agencies, digitising an estimated 80 to 90 percent of previously manual processes.

An internal platform that digitises and streamlines government document workflows.

ONLINE

Working directly with the organisation founder and core team, the goal was clear: build a portal that felt professional and trustworthy enough to justify a paid membership, while remaining accessible to a bilingual audience. There was no existing design system or prior product to reference. Everything was designed from scratch based on stakeholder discussions and the community's existing brand identity.

The Brief

The sign-up and membership activation flow was designed as a guided three-step process: create an account, complete a professional profile, then activate membership. Each step was designed to reduce friction and set clear expectations, with the profile step structured to collect the data needed to power the member directory.

Onboarding Flow

The member directory was the centrepiece of the networking value proposition. Each card surfaces name, job title, employer, and social links at a glance. Advanced filters allow members to search by job title, state, industry, and occupation, making it easy to find relevant connections across Australia.

Member Directory

The resources section consolidates the organisation's archive of past events and articles in one place. Each event entry links directly to its recording, slides, or photos, preserving the value of content that would otherwise be scattered across social media and email threads.

Resources Hub

All designs were delivered as hi-fi Figma mockups covering desktop and mobile, and were implemented directly by the internal development team. The portal launched and remains live as the membership hub for the ACF community.

Collaborated with the founding team of Australia Career Forum to design a members-only portal for their growing community. Worked directly with the organisation founder and internal stakeholders to translate their vision into a complete product design, covering everything from the public-facing sign-up flow to the full internal member experience. Delivered hi-fi mockups across all key flows in both desktop and mobile, which were implemented by the internal development team and shipped to production.

A membership portal for a non-profit community supporting career development among Taiwanese professionals in Australia.

Australia Career Forum Portal

Built out of firsthand frustration with spreadsheets and Notion templates, Flowpath is a purpose-built job search OS. Designed and developed end-to-end, from database schema to UI, with a focus on surfacing actionable insight from application data. Used daily during an active job search, it replaced ad-hoc tracking with structured status logging and a live analytics dashboard.

A full-stack job application tracker that brings structure, clarity, and momentum to the job search process.