top of page

UI/UX Design

  • Benefit Event Brandguide-1.jpg
  • video mockup.mp4
  • Benefit Event Brandguide-6.jpg
  • Benefit Event Brandguide-5.jpg
  • Benefit Event Brandguide-4.jpg

Event website design

Artsia

2024

University Project | Web UI Design | Graphic Design

Overview

Designed a website and graphics for a simulated event called Artsia which is an annual Asian art and culture event supporting indie international student artists, offering exhibitions, workshops, performances, and culinary experiences. 

What I did

Designed and build a website with Figma and Webflow

Designed graphics elements for website

Designed graphics for merchandise, ticket

Mobile app UI Design

Tako 

2025

University Project | Mobile App UI Design | Graphic Design

Overview

Researched about procastination and its root cause which is mainly because of ADHD among the younger generation under the influence of technology. Designed Tako as an assistant to help users with self managing.

What I did

Research on problems among user's procastination an ADHD

Designed Tako based on user behavior research

Created high-fidelity prototype with Figma and Adobe Creative Suites

  • Tako.png
  • Untitled design (4).png
  • Tako (2).png
  • Tako (3).png
    takoVideo.mp4
  • Tako (4).png
  • Tako (5).png
  • Style guide.png
  • Tako (6).png
    shopeefake.mp4

Sharing Kiosk

Mobile app UI Design

2025

University Project | Mobile App UI Design | Graphic Design

Overview

In “The Sharing Kiosk Project”, I am making a platform for people to lend out their items or borrow something from others, this platform is based on a physical kiosk for people to pick up their items as a middle-man instead of having to go through a face-to-face meet up to do the transaction.

What I did

User research with Persona Archetypes, Journey map and User flow

Created from low-fidelity (paper prototype) to high-fidelity protoypes

Designed every visual elements and created a style guide

Voice control prototype

Pilly

2025

University Project | Mobile App UI Design | Voice Control

Overview

Designed a device that helps reminding people take their medicine on time with right doses. This device features “voice command” and is designed with a goal of being as simple to use and accessible as possible so that it could reaches more people.

What I did

Setup and code Arduino board with Blokdots

Designed and build pill box model

Created high-fidelity prototype with Protopie and Adobe Creative Suites

  • Group 1.png
  • Tako (7).png

User Research

  • Intro Slide.png
  • Table of Contents.png
  • Problems 1.png
  • Problems 2.png
  • Our research 1.png
  • Our research 2.png
  • Our research 3.png
  • Concept Overview.png
  • Causal Diagram.png
  • Information Model.png
  • Ecosystem map.png
  • Journey Map.png
  • Business Model 1.png
  • Business Model 2.png
  • Business Model 3.png
  • Wireframe1.png
  • Wireframe2.png
  • Wireframe 3.png
  • Wireframe 4.png
  • Wireframe 5.png

FAST&FRESH

This case was designed during my time in Systems class in California College of The Arts where I have to use informations to provide a service for the community and clients.

The concept was creating a vending machine providing fresh meal kits for students around the city to solve the problem "Food insecurities among students in the US".

  • Introduction.png
  • TOContent.png
  • Brief.png
  • Connection circles.png
  • Concept model.png
  • Stock Flow.png
  • Behavior over time.png
  • Causal Loops.png
  • Conclusion.png

Smartphone Penetration

This case study was for my Systems class in California College of The Arts. We used diagrams and system thinking to do research about the affection of smartphones in our life and how it could collect tons of information from us.

  • _Final presentation-compressed-1.png
  • _Final presentation-compressed-3.png
  • Screenshot 2026-04-20 191732.png
  • _Final presentation-compressed-5.png
  • _Final presentation-compressed-6.png
  • _Final presentation-compressed-7.png
  • _Final presentation-compressed-8.png
  • _Final presentation-compressed-9.png
  • _Final presentation-compressed-10.png
  • _Final presentation-compressed-11.png
  • _Final presentation-compressed-12.png
  • _Final presentation-compressed-13.png
  • _Final presentation-compressed-14.png
  • _Final presentation-compressed-16.png
  • _Final presentation-compressed-17.png
  • _Final presentation-compressed-16.png
  • _Final presentation-compressed-19.png
  • _Final presentation-compressed-20.png
  • _Final presentation-compressed-21.png
  • _Final presentation-compressed-22.png
  • _Final presentation-compressed-23.png
  • _Final presentation-compressed-25.png
  • _Final presentation-compressed-26.png
  • _Final presentation-compressed-27.png
  • _Final presentation-compressed-28.png
  • _Final presentation-compressed-29.png
  • _Final presentation-compressed-30.png
  • _Final presentation-compressed-33.png
  • _Final presentation-compressed-34.png
  • _Final presentation-compressed-35.png
  • _Final presentation-compressed-36.png
  • _Final presentation-compressed-37.png
  • _Final presentation-compressed-38.png
  • _Final presentation-compressed-40.png
  • _Final presentation-compressed-39.png

Dovetail 

This case study was to improve the workspace for the target audience of Dovetail - designers and design researchers - we started a month-long project. From April 2nd to May 7th, we made a series of improvements and tested the usability of the dovetail website.

Dovetail is an online tool that helps companies better understand their customers. It collects feedback from interviews, surveys, and support chats, then organizes and highlights important patterns. This makes it easier for teams—like marketing, product, and customer support—to see what customers really need.

This was a group project, presented by me and my 2 other classmates Selina and Helen. We have also presented this to one of Dovetail's technical team member and received good feedback.

bottom of page