TradeBox
TradeBox is a mobile app built for blind box collectors to trade duplicate and unwanted figurines—no money, no resellers, no inflated prices. Through smart matching, verified traders, and secure messaging, collectors can find the items they want.
Role
UX Researcher & Designer
Project Duration
January - March 2026
Focus
Design Systems
AI Co-Working
Competitive Analysis
Facebook Marketplace`
Clear overview of updates for seller
Sorting options at top
Clear CTA for creating listing
Extensive subpages
Depop
Wishlist UI on item
Top navigation and sorting options
brand name & price present
no seller info
Etsy
Simplified seller options
Menu-based navigation to subpages
Clear unread messages and notifications
Extensive subpages
The Problem
Duplicates
Blind boxes are exciting and fun because you never know which item in the collection will be yours. This is also the downside—you might end up with two or more of the same item.
No Dedicated Platform
Blind box collectors often resort to Depop, Facebook Marketplace, or Ebay to sell their items. These platforms do not support seamless trading and typically rely on paid transactions.
Brand Elements
Color
Primary
Default
Light
Subtle
Darker
Secondary
Default
Light
Subtle
Darker
Success State
Default
Light
Subtle
Darker
Error State
Default
Light
Subtle
Darker
I engineered a semantic color system using Figma variables to map colors to tokens like "Success" and "Error" as well as “dark” and “light.” This logic-based approach automates UI states and ensures a scalable, dev-ready palette.
Typography
Poppins
Ag
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Quicksand
Ag
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
TradeBox’s typographic styles are carefully selected to showcase the brands approachability and align with industry standards. The primary font, Poppins, and the secondary font, Quicksand, blend perfectly—offering a friendly and playful combination.
AI Brainstorming
Google Stitch
To kickstart the design process, I used Google Stitch to upload my design system elements (project brief, typography, color, and mood board assets) and produce an early draft of the TradeBox design. This process required extensive prompting and adjustments—effectively co-designing with Google Stitch—but saved time in the early decision stages of visual organization and IA.
Prompt: “Help mock up some designs using these assets for my mobile app using these assets”
Round 1
Round 2
Claude
Next up—Claude! To see a different design, I asked Claude the same prompt and provided it with the same design assets.
Prompt: “Help mock up some designs using these assets for my mobile app using these assets”
Round 1
My AI Co-Design Experience
Integrating AI into my workflow served as a powerful design tool. It provided a strong baseline for decision-making, allowing me to skip the blank canvas phase and move immediately into high-value design refinement. This shortened the iteration cycle and let me focus on solving the user problems I identified in competitive analysis, rather than harping on repetitive layout tasks.
Key Design Decisions
Your Cabinet
Users organize their collection of items in a “cabinet” for easy access to tradable items in a language and format that aligns with user mental models.
Simple Trades
TradeBox offers an intuitive user flow for making a trade. Communication between traders is streamlined for the no-money-involved system.
Tailored Recs
Personalized recommendations, search history, and menu-based browsing allows users to find items they're most interested in.
Demo
Browsing & Trading
Personalized browsing shows users items on their wishlist
Ability to add items to wishlist
Simple trade request flow to choose which item you want to trade from your cabinet
Messaging
Trade page shows overview of previous, current, and active trades
Messaging keeps users informed with trade at the top, improving efficiency
Profile & Cabinet
Profile offers overview and user input for cabinet and wishlist items
Search Optimization
Diverse search filters and default options personalized to user
My Takeaways
AI Co-Designing
I treated AI as a collaborative partner—using these tools to generate initial wireframe structures and Information Architecture drafts acted as a high-fi brainstorming session. This AI-assisted workflow allowed me to bypass the cold-start, moving straight into refinement and visual styling.
Design System Instructions
I discovered that the effectiveness of AI co-designing is directly tied to the quality of the input data. By having a pre-defined design system (typography, color tokens, and brand brief), AI was able to leverage my design building blocks. This ensured the generated designs were grounded in my design decisions, allowing for a usable starting point.
More Projects
TradeBox: Blind Box Trading
A no-cost trading platform for blind box enthusiasts to trade items.
View project
Tato: Smart book companion
An AI-powered companion that helps children reconnect with reading.
View project
Digital Design for Silverado EV
Next-gen infotainment concept to encourage connection on group drive.
View project
Redesigning MPLP Website
A website overhaul to improve resource finding for Michigan legal aid attorneys.
View project
Sara Carrier
copyright © 2026