Redesign of data-rich interfaces built for avid traders
Provided extensive research based on business needs and transforming them into seamless experiences and intuitive designs, worked under a design agency for a growth-startup client
10K user sign-ups
+80% development efficiency
+15% client retention
Role
Product Designer
Deliverables
iOS App
Branding
Hi-Fi Protoypes
Team
PM
Advisor
Product Director
Product Designer
Tools
Figma
BACKGROUND
BACKGROUND
During my role as a product designer at Wonderstruck Studio, a Web3 design agency, I worked with a high-growth startup, who was in the process of rebranding and expanding its product offering. Originally launched as a TestFlight website, the company wanted to transform the platform into a fully developed iOS app and desktop application. The trading platform that sets itself apart by allowing users not only to browse and analyze tokens but also to trade directly within the platform, something most competitors don’t offer. Their mission is to create the fastest and most accurate token discovery, charting, and trading platform, empowering users with real-time insights and seamless execution across devices.
During my role as a product designer at Wonderstruck Studio, a Web3 design agency, I worked with a high-growth startup, who was in the process of rebranding and expanding its product offering. Originally launched as a TestFlight website, the company wanted to transform the platform into a fully developed iOS app and desktop application. The trading platform that sets itself apart by allowing users not only to browse and analyze tokens but also to trade directly within the platform, something most competitors don’t offer. Their mission is to create the fastest and most accurate token discovery, charting, and trading platform, empowering users with real-time insights and seamless execution across devices.
PROBLEM
PROBLEM
Unethical Practices in the Current Market
Unethical Practices in the Current Market
DEXScreener, the largest Web3 trading data platform, is getting backlash for being a money hungry platform that users are concerned about their ethics e.g) monetization where the platform only cares about generating revenue through payments from unreliable projects rather than authentic token discovery for users and in the current market, users are thinking of switching into a more flexible and trusted platform
DEXScreener, the largest Web3 trading data platform, is getting backlash for being a money hungry platform that users are concerned about their ethics e.g) monetization where the platform only cares about generating revenue through payments from unreliable projects rather than authentic token discovery for users and in the current market, users are thinking of switching into a more flexible and trusted platform
High-Density Data in Previous Product
High-Density Data in Previous Product
Client is building the platform to showcase for their API product which means that the platform has to cover all information, moreover, in current state of the product is already information overloaded. On top of that, they want to build a mobile app compacted with all the information from the platform.
Client is building the platform to showcase for their API product which means that the platform has to cover all information, moreover, in current state of the product is already information overloaded. On top of that, they want to build a mobile app compacted with all the information from the platform.
My goal as a Product Designer for this project
Creating intuitive designs and branding for the product while consolidating complex hierarchy and ensuring all in product features and needs.
Navigating through research and the crypto trading platform market to hold the defined’s product in high standards in competitiveness
RESEARCH
RESEARCH
Why is mobile-first becoming popular in trading?
Why is mobile-first becoming popular in trading?
51%
of users use mobile as their primary method of accessing crypto wallets
When client has come to us about wanting to build a mobile app for their platform, I wondered why as I always believed traders who were devoted to every second of a chart, were always desktop-first. However, that might not be the case in this fast-paced industry. Mobile-first has become vastly important among the industry because speed and accessibility are the two most profound factors in trading. These two factors are important for users' learning curve of using trading platforms.
When client has come to us about wanting to build a mobile app for their platform, I wondered why as I always believed traders who were devoted to every second of a chart, were always desktop-first. However, that might not be the case in this fast-paced industry. Mobile-first has become vastly important among the industry because speed and accessibility are the two most profound factors in trading. These two factors are important for users' learning curve of using trading platforms.
Higher Learning Curve = Speed
Higher Learning Curve = Speed
Competitive Landscape
Competitive Landscape
Find a middle-ground between Moonshot (retial) and Photon/BullX for degen which is a term for avid crytpo traders who are long in the space. Essentially, Defined is looking for a design for their product to have a mixed of Photon/BullX users who are skilled and more professional vs Moonshot users who aren't as concerned about details like MEV.
Find a middle-ground between Moonshot (retial) and Photon/BullX for degen which is a term for avid crytpo traders who are long in the space. Essentially, Defined is looking for a design for their product to have a mixed of Photon/BullX users who are skilled and more professional vs Moonshot users who aren't as concerned about details like MEV.
Competitive Analysis Matrix
Competitive Analysis Matrix
Product Analysis Matrix
Product Analysis Matrix
The product analysis matrix allows me to understand what features the respectful products have in the market and how they are designed for their users
Product Positioning
Product Positioning
The product analysis matrix allows me to understand what features the respectful products have in the market and how they are designed for their users
Common Insights in Advanced Degen Platforms
Common Insights in Advanced Degen Platforms
Onboarding Difficulty
Users take average 1-3 days to be accustomed to the products
10-20 clicks on average during onboarding process
Accessibility in Advanced tools
High Personalization or customization for tools
Advanced charting options
Audit + Meme-coin tooling
Real-time data streams
Data Density
Complex visual hierarchy (similar to TradingView + on-chain analytics tools)
Multiple charts, indicators, and real-time metrics on screen
Trader-focused UI Patterns
Consistent “muscular” UI layout
Some products prefer web app as their users are accustomed on web more than mobile
Onboarding Difficulty
Users take average 1-3 days to be accustomed to the products
10-20 clicks on average during onboarding process
Accessibility in Advanced tools
High Personalization or customization for tools
Advanced charting options
Audit + Meme-coin tooling
Real-time data streams
Data Density
Complex visual hierarchy (similar to TradingView + on-chain analytics tools)
Multiple charts, indicators, and real-time metrics on screen
Trader-focused UI Patterns
Consistent “muscular” UI layout
Some products prefer web app as their users are accustomed on web more than mobile
Intuitiveness Depends on Reducing Friction in Onboarding and Early Flows
Some avid traders want to stay on top of data and information, they don’t want to spend time learning tools. The more screens and required steps during onboarding, the more likely users skip customization or abandon the product.
Barrier to Entry with Familiarity
Loyal users have a lower chance of switching to other apps unless there is a product that has a differentiated tool that enhances their trading skills.
Data-Dense Products Require Stronger Information Hierarchy
Poor hierarchy → overwhelming → slower decisions → higher churn
Personalization and Customization are essential
In advanced products, some avid traders prefer THE nitty gritty customizations such as hiding unnecessary widgets, reordering data modules, or chart visualization while others don’t need them. Because of that these avid traders have a higher retention rate.
Personalization and Customization are essential
In advanced products, some avid traders prefer THE nitty gritty customizations such as hiding unnecessary widgets, reordering data modules, or chart visualization while others don’t need them. Because of that these avid traders have a higher retention rate.
Product Design Strategy
Product Design Strategy
Create a platform that adapts to any user skill level, reduces cognitive load through strong hierarchy, and enables deep customization which allows users to use advanced trading tools intuitive, flexible, and accessible without sacrificing power.
Create a platform that adapts to any user skill level, reduces cognitive load through strong hierarchy, and enables deep customization which allows users to use advanced trading tools intuitive, flexible, and accessible without sacrificing power.
Flat colored “masculine” UI layout with consolidation and spatial optimization that preserves real estate, to inform information hierarchy for reducing cognitive load.
Flat colored “masculine” UI layout with consolidation and spatial optimization that preserves real estate, to inform information hierarchy for reducing cognitive load.
Reduce onboarding friction by offering recommended setups, generating tooltips, and progressive disclosure when users use features.
Reduce onboarding friction by offering recommended setups, generating tooltips, and progressive disclosure when users use features.
Build a hybrid and accessible experience that adjust to user levels by offering “Advanced mode” / “Normal mode” toggle in settings.
Build a hybrid and accessible experience that adjust to user levels by offering “Advanced mode” / “Normal mode” toggle in settings.
Give users more power with advanced personalization and customization over their environment with features like adjustable modules, savable presets, and hide noise.
Give users more power with advanced personalization and customization over their environment with features like adjustable modules, savable presets, and hide noise.
Ideate
Ideate
Moodboard
Moodboard
Client desired an exciting, fast, and sharp look that will resonate with crypto to their app. Crypto app arguably has the most masculine looks as 80% of the crypto industry are male-dominated. Let alone, our client’s users covers male users especially. Client and our team discussed UI looks of Brutalism/Neo-brutalism, retro-futurism and acid designs with minimal and two-toned contrast designs. They also requested Dark-mode and light-mode. Because of all the factors of brutalism, retro-futurism, and acid design, we decided on the ASCII terminal look with a typography of brutalism and mono.
Client desired an exciting, fast, and sharp look that will resonate with crypto to their app. Crypto app arguably has the most masculine looks as 80% of the crypto industry are male-dominated. Let alone, our client’s users covers male users especially. Client and our team discussed UI looks of Brutalism/Neo-brutalism, retro-futurism and acid designs with minimal and two-toned contrast designs. They also requested Dark-mode and light-mode. Because of all the factors of brutalism, retro-futurism, and acid design, we decided on the ASCII terminal look with a typography of brutalism and mono.
Dark vs Light Mode
Dark vs Light Mode
Prototype
Prototype
Core User Flows
Home
Portfolio
Traders and Tracklist
Token Info Page
Discovery and Search
Onboarding
Home
Traders & Tracklist
Discovery & Search
Portfolio
Token Info Page
Onboarding
Challenges
Challenges
Token Page (Card Swipe vs Non-Card Swipe)
Token Page (Card Swipe vs Non-Card Swipe)
Client desired a card swipe view for the token page vs standard vertical view - this is how I explained vertical scrolling is better than card swipe view.
Client desired a card swipe view for the token page vs standard vertical view - this is how I explained vertical scrolling is better than card swipe view.
Vertical Scrolling
Vertical Scrolling
Vertical scrolling displays 8 tokens simultaneously, allowing users to scan multiple options with a single fluid gesture and spot patterns instantly through peripheral vision. One flick moves you through 15+ tokens in seconds without animation delays, and comparing tokens is effortless since they remain spatially related. This approach means browsing 50 tokens takes seconds rather than minutes, making it vastly more efficient for rapid token discovery.
Vertical scrolling displays 8 tokens simultaneously, allowing users to scan multiple options with a single fluid gesture and spot patterns instantly through peripheral vision. One flick moves you through 15+ tokens in seconds without animation delays, and comparing tokens is effortless since they remain spatially related. This approach means browsing 50 tokens takes seconds rather than minutes, making it vastly more efficient for rapid token discovery.
Card Swipe View
Card Swipe View
Card swipe view creates a focused and comprehensive detail about individual tokens but inherently slow browsing experience for discovering crypto tokens because users are essentially browsing 50 tokens that requires 50 individual swipes. By presenting one token at a time in full-screen cards, users must perform repeated swipe gestures to progress through available options, with each swipe triggering an at least 1 second of interaction time before the next token appears. The card swipe view is essential for components that requires little cognitive yet very crucial information needed that users can scan quickly. e.g) Tasks, profile, content. However in this case, crucial data is already shown in token discovery page for 50 tokens that are fitted in one screen.
Card swipe view creates a focused and comprehensive detail about individual tokens but inherently slow browsing experience for discovering crypto tokens because users are essentially browsing 50 tokens that requires 50 individual swipes. By presenting one token at a time in full-screen cards, users must perform repeated swipe gestures to progress through available options, with each swipe triggering an at least 1 second of interaction time before the next token appears. The card swipe view is essential for components that requires little cognitive yet very crucial information needed that users can scan quickly. e.g) Tasks, profile, content. However in this case, crucial data is already shown in token discovery page for 50 tokens that are fitted in one screen.
Revision and Hand-off
Revision and Hand-off
Revision
Revision
Creative freedom but at what cost?
Creative freedom but at what cost?
A key challenge in this project was working with a client who was extremely agreeable. While this provided creative freedom, it made it difficult to validate whether the designs were truly aligned with business needs. I reframed my approach to instead of designing for approval, I designed to solve the client’s unspoken problems. I shifted the conversations from aesthetics to strategy by presenting each design with clear reasoning tied to user behavior and product goals. I guided the client toward solutions that were not only visually strong but suited to the product’s long-term direction. This helped ensure that our final decisions were intentional, evidence-based, and high-impact rather than aesthetically pleasing designs.
A key challenge in this project was working with a client who was extremely agreeable. While this provided creative freedom, it made it difficult to validate whether the designs were truly aligned with business needs. I reframed my approach to instead of designing for approval, I designed to solve the client’s unspoken problems. I shifted the conversations from aesthetics to strategy by presenting each design with clear reasoning tied to user behavior and product goals. I guided the client toward solutions that were not only visually strong but suited to the product’s long-term direction. This helped ensure that our final decisions were intentional, evidence-based, and high-impact rather than aesthetically pleasing designs.
Verifying constraints beforehand
Verifying constraints beforehand
During this project, I faced challenges aligning the design system across the client’s engineering and design teams. There were repeated iterations caused by mismatches between what was technically compatible for iOS and what was aesthetically preferred by the client. For example, typography was changed to Figtree and the icon library was switched to Ant icons without clear communication, which created inconsistencies and rework. For future projects, I plan to communicate these standards upfront to avoid misalignment and ensure the design system reflects both the client’s preferences and engineering constraints.
During this project, I faced challenges aligning the design system across the client’s engineering and design teams. There were repeated iterations caused by mismatches between what was technically compatible for iOS and what was aesthetically preferred by the client. For example, typography was changed to Figtree and the icon library was switched to Ant icons without clear communication, which created inconsistencies and rework. For future projects, I plan to communicate these standards upfront to avoid misalignment and ensure the design system reflects both the client’s preferences and engineering constraints.
Hand-off
Hand-off
For handoff, I delivered a fully structured design system and prototype, ensuring a smooth handoff under tight deadlines. This process helped the team ship a consistent MVP quickly while setting a foundation for scalable future updates.
For handoff, I delivered a fully structured design system and prototype, ensuring a smooth handoff under tight deadlines. This process helped the team ship a consistent MVP quickly while setting a foundation for scalable future updates.
Mobile Product
Mobile Product
Figma prototype with flows
Full design tokens and system
Responsive constraints
Toast, Snackbar, and Banner UI
Components library with 50+ usable components
Written documentation for edge cases, loading states, component states, and constraints
Figma prototype with flows
Full design tokens and system
Responsive constraints
Toast, Snackbar, and Banner UI
Components library with 50+ usable components
Written documentation for edge cases, loading states, component states, and constraints
Graphics
Graphics
Dithered graphics svg and animations for onboarding, loading, icons, and thumbnails
Dithered graphics svg and animations for onboarding, loading, icons, and thumbnails
Thank you for reading!
Core User Flows
Home
Portfolio
Traders and Tracklist
Token Info Page
Discovery and Search
Onboarding