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.
Tools
Figma (vector illustration, prototyping, UI design, layout system)
Figma Mirror (mobile viewport testing)
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
