UX Case Study : Added new UI features for crypto trading on the GICTrade-P2P Forex Platform

It’s easy add features to a design or product. It’s really really hard to do that without also making the product more complex.

Typically if you plotted the amount of functionality vs interface complexity it would look something like this:

Adding a new feature to an app that people already love is hard. People are used to their existing workflows, they have expectations about how things work, they don’t like any kind of change, and your new feature has to live up to the standard of your previous releases. Early on in your product lifecycle, you can make big pivots without too many repercussions. Improving upon a mature product is another beast entirely. It’s impossible to make everyone happy, so how do you make design decisions that move your product forward to appeal to a wider audience without alienating your current user base?

Removing complexity whilst maintaining functionality is hard as hell

Step 1: Define the problem I’m trying to solve

Allow customer to buy and sell crypto coins and supports stacking and farming using WGICT coin.

Step 2: Set clear goals and parameters for the update

With a problem to solve, we usually try to clarify the purpose of the product, which we will refer back to during the process:

1. A simple view that maintains the simplicity of GICTrade
2. The user can do Buy, sell, trade, withdraw, deposit from one app.
3. The trading system will take the least amount of time and will be able to crypto prices and trade on the same screen.
4. Adding the estimated purchase price information in the order summary before the purchase is made

Step 3: Learn from existing user feedback and metrics

I created a proto-persona based on experience after learning cryptocurrency fundamentals and by conducting short offline interviews with my friends who have invested in cryptocurrencies before. Some types of apps only manage to buy or sell cryptocurrencies. Some applications only serve trading systems. Some are too complex for users. So, at least I have selected some ways for a user-friendly Crypto wallet solution.

1. Users need different apps to buy/sell and trade.
2. Users want to get a simple and easy trading system in the shortest possible time.
3. The user cannot confirm the estimated purchase price
4. Novice users have difficulty understanding the transaction process because the information displayed uses expert language which is difficult for novice traders to understand

Step 4: Research the idea

The average user needs allows the user to buy/sell/trade cryptocurrency and gives the user a better experience

1. Ability to control candles by time (1 day, week, month, quarter, year)
2. The ability to be able to view the latest crypto coin price information on the crypto list page with a price increase or decrease information on a percentage scale
3. Can see crypto assets owned on the crypto list page to make it easier for users to review for the next purchase
4. Ability to be able to analyze and display the minimum purchase price of crypto assets
5. Ability to view detailed statistics of crypto assets (last update, last price, buy price, sell price, daily low, daily high)
6. On the buy page, I implemented one of my key principles in the process of adding a crypto trading feature to the Gictrade platform which I think could have some very powerful effects on how I approach my design work, especially when I can’t easily simplify — the concepts: Valid Default vs Invalid Default. By directly adding the minimum purchase price of crypto assets in the purchase amount field in rupiah
7. When a crypto asset is owned, it can be able to see the position of the asset (Amount of assets, value in rupiah, today’s yield, estimated profit, average purchase price)
8. Trigger the staking process on the WGICT crypto detail page by adding a CTA to join now

Step 5: Outline the solution in a low-fi way

After getting all the information and data from the users and indentyfying the problem. I am able to draw user flow and wireframes that I could make sure that I am taking care of users pain points with the current buy/sell/trade cryptocurrency process. So that I could give a more user centred prototype, below are some initial rough user flow:

I define the proposed solution in low-fi. I clarify the proposed idea, requirements, and get feedback from charm. Over time, I may include visual exploration, sketches on paper to help clarify options and the overall vision of new features.

Flow Buy Crypto

Flow Sell Crypto

Flow Staking

Iteration Process

You can see the iteration process live here

Next update…

Due to limited processing time, this article will continue with the high-fidelity design process, for the process after this I will explain the next process that I will do to solve this problem.

Step 6: Test your mockups and get feedback early

Once I have a direction for my design, there’s nothing like a mockup to really bring an idea to life and see if it feels right.

Step 7: Create consistent components that work alongside your current product

A new feature is an exciting opportunity to offer additional value to users, but it’s still essential to maintain consistency with the legacy of the product.

So i reused as many elements (colors, sizes, text styles, paddings, shadows) as possible and only introduced new components where absolutely necessary. This allowed i to find the balance between a new feature and a familiar experience.

Step 8: Follow the latest platform guidelines and accessibility standards

When designing a new feature, i go back and brush up on the latest platform guidelines. Apple, Google, Microsoft all have well documented resources that help designers create better experiences.

Designing a new feature is a balancing act. It often requires careful consideration of design intention, development impact, user needs and expectations of the current product.

There might not be a perfect solution but one that works well enough. Keep iterating the feature and improve it over time. Design is never done.