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
Refining a Design System for ContentGrow
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers.
A UX Success Story: Refining the Calculator Function in OnlyGym App
The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.
Creating a Clean and Clear Experience for Gym Member Management
OnlyGym is a Software as a Service (SaaS) website that provides gym necessities and member data management for gym owners.
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.
Refining a Design System for ContentGrow
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers.
A UX Success Story: Refining the Calculator Function in OnlyGym App
The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.
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.
Refining a Design System for ContentGrow
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers.
A UX Success Story: Refining the Calculator Function in OnlyGym App
The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.
Creating a Clean and Clear Experience for Gym Member Management
OnlyGym is a Software as a Service (SaaS) website that provides gym necessities and member data management for gym owners.
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.