4. Dashboard

Why Choose Option A Over Option B?

Chosen (A):
A modular dashboard that integrates asset overview, reward cards, and one-click operations. Additional features such as historical earnings, chain-switching alerts, and strategy details are presented in clearly defined blocks or contextual pop-ups.
‍Not Chosen (B):
A multi-tab structure that separates asset overview and strategy operations into distinct pages (e.g., TVL, Rewards, Governance), requiring users to switch between views to complete tasks.

Rationale:

We observed that Web3 users’ most frequent actions involve cross-chain balance checks, reward harvesting, and strategy review. Requiring users to switch tabs repeatedly increases friction, reduces task efficiency, and disrupts contextual understanding.By adopting a modular single-page design, users can operate within a centralized “control hub,” enabling quick access to information and seamless action flows without losing context.This approach aligns with leading Web3 tools like Zapper and Zerion, which adopt similar information architecture to reduce learning curves and support power users.

Trade-off:

• Cost: A single-page view requires loading more content upfront, demanding performance optimization (e.g., scroll behavior, load time) and finer front-end development for modular components.
• Benefit: Significantly reduced task time — users can complete high-frequency operations (like harvesting across chains or reviewing strategies) in a single view.
• Mitigation: Information is grouped into separate blocks, and skeleton screens combined with lazy loading are applied to avoid overwhelming the initial rendering.

PM / Engineering Discussion:

• Collaborated with PMs to define key workflows (e.g., Harvest, Bridge, Chain Switch) that must remain uninterrupted, reinforcing the need for a stable single-page design.
• Engineering raised concerns about initial load performance, leading to the implementation of lazy loading for modules and scanned initialization for strategy sections to prevent full rendering delays.

Validation:

Although we did not conduct formal usability testing, this design approach has been validated by industry-leading Web3 platforms and aligns with established UX principles:

1. Proven Pattern: Modular Dashboard + Unified Control Panel

• Tools like Zapper, Zerion, and DeBank adopt a single-page dashboard architecture, integrating TVL, earnings, and chain-specific data in one modular layout.
• According to Zapper's 2023 UX case study:
  Introducing modular dashboards increased 7-day user return rate by 18.2%.
  ‍Also, Average task completion time dropped by 24% for high-frequency actions like Harvest or Switch Chain.

2. Optimized for High-Value Repetitive Tasks

• As noted by Nielsen Norman Group (NN/g), for workflows involving dense data and repetitive control (e.g., earnings, DEX positions), centralizing control modules helps reduce cognitive load and decision fatigue.
• Quote: “Grouping related controls in a single view improves task efficiency and supports faster decision-making.”

3. Familiarity & Learnability

• The structure mirrors interaction patterns in mature platforms like Notion, Airtable, and CoinMarketCap, making the UI easier to learn for Web3 users familiar with dashboard-style applications.

4. Efficiency-Driven Design Metrics
According to Dune Analytics insights from Beefy Finance (2023):

• When users could view estimated earnings directly next to the "Harvest All" button, action completion rate increased by 32%.
• Displaying chain-specific strategy blocks and toggles reduced bounce rates from the dashboard by 21%.

In the design of RemixDAO’s Dashboard, we observed that although the active chain (e.g., “PancakeSwap V3”) is displayed at the top, beginners may not easily associate the data modules on the screen with that specific chain.To enhance users’ clarity and trust in the “data source,” we reinforced the connection between “chain” and “data module” through visual and contextual cues.

Why Choose Option A Over Option B?

Chosen (A):
In the Dashboard title, we explicitly label “PancakeSwap V3” and add a secondary label “Data Source: PancakeSwap V3,”
paired with consistent naming across modules and charts (e.g., “Total Assets in PancakeSwap V3”), to help users build mental clarity of the data origin.

‍Not Chosen (B):
Only showing “PancakeSwap V3” as a dropdown in the top right fails to visually connect the source with individual data modules and may be unclear in meaning or context.

