Optimizing User Experience: A Case Study in Cryptocurrency Trading App Design

Optimizing User Experience: A Case Study in Cryptocurrency Trading App Design

Optimizing User Experience: A Case Study in Cryptocurrency Trading App Design

Wednesday, June 1, 2022

Wednesday, June 1, 2022

Wednesday, June 1, 2022

Overview

Overview

Overview

Airaa is a cryptocurrency application that incorporates automated trading features or bots. This application enables users to configure profit or purchase amounts according to their preferences automatically.

Airaa is a cryptocurrency application that incorporates automated trading features or bots. This application enables users to configure profit or purchase amounts according to their preferences automatically.

Airaa is a cryptocurrency application that incorporates automated trading features or bots. This application enables users to configure profit or purchase amounts according to their preferences automatically.

Goals

Goals

Create an application that simplifies users' ability to monitor the cryptocurrency market.

Create an application that simplifies users' ability to monitor the cryptocurrency market.

Implement an Auto Trade feature to assist users in generating profits from cryptocurrency.

Implement an Auto Trade feature to assist users in generating profits from cryptocurrency.

Enable users to conduct transfer and deposit transactions.

Enable users to conduct transfer and deposit transactions.

New Challenge

New Challenge

Limited experience in the field of cryptocurrency.

Limited experience in the field of cryptocurrency.

The a need for an in-depth analysis of design patterns related to cryptocurrency.

The a need for an in-depth analysis of design patterns related to cryptocurrency.

The abundance of information within the cryptocurrency space necessitates extensive exploration for the right layout.

The abundance of information within the cryptocurrency space necessitates extensive exploration for the right layout.

Benchmarking

Starting benchmarking with a focus on analyzing the design patterns of three products: Pintu, Rekeningku, and Binance Life. The goal is to evaluate design effectiveness for informed decision-making.

Starting benchmarking with a focus on analyzing the design patterns of three products: Pintu, Rekeningku, and Binance Life. The goal is to evaluate design effectiveness for informed decision-making.

Starting benchmarking with a focus on analyzing the design patterns of three products: Pintu, Rekeningku, and Binance Life. The goal is to evaluate design effectiveness for informed decision-making.

Clean and organized layout despite the abundance of information.

Clean and organized layout despite the abundance of information.

Emphasis on crucial information, such as balance or cryptocurrency trends.

Emphasis on crucial information, such as balance or cryptocurrency trends.

Information is presented in a user-friendly, simple language.

Information is presented in a user-friendly, simple language.

Utilization of commonly observed layout patterns in similar products.

Utilization of commonly observed layout patterns in similar products.

User Flow

I adapted patterns and flows from similar products or those with a similar business focus.

I adapted patterns and flows from similar products or those with a similar business focus.

I adapted patterns and flows from similar products or those with a similar business focus.

Design Solution

Design Solution

How can users easily access information through the home page?

How can users easily access information through the home page?

How can users easily access information through the home page?

Design 1

Design 1

Design 1

Displaying balance and today's profit information through 'Cards' and providing three menus for accessing these primary features.

Displaying balance and today's profit information through 'Cards' and providing three menus for accessing these primary features.

Displaying balance and today's profit information through 'Cards' and providing three menus for accessing these primary features.

Design 2

Design 2

Design 2

Revamping the 'Card' structure to make it more informative and introducing a 'Trending' section.

Revamping the 'Card' structure to make it more informative and introducing a 'Trending' section.

Revamping the 'Card' structure to make it more informative and introducing a 'Trending' section.

Design 3

Design 3

Design 3

Simplifying the presentation of balance and profit information to eliminate the need for scrolling.

Simplifying the presentation of balance and profit information to eliminate the need for scrolling.

Simplifying the presentation of balance and profit information to eliminate the need for scrolling.

How can users view which cryptocurrencies are currently trending in the market?

How can users view which cryptocurrencies are currently trending in the market?

How can users view which cryptocurrencies are currently trending in the market?

Design 1

Design 1

Design 1

Highlighting the balance of the total assets owned and implementing a slider concept for browsing the list of cryptocurrencies available in the market.

Highlighting the balance of the total assets owned and implementing a slider concept for browsing the list of cryptocurrencies available in the market.

Highlighting the balance of the total assets owned and implementing a slider concept for browsing the list of cryptocurrencies available in the market.

Design 2

Design 2

Design 2

Reconfiguring the structure of the cryptocurrency list for easier information readability.

Reconfiguring the structure of the cryptocurrency list for easier information readability.

Reconfiguring the structure of the cryptocurrency list for easier information readability.

Design 3

Design 3

Design 3

Adding a background to the 'Card' to maintain consistency with the applied style.

Adding a background to the 'Card' to maintain consistency with the applied style.

Adding a background to the 'Card' to maintain consistency with the applied style.

How can users comprehend the information on the cryptocurrency detail page?

How can users comprehend the information on the cryptocurrency detail page?

How can users comprehend the information on the cryptocurrency detail page?

Design 1

Design 1

Design 1

Creating a 'Card' for displaying the name and amount details, enhanced with a gradient color scheme to provide a distinctive visual identity for the application.

Creating a 'Card' for displaying the name and amount details, enhanced with a gradient color scheme to provide a distinctive visual identity for the application.

Creating a 'Card' for displaying the name and amount details, enhanced with a gradient color scheme to provide a distinctive visual identity for the application.

Design 2

