Project Type
Personal Experiment (5 Days)
My Role
Problem Hypotheses / Survey & Analysis / Problem Definition / Design System / Prototyping
AI Tools
Claude / ChatGPT / Figma AI
This personal project was a small experiment exploring the potential of AI in professional design workflows, independent of any real business.
📌 Stage
Hypotheses & Survey
Concepts & Wireframes
UI & Design System
Prototype
🤖 What AI Did
Expanded hypotheses
Drafted survey questions
Organized responses
Generated and combined ideas
Drafted screens and user flows
Generated UI concepts
Generated tokens & components
Implemented screens
Coded interactions
👩🏻 What I Decided
Research direction
Problems to prioritize
Concept selection
Information hierarchy
User flow refinement
Reference selection
Design direction
Consistency review
Behavior review
Revision direction
Implementation scope
01. Finding a Problem
👩🏻 Why Should Checking My Subscriptions be so Complicated?
" I wanted to see all my subscriptions on one screen."
" With payments split between app stores and credit cards, I sometimes forgot which services I was still subscribed to."
" I wanted to see the cost of international subscriptions in KRW without having to look up exchange rates and calculate them myself. "
" Even similar services felt overly complicated. Should I really have to learn how to use another app just to check my subscriptions? "
🤖 Expanding Hypotheses
I shared my initial frustrations with AI and asked it to explore related problems I might have overlooked.
Area
Subscription Overview
Cost Awareness
Registration & Information Structure
Retention & Cancellation
Payments & Accounts
Engagement & Trust
AI-Generated Hypotheses
Users may miss renewal dates, free trial expirations, or duplicate subscriptions.
Understanding total spending and the impact of price or exchange rate changes may be difficult.
Complicated input processes and excessive features may create barriers to getting started.
Users may lack information to evaluate a subscription's value, while complicated cancellation processes may discourage action.
Payment failures and actual costs of shared subscriptions may be difficult to track.
Users may lose interest in managing subscriptions or feel uncomfortable connecting financial accounts.
👩🏻 Using AI Suggestions as Hypotheses to Explore
Rather than treating AI's suggestions as validated findings, I used them as starting points for questions to explore through a survey.
02. Survey and Analyzing
🤖 From Hypotheses to Key Problems
I used AI to draft survey questions, organize collected responses, and identify potential problems worth exploring.
Survey Response Analysis
Potential Problems Identified by AI
Fragmented Payment Channels
Difficulty Understanding Exchange Rates and Total Costs
Cancellation Friction
Low Engagement With Subscription Management
Reluctance to Connect Financial Accounts
Design Questions
How might we bring scattered subscriptions into one place?
How might we make subscription costs in KRW and the reasons behind changes easier to understand?
How might we help users find the right cancellation path?
How might we create opportunities for users to reconsider their subscriptions?
How might we help users get started without connecting bank or card accounts?
03. Choosing What to Solve
👩🏻 Selecting Three Core Problems
From the potential problems identified, I selected three priorities to focus on.
Selected Problem
Bring Scattered Subscriptions Together
Understand Costs in KRW
Create a Moment to Reconsider
Why I Chose It
Address the frustration that originally inspired the project.
Go beyond viewing subscriptions to understanding actual spending.
Give users an opportunity to decide what to keep before the next payment.
I connected these three priorities into a core user flow.
I also made two decisions to keep the scope focused.
✓ Start without account connections
I chose screenshot-based registration to reduce manual input while avoiding the need to connect bank or card accounts.
✓ Guide users to cancellation
Rather than attempting to handle different services' cancellation processes directly, I limited the scope to helping users find the appropriate cancellation path.
04. Exploring Ideas
🤖 Developing 10 Ideas Into 4 Concepts
I used AI to generate 10 ideas, including a KRW-based dashboard, payment calendar, cost change explanations, and advance reminders. I then asked AI to combine related ideas into broader concepts.
👩🏻 Choosing How to Combine Ideas Around the Core Flow
Rather than turning every idea into a feature, I focused on those that supported the core experience of checking subscriptions, understanding costs, and deciding what to keep.
Concept
A. Register With a Screenshot
B. KRW-Based Spending Dashboard
C. Why Did My Costs Change?
D. Decide Before the Next Payment
User Experience
Review and edit extracted subscription details before adding them.
View total costs, subscriptions, and upcoming payment dates.
Understand how much subscription costs have changed and why.
Use advance reminders to decide whether to keep a subscription.
05. Wireframes and User Flows
🤖 Turning Concepts Into Screens and Flows
I used AI to generate initial wireframes for all four concepts. I also created additional screens and draft user flows by combining two selected concepts.
👩🏻 Refining Information Priorities and Connections
I compared the generated screens, selected elements to combine, and adjusted the flow from registration to subscription review and decision-making.
Generating User Flow using AI
06. Design System & Draft Design
👩🏻 Choosing References and Visual Direction
I shared visual references with AI to communicate the intended look and feel.
After reviewing three generated design options, I selected one and defined what needed to change in its layout and details.
🤖 Expanding the Selected Design Into a Shared System
I recreated the initial design from Claude in Figma.
Based on the revised design, I generated variable tokens and components, then applied them to existing and additional screens.
👩🏻 Reviewing Consistency and Refinements
I reviewed whether the tokens and components were consistent with the design and checked for missing elements.
Generating Design system using AI
07. Prototype with Vibe Coding
🤖 Implementing Screens and Interactions
I used AI to turn the designs into code, iterating on screens and interactions through several rounds of feedback.
👩🏻 Reviewing Behavior and Defining the Scope
I checked the prototype directly, identified behaviors that didn't match my intentions, and requested revisions. I also connected the final implementation to GitHub to track changes.
※ Prototype doesn't work on mobile. Please view it on a desktop. Simulation is optimized for desktop browsers 1600px and wider.
What I Learned
AI Expanded the Options. I Made the Choices.
AI quickly explored six areas of hypotheses, generated ten ideas, and produced three UI concepts. My role was to decide what to pursue and what to leave out. Starting without bank account connections and limiting cancellation to guidance were key decisions that shaped the project.
Early Decisions Shaped Everything That Followed.
Each stage built on the previous one, carrying my initial choices through wireframes, the design system, and code. With AI accelerating the process, I learned the importance of reassessing the direction before moving forward.
Hands-On Work Revealed AI’s Limitations.
Applying design tokens and components helped me spot missing elements. Testing the prototype revealed interactions that didn't work as intended. Beyond exploring what AI could generate, I gained a clearer understanding of where my own review and refinement were needed.