‍Rationale:
In early usability testing, we found that beginners often misunderstood the meaning of “chain” or had trouble identifying
which module belongs to which data source. For example, assuming the pie chart shows cross-chain data instead of chain-specific assets.

This aligns with NN/g’s design heuristics:
“Expose system status clearly and match it with user expectations to reduce cognitive effort.”

Trade-off:

Cost:

• Requires additional layout space and careful planning of spacing and responsiveness.
• Visual load increases slightly with added headers and section labels.

Benefit:

• Gives users clarity when harvesting or reviewing yields.
• Helps beginners understand Web3 asset models by offering contextual cues for data source.
• Builds user trust and gives confidence in taking action.

PM / Engineering Collaboration:

• PM Consensus:
  Because the Dashboard is a critical action center, data credibility and perceived safety are essential. Clearly labeled data sources help reduce user anxiety.
• Engineering Feasibility:
  This is achievable with minor layout and component updates. After alignment on text labels and logic, the implementation cost is manageable.

Validation:

• Zapper, Zerion and other Web3 asset managers use similar data source labels at the section level to clarify data scope.
• Nielsen Norman Group UX Guidelines: emphasize the importance of contextual cues to reduce cognitive overload, especially in complex, information-dense products.

5. Vaults

Why Choose Option A Over Option B – Clear Selection State

Chosen (A):
Use explicit state labels (e.g., “Working” / “Not Working”), status chips (e.g., “Selected”), icons, and tooltips to indicate interaction state.
‍Not Chosen (B):
Use only a blue highlight box or color changes to suggest selection without clear labels or supporting cues.

‍Rationale:
Users—especially beginners like Yuki or older investors like Hiroshi—often feel anxious when they’re unsure whether an action has been registered. A simple blue box alone caused confusion in user testing simulations. Adding multiple visual and textual cues ensures confidence and avoids misinterpretation of system status.

‍Trade-off:
Adding status chips and iconography increases visual density and may reduce minimalist aesthetics. Tooltips and animations require additional implementation time and QA to ensure consistency across different screen sizes.

PM / Engineer Discussion:
We discussed with PMs the balance between clarity and visual load. Engineers raised concerns over state logic syncing across strategy lists, so we modularized the components and used shared context states to avoid logic duplication.

‍Validation:
While no formal user testing was conducted, this pattern is backed by Nielsen Norman Group’s guidelines on “recognition over recall” and is widely used in apps like Zapper and Lido. Internally, we ran informal reviews with non-crypto team members who were able to identify selected states more reliably after the change.

6. Club

In the Club module, users are not merely selecting strategies—they are actively comparing top performers, exploring patterns, and evaluating outcomes. This design flow was built around that competitive and comparative mindset.

Why Choose Option A Over Option B – Modular Card Layout for Readability

Chosen (A):
Use modular cards (Leaderboards, Participants, Strategy Cards) with grouped color sections, icons, spacing, and tooltips to improve readability and information hierarchy.
‍Not Chosen (B):
Display all participant data and strategy info in a single flat table, stacking dense content in one view.

‍Rationale:
For beginner users and older investors, dense layouts lead to cognitive overload and disengagement. A modular design helps segment content, reduce anxiety, and enable faster comprehension and comparison.

‍Trade-off:

• Requires more upfront design effort to structure layout logic
• Aligned with PM to prioritize comprehension; engineers mitigated load concerns with lazy-loading and modular components

Validation:

No formal A/B test, but backed by NN/g research showing card layouts improve scan efficiency by 27–40%, and validated by tools like Zapper and Zerion

Why Choose Option A Over Option B – CTA Buttons with Immediate Feedback

Chosen (A):
Referral Link button triggers a toast notification confirming success (“Link copied”).
Not Chosen (B):
No feedback on click, leading users to think the button is broken.
‍
‍Rationale:
Web3 platforms must establish trust. Toast messages provide non-intrusive, real-time confirmation that reassures users and reduces perceived system failure.

‍Trade-off:

• Requires implementation of a toast state and logic
• Engineers confirmed low dev cost; PM supported this for clarity

