Koi Card System
Card Design & Interactive UI | NMDE 203 Interactive II
Overview
This project involved designing a simplified six-card playing card system and developing a mobile interface to manage those cards. I translated traditional Bicycle playing cards into an original, whimsical koi fish–themed vector system, then designed an interactive UI that allows users to view, add, delete, and track card values within a constrained mobile viewport.
Problem
The challenge was twofold:
Simplify traditional playing card structures into clean, vector-based designs
Design an intuitive mobile interface for managing a six-card “hand”
Maintain clarity, hierarchy, and usability within strict constraints
Implement logical rules (maximum 6 cards, minimum 1 card, face cards = 10 value) with proper feedback
The project emphasized simplification, vector precision, and interaction clarity while designing within real mobile viewport dimensions.
Research & Design Process
I approached this as both a visual system design project and an interaction design challenge, focusing on simplification, hierarchy, and user control.
Designed 6 original vector cards (3 face cards, 2 numeric, 1 Ace) using a whimsical koi fish theme
Built all illustrations from basic vector shapes in Figma (no external icon libraries)
Maintained standard card ratio (1:1.4) and mobile viewport constraints
Explored multiple layout concepts for viewing all six cards
Implemented a press-and-hold interaction to reveal overlapping cards
Designed swipe-to-delete interaction with garbage icon confirmation
Created plus-button interaction to add cards (max 6)
Designed error states for adding a 7th card or deleting the final remaining card
Displayed total card count and cumulative value in a persistent bottom bar
Structured a full process deck documenting sketches, iterations, final UI, and reflection using a 12-column grid system
Tools
Figma (vector illustration, prototyping, UI design, layout system)
Figma Mirror (mobile viewport testing)
