🥋 Web Design (MUKC)

Role

Product Designer/Committee member

Timeline

12 Sep 2024 - Present

Tools

Figma, Squarespace, Procreate

Tags

UX Design, Apparel Design, Social media content

Personal Context
Melbourne University Karate Club is more than just a club to me, it's the place that grounded me and quietly reshaped my life, both physically and mentally. Being part of this community has given me confidence, discipline, and a sense of belonging I didn't expect to find.

As I continue to grow through this space, I felt a genuine desire to give something back. Contributing my skills as a designer became my way of expressing gratitude. For the first time, design didn't just feel like a task or a project. It felt meaningful, because what I create carries the spirit and story of the club that changed me.

The motivation came from members who struggled to find materials on our website, as the structure was unclear and the interface felt outdated.
To better understand the needs behind them, I interviewed club members and instructors to gather their perspectives. Including what message, we want to share with the public and how the site could better support both potential and current students.

The goal is to create a clearer, more welcoming experience with intuitive navigation, improved access to training materials, and space for members to share their journeys.

Wire Framing

Insights from user interviews informed these early wireframes, which structure the essential information for both members and newcomers.

Prototyping

After mapping the complete user flow in Figma, I conducted a second round of interviews with club members to validate that the design met their expectations.

UX interview insights

After conducting interviews with our regular members, instructors, and newcomers, I compiled all the preferences in a Fig Jam file to serve as a roadmap for refining the website.

Production Build

I’ve explored quite a few website builders: Framer, Webflow, Squarespace. But in the end, I chose to stick with WordPress.

The decision came down to long-term maintenance and continuity. Our club has been using WordPress since the early 2000s, and staying within that ecosystem makes it easier for future committees to manage, update, and build on what we’ve created.

I translated the prototype into a live WordPress site through vibe coding, bringing the design to life while keeping it practical and sustainable for the club moving forward.

View the live site: Melbourne University Karate Club

This project was inspired by strong member demand for new apparel, and by the idea of creating something that could hold and represent our shared memories

Sketches

I prepared drawings before one of the committee meetings and asked all members to vote on their preferred sketch elements to align with their vision for the design.

Digital refinement

I refined several variants after the voting, emphasizing the key elements that represent our club, such as the symbols representing the style we practice. I collected feedback from members throughout each iteration.

Mock ups

Putting the design on blank Tees and keep collecting the preference from club members.

Final Print

To add a personal touch to this t-shirt, I used my own handwriting for the Kanji characters meaning "Karate." This strengthens the sense of belonging and authenticity. For the back design, I strategically used typographic hierarchy and contrast to draw immediate attention to the core message 'Karate' again, reinforcing visual consistency across the entire design.

Throughout the production process, I led communication between club members and the printing company to ensure accuracy and efficiency. I designed and distributed a Google Form to collect sizing and quantity data, ensuring we produced the correct number and size of shirts.

This is exactly what the club needs, especially with upcoming university events where effective promotional materials will help increase visibility and engagement.

📱 MOHA - eCommerce App

Role

Individual Project

Timeline

01 Sep 2025 - 03 Nov 2025

Tools

Figma, Notion, Procreate, Maze

Tags

UI/UX, User Testing

At-a-Glance 👀

MOHA is a polished end-to-end mobile eCommerce app for a Minimalism art exhibition, featuring clear user flows, intuitive navigation, and a cohesive, user-centred design system across browsing, selection, cart, and checkout.

Problem

MOHA is an app developed to generate revenue rather than simply showcase artefacts, so this was the primary focus throughout the design process. Every user flow was designed to guide users toward completing a purchase.

Solution

To achieve this goal, every button in the user flow leads directly to the final payment page without distractions. I included product customization options to make the flow more dynamic. I maintained strong design consistency with an inviting UX writing tone that encourages customers to keep engaging. The app was refined through multiple rounds of user testing and design iterations.

Design Process

After clarifying the exhibition app’s core goals, driving purchases and supporting revenue. I designed the product from the ground up. I built the visual direction based on minimalist research, sketched early concepts, and developed iterative prototypes. I then conducted user testing with eight participants, synthesised their feedback, and refined the experience by adjusting tone, improving hierarchy, and aligning the flow with user expectations. These iterations continued until the final high-fidelity prototype was completed.

Visual Research → Sketches → Prototype → User Testing → Design Iterations →

Visual Research

To maintain strong design consistency, I sourced inspiration from square geometry and dot motifs across illustrations and real-world visuals. I consolidated these into a focused moodboard that served as a reliable reference for all design decisions.

Sketches

The wireframes sketches showcase my early design thinking and outline the full user journey, from artefact discovery through to checkout. They reflect a deliberate problem-solving process that prioritises clarity and prevents information overload on every screen.

Prototype

Below is the first draft created after translating my sketches into Figma. This stage also hosted the initial round of user testing, offering an early look at the intended user flow and helping uncover key usability issues to refine in the next iterations.

User Testing

The following shows my Maze testing setup, where I applied UX-writing tone evaluations, A/B testing, and comprehension testing. The goal was to determine the tone preferred by most users and confirm that the refined wording stayed unambiguous and user-friendly.

Design Iterations 🔁

I refined each screen based on the insights gathered from user testing, leading to three key revisions. These changes not only enhance visual clarity and hierarchy but also elevate the user-centred elements, such as tone of voice and navigational focus, according to user feedback.

👇Iteration 1. Reorganising Attention Flow

Early testing showed that user’s attention was pulled in too many directions, with elements competing for focus and disrupting navigation. I refined the attention map by adjusting scale and visual weight, ensuring a clear, intentional flow across the screen.