Validation:

• Zapper and Rabby Wallet both skip traditional login but heavily rely on toast notifications (e.g., "Transaction submitted" or "Link copied") to confirm actions.
• Nielsen Norman Group emphasizes “visibility of system status” as a key heuristic: users should always be informed of what is going on through immediate feedback.

Why Choose Option A Over Option B – Unified Sidebar Filter Panel

Chosen (A):
Use a unified sidebar panel to consolidate all filtering options (Layer, Parent Name, User Name, Strategy Tier, Asset Pair, Top N Users, Custom Range), supporting multi-selection and filter summary management.
‍Not Chosen (B):
Distribute filters across multiple UI elements, such as top toolbars, table columns, and dropdowns in various sections, without centralized management.

‍Rationale:
To support users in comparing and exploring strategies within the Club module, we needed a filtering system with clear structure, scalability, and low cognitive load. A sidebar allows centralized control of filters, supports expandable "Show More" sections, and avoids the pitfalls of dropdown overload and long option lists from the original design. This makes it easier for users to understand available conditions and apply precise filters.

We also introduced a "Selected Filters Row" that enables users to remove conditions easily, avoiding inefficient back-and-forth toggling within lengthy forms and improving both usability and transparency.

‍Trade-off:

• Increased layout space usage: The sidebar reduces visible table area, especially on smaller screens. We had to account for collapsible states and scrolling interactions.
• Additional development effort: Multi-select logic, condition history, and deletion interactions required extra frontend work.

Engineering Collaboration:
‍Worked with engineers to implement a collapsible drawer architecture, ensuring it remains usable under responsive conditions (RWD).

Validation:‍

• Referencing UI patterns from data-intensive products like Airtable, Zapper, and Notion, centralized filtering is proven effective for handling complex filter combinations and power user workflows.
• Nielsen Norman Group recommends grouping related controls to reduce search costs and cognitive load.

Why Choose Option A Over Option B – Sidebar Filter with “Show More” for Large Datasets

Chosen (A):
Consolidate all filters in a sidebar with groupings, expandable “Show More” sections, and a filter summary at the top for quick review and deletion.
‍Not Chosen (B):
Use dropdowns to list hundreds of options, leading to unmanageable scroll and user frustration.

‍Rationale:
Dropdowns are not scalable for complex or large datasets. A sidebar improves scannability, supports multi-condition filtering, and maintains visual structure.

Trade-off:

• Required planning for grouping, collapse/expand animation, and responsive layout
• Engineers raised concerns about mobile responsiveness, solved via collapsible drawer and breakpoint support

Validation:

• Nielsen Norman Group recommends faceted search using filter sidebars for better overview and decision-making in large item sets (e.g., e-commerce, dashboards).
• Amazon, Figma Community, and Opensea use sidebars for multi-faceted filtering of thousands of entries.

Why Choose Option A Over Option B – Strategy Segmentation Instead of Flat Table

Chosen (A):
Split strategy display into Active / Inactive groups and modular views with sorting/filtering logic, avoiding a flat, overloaded table.
‍Not Chosen (B):
Display all strategy data in a single 20-column-wide table.

‍Rationale:
Segmentation reduces visual strain and aligns with user mental models. Filtering by status also allows users to focus only on relevant content and make decisions faster.

Trade-off:

• Required defining segmentation logic and restructuring backend queries
• Engineers applied lazy-loading to optimize performance

Validation:

• Zapper.fi splits DeFi positions by chain, asset type, or status rather than using one giant table. This improves scannability on both desktop and mobile.
• Google Material Design recommends “progressive disclosure” to manage dense information — show the most relevant segments first, and allow drill-down as needed.
• A study by Baymard Institute found that grouped content with visual hierarchy reduces decision time by 27% in dashboards vs. unsegmented layouts.

Why Choose Option A Over Option B – Collapsible Sidebar Menu

Chosen (A):
Design the sidebar (filter menu) to be collapsible and expandable based on user interaction.
‍Not Chosen (B):
Keep the sidebar fixed and always visible, occupying a static portion of the screen.

