SHWETA NARANG

Designing a web app for a Defi aggregator

  • USER EXPERIENCE
  • RESEARCH
  • DATA VISUALIZATION
  • USER TESTING

INTRODUCTION

Frontier is a global chain agnostic Defi aggregator & crypto wallet. Over time, its user base evolved and the existing mobile app experience couldn’t handle the emerging use cases. In 2021, we set out to design the product to make it a delightful app for investing in Defi from one place.

MY ROLE

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

COLLABORATORS

Akash Gupta | Product Designer
Yash BM | Product Manager
2 Engineers

TIMELINE

Feb 2022 - May 2022

Overview of the final design

Dialog boxes for connecting, tracking, and switching wallet

All crucial information about the investments easily accessible to the end-users

Visual hierarchy maintained for NFT marketplace

Contextual and informative transactional side sheets

PROBLEM STATEMENT

There exists no product that allows users to track and manage their Defi portfolio from one place and users find themselves at odds with Defi’s current UX practices. How might we empower our users to use Frontier to build, track and manage their Defi portfolio, while making it simple, delightful, and uncomplicated to use.

RESEARCH & INSIGHT

Understanding the business

We kicked off the interview with a comprehensive understanding of their business, their targeted users, competitors, and their goals for the future.

Insights from the stakeholder interview

Then, I conducted competitor analysis to figure out where Frontier stands in the market and how its competitors address the users.

Competitor analysis

REFINE USER NEEDS

Identifying and prioritizing user goals

I wanted to understand the behavior of the investors, the challenges they faced while transacting, and how often they visit a platform to track their assets. So, I conducted user interviews with 6 participants from Singapore, the US, and Canada.

After analyzing all the data collected during the research phase, I came across two major problems faced by the users :
1.Too many features and an overwhelming amount of content to consume.
2.Not enough guidance is provided to help users get out of an unavailable opportunity.

PROBLEM 1: COMPLICATED TO USE

How might I make locating the features easier to find for the users

There were too many features, crypto jargon, and an overwhelming amount of content. I wanted the content to be structured based on what makes sense to the users. So, I conducted card sorting with 5 participants who have used any finance platform before.

Card sorting by participant 2

After thematic analyzing card sorting final results, I organized and structured a site map for the web app.

A clear, communicative, findable site map

Final solution

I used the site map to design a scalable, responsive, easy-to-scan left-side vertical navigation for the web app.

Left-side vertical navigation

PROBLEM 2: ERROR ACTING AS A BLOCKER

How might I reduce user stress during a transaction failure and give users a clear way ahead

Users not being able to complete the task due to error was a major frustration while performing any transaction. So, I started by making card variants to visually show relevant errors on the same screen.

Exploring different ways to handle errors due to insufficient funds

Validating proposed error handling variants

A rapid prototype was made for this flow and sent to 5 users via Maze. I used the usability metrics to analyze the task.

Task analysis from the user testing

I went ahead with 3rd variant because:
Inline info bar display error messages to users were highly visible yet non-intrusive.
Appropriate actions are provided with guidance closer to the error message.
The user flow was linear and seamless.

Final solution

An error message was placed ensuring it has enough information for the user to guide him to get out of this erroneous situation.

Relevant error in the detailed side sheet along with actions to be taken

VISUALS

Style Guide

To keep the design consistent, I created a style guide to be used across the web application.

Style guide for the design

Learning and key takeaways

Showing only available earning opportunities upfront: The time it takes to make a decision increases with the number and complexity of choices. That's why personalization is so powerful.
Investment & Sunk Cost Effect: Right after a reward is the best moment to ask the user to invest a few of their assets in anticipation of future benefits. It makes users more likely to stick around for two reasons:
a.The investment loads the next trigger (e.g. notification to remind users of their recently earned rewards)
b.People value things more when they invest work/resources in them (a.k.a. the “Sunk Cost Effect”).
Using a listed view for all assets: It's a lot easier to make a choice when we compare similar things. Our brain can quickly evaluate the differences as opposed to when options are different.