DeFinance.

UX/UI DESIGN
— ‘21

Helping blockchain investors optimize returns.

ABOUT

This project was part of my UI/UX Specialization Course from CalArts. The goal of this project was to create a clickable prototype of an app of our choice. This case study will take you through the design processes, decisions, and problems that I faced on the way, and how I tried to solve those.

ROLE

UI/UX Designer

RESPONSIBILITIES

UX/UI
System Design
Product Design
Prototyping

(Description)
Goals of the Project

The goal of this project was to create a clickable prototype of an app of our choice. I decided to go with a decentralized finance (crypto) app since I have been very interested in the industry. I had a lot of difficulties finding an app that was simple, easy, and informative about crypto and everything happening in the crypto world. For the sake of keeping this project short, I will assume you are familiar with crypto.

More specifically, I decided to tackle the complexity of buying/trading crypto. As well as making an application that is easy and usable even for first-time crypto users.  
 
A product like this would benefit customers since it would make it much easier to buy and invest in crypto, as well as staying informed with the latest of the crypto world. The crypto world is a rollercoaster of ups and downs, so my biggest assumption is that people would like to know about what’s going on with their coins

Understanding The Customer

01. Quantitative survey via social networks.

I did an instagram survey to find out if people have already bought cryptocurrencies, with follow up questions to understand why they have already done so, or why they haven’t.  
 
Most of the people who answered this survey have never bought cryptocurrencies, for two main reasons:

Ignorance:  They don’t know the world of cryptocurrencies, they don’t know where to start or where to buy them.

Fear:  They may lose all their money, and they think it is too late to start: those who make money with cryptocurrencies started much earlier than them.

02. Qualitative survey via Google Forms.

These questions were sent to about 20 people. All having experience with cryptocurrencies, with varying levels of personal involvement and interest.

Have you already bought cryptocurrencies, why?  
Which platform(s) do you use?  
How much money did you invest?  
How much time do you spend each week managing your cryptocurrencies?  
Which feature(s) do you prefer? Why?

Insights from the Survey

72% Had already bought cryptocurrencies
53% Used more than 3 Platforms
86%  Invested over $1000
63%  Spent more than 1 hour researching
79%  Preferred in app news.

Defining the Customer

The user of this app would be the average person interested in crypto. I put these people in two categories, the serious investors, and the first-time investors. Both having similar motivations, but slightly different needs. Guidance is needed for first-time investors, and efficiency is needed for serious investors.  
 
When thinking about first-time investors who might need more guidance, I’m thinking of older generations. Which are sometimes left under-served by digital products, because they have low tech-savviness. Lowering the entry barrier and focusing on usability with this in mind, older generations and first-time users could find crypto more appealing.  
 
Age-wise, I would assume all age groups starting around 21-26 (When we start to have some financial independence). Of medium, to high-income social statuses would fit the app’s target audience.

User Persona
User Persona
User Persona
User Persona
When?

Since the task is to create an app on a mobile device, we can assume the user will have their mobile device with them at all times.  

Assuming most users will use the app to invest, we can assume that they have some time to research and look at news of upcoming coins. And that’s where this app would fit in.

Their Needs?

The main need we’re addressing with this product is enabling crypto investors to be in control of their crypto. To achieve that, these are some questions the user should be able to answer as soon as they open the dashboard.

1. How is my crypto doing
2. What coins do i own
3. What is on the news

Customer Summary

From this short research, we can conclude that people want to have access to exchange with low commissions and have easy and fast access to crypto. Many people have to use up to 3 or 4 platforms to exchange cryptocurrencies.

(Solving)
Solving the Problem

These are some of the tasks our users would need in order for our app to provide value.

1. Have a Secure Account  
2. Be able to transfer money  
3. Exchange cryptocurrencies  
4. Send Crypto to others  
5. Get informed about the coins

To start building the UI Flow, I mapped out the user tasks that explain the steps users should take to use our app successfully, separated by the end goal of the user.

Mapping Out

Before developing the interface, I analyzed the functionality of each page of the app. This map made it easy to navigate through attributes and sections during the design of the app.

User Flow
IMG_1. User Interace Flow
Page Maps
IMG_2. Functionality of each page.
Documentation of Graphs
IMG_3. Documentation of Graphs
(Solving tasks)
Solving the Problem

Users should be able to log in with google or Facebook, making the barrier to entry much easier. If not, users should have the ability to create an account.  

Once the user signs in for the first time, the first screen should communicate what the app is about and reinforce the app’s value.  
‍  
After authorization, the main screen should suggest the best-performing coins. As well as allow them to keep watch on coins and get notified about the moving price.  
 
For existing users, we would prompt them to set a password, in order for their wallets to be secure.

Learning about the Coins

Each Coin should include information about the coin, this is to help the user decide if this coin fits their needs. I divided this into two categories Primary Information and Secondary.  
‍  
Primary Information would be the current value and change over time shown in a graph format.

For Secondary information, I decided to go with the following, these are the most important points and these help the user decide if the coin is right. In the cases of new or uninformed users, a guide would be shown next to each statistic, explaining what it means and how it affects the coin price.

1. About the Coin
2. Market Cap
3. Volume
4. Supply
5. Popularity
6. Price Correlation
7. News about the Coin

After learning about a coin and deciding that this coin fits their needs, they would have the option to “Trade” the coin. At first, they would have to buy a coin, then options like selling, exchanging, and transferring to others would become available.

IMG_4. Menu

After choosing to buy a coin, the user would then get asked to review the payment.

Once the coin is bought, it would be displayed on the home screen to make sure the user remembers it and has quick access to it and all the information and news about the coin.

Staying Informed

I wanted the news to be a big part of this project, seeing how other crypto apps either have no news integrated into the app or are not very interested in keeping the user informed by showing them relevant news.

With some simple functionality of searching/filtering by coin or just going through the latest articles, DeFinance would always keep the user up to date with the latest news on crypto. Resulting in a better-informed user, which would lead to users making better decisions on what coins they buy.

IMG_6. Crypto News
IMG_7. News Continued
Keeping Track

To keep track of your coins & your portfolio the app would send push notifications from time to time. This would remind the user of what is happening with their coins, and information about how their portfolio is doing. As well as news about crypto that might affect them.

Gif_Notification
Also, Widgets

I also came up with the idea of making a widget for the app. Having quick access to your coins and/or portfolio would be very helpful and would reduce the need of having to open the app for quick checks. Making for a better experience.

IMG_5. Widgets in Different Sizes.
Conclusion

This project was part of my UI/UX Specialization Course from CalArts taught by Michael Worthington. The timeframe of this project was really short, therefore there are some things I would have done differently (User Research and User Testing).

Although there are some things that I would do differently, I am very happy with the result, and I learned a tremendous amount from creating this app from the ground up.

(More Images)

Let's Get Started

This form clarifies important questions in advance. Please be as precise as possible, as it saves us both time.

Don't Like Forms? hello@reipishtari.com