Design 2

Design 2

Feeling that the use of a 'Card' on the detail page was somewhat awkward, I redesigned its structure to be more informative, with a centered layout.

Feeling that the use of a 'Card' on the detail page was somewhat awkward, I redesigned its structure to be more informative, with a centered layout.

Feeling that the use of a 'Card' on the detail page was somewhat awkward, I redesigned its structure to be more informative, with a centered layout.

Design 3

Design 3

Design 3

As I found the center-aligned position to lack consistency, I reconfigured it into two columns with the logo on the right.

As I found the center-aligned position to lack consistency, I reconfigured it into two columns with the logo on the right.

As I found the center-aligned position to lack consistency, I reconfigured it into two columns with the logo on the right.

How can users comprehend the information presented in auto trades?

How can users comprehend the information presented in auto trades?

How can users comprehend the information presented in auto trades?

Design 1

Design 1

Design 1

Implementing a 'Slider' with 'Cards' to provide users with a list of their auto trades. There are three actions available, with a primary focus on highlighting the 'Start' action.

Implementing a 'Slider' with 'Cards' to provide users with a list of their auto trades. There are three actions available, with a primary focus on highlighting the 'Start' action.

Implementing a 'Slider' with 'Cards' to provide users with a list of their auto trades. There are three actions available, with a primary focus on highlighting the 'Start' action.

Design 2

Design 2

Design 2

As per the client's feedback that the previous design would be less user-friendly, I decided to change its structure to a list format.

As per the client's feedback that the previous design would be less user-friendly, I decided to change its structure to a list format.

As per the client's feedback that the previous design would be less user-friendly, I decided to change its structure to a list format.

Design 3

Design 3

Design 3

To maintain component consistency, I added a background as a separator for the auto trade list.

To maintain component consistency, I added a background as a separator for the auto trade list.

To maintain component consistency, I added a background as a separator for the auto trade list.

Final Decision

Final Decision

Final Decision

After exploring several design possibilities, I narrowed down the final design for the cryptocurrency bot application:

After exploring several design possibilities, I narrowed down the final design for the cryptocurrency bot application:

After exploring several design possibilities, I narrowed down the final design for the cryptocurrency bot application:

Simple Layout

Simple Layout

Simple Layout

I implemented a simple layout structure for the home page, displaying balance and today's profit without the need for scrolling.

I implemented a simple layout structure for the home page, displaying balance and today's profit without the need for scrolling.

I implemented a simple layout structure for the home page, displaying balance and today's profit without the need for scrolling.

New Section

New Section

New Section

Added a trending section to inform users about which cryptocurrencies are currently trending.

Added a trending section to inform users about which cryptocurrencies are currently trending.

Added a trending section to inform users about which cryptocurrencies are currently trending.

Comprehensive Information

Comprehensive Information

Comprehensive Information

Presented comprehensive information on individual cryptocurrencies to make it easily understandable for users.

Presented comprehensive information on individual cryptocurrencies to make it easily understandable for users.

Presented comprehensive information on individual cryptocurrencies to make it easily understandable for users.

Draw Attention

Draw Attention

Draw Attention

Highlighted the 'Start' button to draw user attention to this call-to-action, encouraging them to initiate auto trading for the selected cryptocurrency.

Highlighted the 'Start' button to draw user attention to this call-to-action, encouraging them to initiate auto trading for the selected cryptocurrency.

Highlighted the 'Start' button to draw user attention to this call-to-action, encouraging them to initiate auto trading for the selected cryptocurrency.

Lesson Learn

Lesson Learn

Design aligns with business

Design aligns with business

Design aligns with business

During my design journey, I've realized that it's essential to keep the design aligned with the business while ensuring that vital information is easily conveyed to users. Neglecting these aspects in design can render features ineffective and lead to reduced user engagement, ultimately impacting conversion rates.

During my design journey, I've realized that it's essential to keep the design aligned with the business while ensuring that vital information is easily conveyed to users. Neglecting these aspects in design can render features ineffective and lead to reduced user engagement, ultimately impacting conversion rates.

During my design journey, I've realized that it's essential to keep the design aligned with the business while ensuring that vital information is easily conveyed to users. Neglecting these aspects in design can render features ineffective and lead to reduced user engagement, ultimately impacting conversion rates.

Consistency Design

Consistency Design

Consistency Design

I believe that maintaining consistency with the agreed-upon style is crucial in design. Inconsistent design can confuse users as they navigate the application due to variations in style.

I believe that maintaining consistency with the agreed-upon style is crucial in design. Inconsistent design can confuse users as they navigate the application due to variations in style.

I believe that maintaining consistency with the agreed-upon style is crucial in design. Inconsistent design can confuse users as they navigate the application due to variations in style.

Other Projects

Other Projects

Other Projects

Optimizing Catholic Content: A UI/UX Case Study for Articles and Prayers on a Faith-Based Website

BPN PKKI is committed to providing learning resources and a spiritual sanctuary for the Catholic faithful, allowing them to enhance their understanding of divinity and strengthen their faith through contemplation, prayer, and online article readings at a distance.

Optimizing Catholic Content: A UI/UX Case Study for Articles and Prayers on a Faith-Based Website

BPN PKKI is committed to providing learning resources and a spiritual sanctuary for the Catholic faithful, allowing them to enhance their understanding of divinity and strengthen their faith through contemplation, prayer, and online article readings at a distance.