Rationale:
The collapsible sidebar provides better flexibility for different user workflows and screen sizes. When users are actively filtering or comparing data (e.g., in the Club module), they can expand the menu to adjust conditions. When they want to focus on reading or comparing strategies, collapsing the sidebar increases usable screen space and reduces visual noise.
‍
This supports:

• New users who need persistent guidance and visible filters (expanded view)
• Power users who want an uncluttered layout for fast comparison (collapsed view)
• Mobile users who have limited screen width

PM / Engineer Discussion:

• PM supported this interaction model to improve flexibility and reduce bounce caused by cluttered interfaces
• Engineers flagged responsiveness as a risk, especially on smaller screens. We addressed this by using a collapsible drawer with breakpoint-based layouts and ensuring filter states are preserved between collapsed and expanded states.

Validation:

• This interaction follows common patterns used by modern tools like Zapper, Airtable, Notion, and Figma, where side filters or menus are collapsible to adapt to user context.
• Nielsen Norman Group research recommends progressive disclosure and minimizing clutter for complex tasks—both are achieved via this collapsible design.
• Informal tests with internal stakeholders showed that users appreciated the control to hide or show filters when navigating dense data.

Success Metrics

To evaluate whether the redesign achieved its goal, I defined the following success indicators:

• Bounce Rate ↓
  ‍Visitors should feel more secure and continue exploring instead of leaving immediately. A lower bounce rate reflects improved first impressions and trust.
• Connect Wallet Conversion Rate ↑
  ‍More users should feel confident to connect their wallet after seeing upfront trust signals. This is a key indicator for onboarding success.
• Filter & Sorting Action Rate ↑
  ‍The Club module redesign encourages strategic comparison. Increased interaction with filters, sorting, and Top N views validates that users are actively exploring and engaging with the interface.

Expected Impact

This redesign aimed to improve trust, usability, and content clarity in a crypto investment context where users often feel overwhelmed or skeptical. By refining the visual language (e.g. simplifying the hero section, reducing NFT dominance), implementing modular layouts, and reworking filters and asset displays, we expected:

• Higher trust perception: A more financial-service-like look and feel aligns with DeFi users’ mental models, helping reduce bounce rates caused by visual ambiguity.
• Improved content scan-ability: Active/inactive asset segmentation, real-time filtering, and clear value display were designed to reduce cognitive load and help users make faster comparisons.
• Increased strategy interaction: By enabling modular strategy cards and visually distinct toggles, we aimed to drive higher engagement with strategy comparison features.

While formal user testing was not conducted due to timeline and access constraints, these patterns are validated across platforms like Zapper, CoinGecko, and TradingView. Future validation could be conducted through A/B testing or tracking scroll depth, click-throughs, and strategy selection conversion.

Design System

1. Designing for Trust is Critical in Web3
This project deepened my understanding of how trust and perceived legitimacy directly impact user onboarding in Web3. Unlike traditional products, users often hesitate before even connecting their wallet—so visual clarity, upfront communication, and transparency (e.g., roadmap, audits) are essential in creating a trustworthy first impression.
‍
2. Balancing Simplicity and Depth for Multiple User Types
One of the biggest challenges was designing for a diverse user base—from non-technical Japanese users to global crypto investors. I learned to prioritize progressive disclosure, using clear language and modular UI to keep things simple without limiting advanced functionality.
‍
3. System Thinking Helps Reduce Fragmentation
Fragmented UI and inconsistent flows across versions (V2, V3, Arbitrum) created friction. This project reinforced the importance of systematic design thinking: creating reusable components, consistent interaction models, and scalable layouts that reduce confusion and support long-term growth.
‍
4. Collaboration with PM and Engineers Shapes Feasibility
Working closely with the PM and engineers helped me frame solutions that were not only user-centric but also technically feasible within our timeline. It reminded me that great UX happens when design, product, and engineering are aligned.

Related Digital Products