Building a Unified Platform for Effortless DeFi Investment and Tracking

Frontier main image
INTRODUCTION

Frontier is a global, chain-agnostic DeFi aggregator and crypto wallet, aiming to simplify DeFi investment management. As its user base expanded, the existing mobile experience struggled to support new, complex use cases in DeFi. In 2021, we set out to create a simplified, user-friendly product for managing all DeFi investments in one place.

MY ROLE

User research, competitor analysis, wireframing, visual design, prototyping

COLLABORATORS

Akash Gupta | Product Designer

Ajay Kappa | Product Manager

4+ Engineers

TIMELINE

February 2022 - August 2022

OVERVIEW OF THE FINAL DESIGN
Dialog boxes for wallet activities
Dialog boxes for connecting, tracking, and switching wallet
All info under My assets tab
Key investment information is accessible to users
NFT marketplace
Visual hierarchy for NFT marketplace
Transactional side sheets
Contextual and informative transactional side sheets
PROBLEM STATEMENT

With no product allowing users to fully track and manage their DeFi portfolios, Frontier sought a solution to consolidate these functions into one streamlined experience. Our core challenge was: How might we empower users to build, track, and manage their DeFi portfolios using Frontier in a way that is intuitive, enjoyable, and straightforward?

RESEARCH & INSIGHT

Understanding the business

We began by aligning on the broader goals for Frontier, examining target users, and understanding the platform’s core business objectives.

Key takeaways from the stakeholder interview
Key takeaways from the stakeholder interview
I then conducted a competitor analysis to evaluate Frontier’s positioning within the market and identify how competitors addressed similar user needs, analyzing areas where we could innovate.
Competitor analysis
Competitor analysis overview
REFINING USER NEEDS

Identifying and prioritizing user goals

To gain a deeper understanding of user behavior and frustrations, I conducted interviews with six DeFi investors across Singapore, the US, and Canada. This approach revealed insights into how frequently they checked portfolios, challenges faced during transactions, and features they found essential.

User research insights
Key insights
Analyzing this data, I identified two main challenges users faced:
  1. Overwhelming complexity: Too many features and unfamiliar terminology left users feeling lost.
  2. Lack of guidance on failed transactions: When users encountered an error, they struggled to understand the next steps.
PROBLEM 1: SIMPLIFYING COMPLEXITY

How might I make features more accessible for users?

The challenge was to structure content and features based on user relevance, minimizing the cognitive load. To address this, I conducted a card-sorting exercise with five participants who had experience with financial platforms to understand the most intuitive grouping of features.

Card sorting participant example 1Card sorting participant example 2
Card sorting example by participant

After analyzing card-sorting results, I created a user-centered site map that organized information clearly, allowing us to prioritize features based on their importance to the user.

Frontier site map
Finalized site map
FINAL SOLUTION

Using this site map, I designed a left-side vertical navigation for the web app, ensuring users could access essential content and features with ease.

Left side vertical navigation
Left-side vertical navigation
PROBLEM 2: GUIDING USERS THROUGH TRANSACTION ERRORS

How might I reduce user frustration during failed transactions?

Users experienced stress during transaction failures and lacked clear paths forward. I explored various visual formats for showing relevant error messages directly within the transaction flow, aiming to create a seamless experience.

Card variants for error handling
Initial card variants for error handling

Validating proposed error handling solutions

I created a rapid prototype to test different error-handling approaches, which was shared with five users through Maze. I analyzed usability metrics, such as error recognition, next-step clarity, and ease of recovery, to find the best-performing solution.
Usability testing task analysis
Usability testing task analysis
Decision

The third variant performed best, as it displayed an inline info bar with highly visible yet non-intrusive error messages. Users found it easy to take action, as clear guidance was placed near the error.

FINAL SOLUTION

An intuitive error message now guides users seamlessly, reducing stress during transaction errors and allowing them to proceed with confidence.

Error message in transaction side sheet
Error message in transaction side sheet with actionable guidance
VISUALS

Style Guide

To maintain a consistent design language, I developed a style guide aligned with Frontier’s established design principles.

Style guide for Frontier

This guide enabled a cohesive look and feel across Frontier, enhancing brand recognition and user experience.

Learning and key takeaways

  1. Simplified asset comparison with listed views: Presenting assets in a clear, listed format allowed users to compare similar options side by side, reducing cognitive load. This structure enabled faster, more confident decision-making by helping users intuitively evaluate differences between assets.
  2. Prioritizing relevant earning opportunities: By displaying only available earning options upfront, users were guided toward actionable choices, reducing decision fatigue. Personalizing content in this way helped streamline the experience, making it both user-friendly and purpose-driven.
NEXT PROJECT
Creating meaningful gifting experiences with Nume
Nume Gifting transforms gifting from a routine transaction into a personal gesture. The app simplifies buying, gifting, and managing physical and digital gift cards, solving issues like impersonal gifts, card management, and recipient preferences.