👇Iteration 2. Delivering Product Information with Clarity

The initial design followed minimalism to a fault, removing details users actually needed. After evaluating user feedback, I preserved the minimalist intent but introduced the essential choices required before checkout, organising them carefully to support clarity and decision-making.

👇Iteration 3. Enhancing Information Flow at Checkout

Accurate payment information is essential in an e-commerce context, and users also need clear guidance when their details are incorrect. To address this, I redesigned the checkout page with stronger validation cues and created a version that shows the interface when all fields are completed correctly.

Final Design

Figma prototype

MOHA — Minimalist eCommerce App Demonstration

Product success 👏

This final design represents my first individually created eCommerce app as a product designer. It allowed me to rethink user flows from both a practical and personal design perspective, strengthening my problem-solving skills throughout the process. The project received a High Distinction from the unit convenor, and it motivates me to keep exploring, refining, and elevating my future design work.

What I leaned 🌱

Designing MOHA taught me the value of iterative refinement in creating a clear and consistent user experience. Through continuous testing and feedback, I learned how small adjustments in hierarchy, tone, and interface details can meaningfully improve usability and overall design quality.

🦘 Vibe-Raising (MLAI)

Role

UX Designer

Timeline

30.12.2025 - Present

Tools

Figma, Notion, antigravity

Tags

UX Design, UX Interviews, vibe coding

At-a-Glance 👀

Valley is a platform that help Australian startups connect with global VCs/investors. it is an early-stage attempt to build the first Australian startup directory that stays current, starting with a simple but powerful loop: founders share regular updates → investors receive relevant, timely information → Valley uses the unique data to make better connections.

User interviews

Phrase 1
Conducted 20+ founder interviews to identify their preferences and pain points regarding monthly and investor updates.

Phrase 2
After high-fi prototype was ready, conducted another 10 founder interviews and carried out user testing, gathering actionable feedback and identifying preferred features.

Affinity mapping

Analyze each interview recording or transcript, extract key insights, and organize them into categories for reporting and prototyping purposes.

Prototyping

Phrase 1
Create 1-hour sketches to rapidly visualize the MVP, present to stakeholders, and ensure that the principles and concept are fully aligned.

Phrase 2
Explored various platforms for vibe coding, including Loveable, V0, and Figma Make, and successfully built a full-stack prototype within a week

Discover the Valley - Valley

Phrase 3
Leveraging insights from the second round of interviews, I iterated the design by integrating valuable perspectives from both startup founders and investors.

MLAI — Vibe Raising Page Design

Following stakeholder validation of the prototype, I developed a new page consistent with MLAI’s design language. The page was implemented within the MLAI website to introduce Vibe Raising, formerly Vally, and articulate its value for founders and investors.

View the live site - MLAI

VC Outreach

I am coordinating with startup founders to gather updates and strategically refining an email campaign aimed at reaching over 10,000 global investors, delivering curated monthly updates from Australian startups.

👨‍💻 eSafety Hackathon

Role

Hipster (UX/Product Designer)

Timeline

29, Nov 2025 - 30, Nov 2025

Tools

Canva, Slack, Figma

Tags

UI/UX, Product Design, Problem solving

At-a-Glance 👀

I participated in Needle in the Hashtag, a national eSafety hackathon hosted by MLAI, focused on tackling one of the most pressing issues affecting Australian families today: harmful online content. As the Hipster (UX/Product role) on a cross-disciplinary team. I led the ideation, user experience direction, and problem-solving process. Together, we developed a clear and practical solution within 48 hours.

Reflection 🔍

This hackathon taught me how to collaborate under pressure, communicate across disciplines, and stay grounded when morale drops. I gained a deeper understanding of the complexity behind harmful online content and the importance of early awareness, not restriction. Most importantly, I learned how thoughtful design can empower young users to recognise risk, build digital resilience, and stay safer online.

First Hackathon Experience & Personal Growth

Participating in Needle in the Hashtag was my first hackathon, and it exposed me to a diverse group of people from different disciplines. I had the opportunity to attend multiple presentations, collaborate with specialists from various domains, and even pitch our solution publicly.

I learned how to work effectively under pressure, especially when the team’s productivity and morale dipped. During those moments, I maintained my own pace, stayed calm, and gradually helped lift the energy of the group. This experience strengthened my resilience and leadership mindset in fast-paced environments.

Understanding the Complexity of Real-World Problems

This hackathon made me realise that real-world issues, especially those related to harmful online content, are never one-dimensional. For example, when parents notice their teenager changing in behaviour due to online influence, the cause isn’t simply “social media.” The roots often go much deeper, emotional development, education, social challenges, and face-to-face communication issues.

Key Insight: Awareness Must Start Early

Through this challenge, I understood that awareness is the foundation. Harmful content online is not always avoidable, and parents cannot monitor their children 24/7. Instead, tools should help young users recognise risky content on their own.

This is where our solution becomes meaningful:

• By detecting harmful content early
• Labelling it clearly
• And explaining why it may be harmful

we empower teenagers to build their own judgment instead of relying solely on adults. Helping young people understand the content before it influences them creates far greater long-term impact than simply telling them what not to watch.

What I leaned 🌱

This experience reinforced the role of design in shaping safer digital environments. As a designer, I realised that:

• Technology alone is not enough; design must guide awareness and understanding.
• Solutions must respect youth autonomy while providing safety.
• Collaboration between different disciplines leads to richer, more holistic outcomes.

This hackathon showed me how design thinking can contribute meaningfully to national-level social issues, especially those affecting young people and families.