Project: Case Study - New Feature
Project: Case Study - New Feature
Project: Case Study - New Feature
Role: UX/UI Designer
Role: UX/UI Designer
Role: UX/UI Designer
Tools: Figma
Tools: Figma
Tools: Figma
Time: 60 hours/1 month
Time: 60 hours/1 month
Time: 60 hours/1 month
Summary
Summary
Bisq is a peer-to-peer Bitcoin exchange network that enables private and censorship-resistant trade of Bitcoin for national currencies and other cryptocurrencies over a decentralized network.
Bisq is a peer-to-peer Bitcoin exchange network that enables private and censorship-resistant trade of Bitcoin for national currencies and other cryptocurrencies over a decentralized network.
Bisq is a peer-to-peer Bitcoin exchange network that enables private and censorship-resistant trade of Bitcoin for national currencies and other cryptocurrencies over a decentralized network.
Problem
Problem
Problem
Tracking the weighted average cost of Bitcoin is challenging for many users that dollar-cost average. Since each buy occurs at different price points, calculating a single price that accurately reflects the average cost of all their coins is difficult.
Tracking the weighted average cost of Bitcoin is challenging for many users that dollar-cost average. Since each buy occurs at different price points, calculating a single price that accurately reflects the average cost of all their coins is difficult.
Tracking the weighted average cost of Bitcoin is challenging for many users that dollar-cost average. Since each buy occurs at different price points, calculating a single price that accurately reflects the average cost of all their coins is difficult.
Solution
Solution
Solution
With all the required data already present in Bisq, this new feature aims to display a visually effective dashboard & table showing a user’s Weighted Average Cost. This feature will not only bring great insight into existing users' portfolios.
With all the required data already present in Bisq, this new feature aims to display a visually effective dashboard & table showing a user’s Weighted Average Cost. This feature will not only bring great insight into existing users' portfolios.
With all the required data already present in Bisq, this new feature aims to display a visually effective dashboard & table showing a user’s Weighted Average Cost. This feature will not only bring great insight into existing users' portfolios.
Sketches
Early design ideation phase began with structuring the existing Bisq elements such as navigation bars, and footer information consistently present on each screen. Then by experimenting with a card dashboard combined with a table view.
Features
The 3-card dashboard is the crown jewel of this new feature (1). Displaying total WAC, Fiat Spent, and Bitcoin; users can instantly evaluate their performance by these 3 metrics. The price dropdown and wallet corner (2) is identical to current version Bisq, except the new addition of the global Show in Satoshi toggle. Finally, the Transaction table (3) copies the same typography and color scheme from Bisq’s existing elements as closely as possible to display their editable data feed.
The 3-card dashboard is the crown jewel of this new feature (1). Displaying total WAC, Fiat Spent, and Bitcoin; users can instantly evaluate their performance by these 3 metrics. The price dropdown and wallet corner (2) is identical to current version Bisq, except the new addition of the global Show in Satoshi toggle. Finally, the Transaction table (3) copies the same typography and color scheme from Bisq’s existing elements as closely as possible to display their editable data feed.
1
Navigation & Dashboard
Navigation &
Dashboard
The unique 3-card dashboard displays Bitcoin performance metrics no other platform offers.
The unique 3-card dashboard displays Bitcoin performance metrics no other platform offers.
The unique 3-card dashboard displays Bitcoin performance metrics no other platform offers.
Existing top-level and sub-level navigations of Bisq. The Weighted Average Cost (WAC) tab with the green underline indicates current screen
Existing top-level and sub-level navigations of Bisq. The Weighted Average Cost (WAC) tab with the green underline indicates current screen
Existing top-level and sub-level navigations of Bisq. The Weighted Average Cost (WAC) tab with the green underline indicates current screen
The numbers adjust based on time time window selected, which gives more specific insights into performance during certain periods
The numbers adjust based on time time window selected, which gives more specific insights into performance during certain periods
The numbers adjust based on time time window selected, which gives more specific insights into performance during certain periods
2
Price & Wallet
Price & Wallet
Bitcoin prices against various global currencies available to pick from a dropdown bar
Bitcoin prices against various global currencies available to pick from a dropdown bar
Bitcoin prices against various global currencies available to pick from a dropdown bar
Local wallet information, showing status of Reserved and Locked funds that are used during a trade
Local wallet information, showing status of Reserved and Locked funds that are used during a trade
Local wallet information, showing status of Reserved and Locked funds that are used during a trade
3
Transaction Table
Identical to Bisq’s current layout, with the new additional of a universal Satoshi switch.
Identical to Bisq’s current layout, with the new additional of a universal Satoshi switch.
Identical to Bisq’s current layout, with the new additional of a universal Satoshi switch.
On the top right lies the standard Filter bar, along with a button to enable Edit mode, and a toggle that will only display Bisq transactions when switched.
On the top right lies the standard Filter bar, along with a button to enable Edit mode, and a toggle that will only display Bisq transactions when switched.
On the top right lies the standard Filter bar, along with a button to enable Edit mode, and a toggle that will only display Bisq transactions when switched.
Export and Import buttons lie at the bottom right, giving users another dimension of interactivity with their data
Export and Import buttons lie at the bottom right, giving users another dimension of interactivity with their data
Export and Import buttons lie at the bottom right, giving users another dimension of interactivity with their data
Process
Discover
User Research
Competitive Analysis
User Interview
Define
Problem Statement
Persona
Ideate
User Flow
Brainstorming
Sketching
Design
Wireframe
Hi-Fi
Prototype
Discover
Competitive Analysis
www.kycnot.me - Top exchanges
There are +25 known KYC-free exchanges that offer varying degrees of privacy for crypto users to buy and sell their coins. Attributes such as the service being under a free-software license, having a non-custodial wallet, and not needing to register make them more appealing for the privacy-focused users.
There are +25 known KYC-free exchanges that offer varying degrees of privacy for crypto users to buy and sell their coins. Attributes such as the service being under a free-software license, having a non-custodial wallet, and not needing to register make them more appealing for the privacy-focused users.
There are +25 known KYC-free exchanges that offer varying degrees of privacy for crypto users to buy and sell their coins. Attributes such as the service being under a free-software license, having a non-custodial wallet, and not needing to register make them more appealing for the privacy-focused users.
CoinLedger
www.coinledger.io - Import account from an exchange
CoinLedger is one of the leading cryptocurrency tax accounting providers. It has robust tools to import trading info from most of the popular KYC exchanges, which then can be used to display a users weighted average cost. However, most products don’t have this kind of feature, meaning it could give Bisq a competitive advantage.
CoinLedger is one of the leading cryptocurrency tax accounting providers. It has robust tools to import trading info from most of the popular KYC exchanges, which then can be used to display a users weighted average cost. However, most products don’t have this kind of feature, meaning it could give Bisq a competitive advantage.
CoinLedger is one of the leading cryptocurrency tax accounting providers. It has robust tools to import trading info from most of the popular KYC exchanges, which then can be used to display a users weighted average cost. However, most products don’t have this kind of feature, meaning it could give Bisq a competitive advantage.
CoinLedger - Import Options
Will KYC User
Will KYC User
Dooesn't support
Non-KYC exchanges
Dooesn't support
Non-KYC exchanges
Cumbersome user experience.
Details shown below
Cumbersome
user experience.
Details shown below
Even though the Manual Input option will also KYC users, it’s the only method privacy centric Bitcoin (and other cryptocurrency) users can look to automatically check their portfolio performance. Manually entering this information is unintuitive for numerous reasons.
Even though the Manual Input option will also KYC users, it’s the only method privacy centric Bitcoin (and other cryptocurrency) users can look to automatically check their portfolio performance. Manually entering this information is unintuitive for numerous reasons.
Even though the Manual Input option will also KYC users, it’s the only method privacy centric Bitcoin (and other cryptocurrency) users can look to automatically check their portfolio performance. Manually entering this information is unintuitive for numerous reasons.
The Classification of transactions list has over 20 types, some with similar or confusing names which can leave users lost
The Classification of transactions list has over 20 types, some with similar or confusing names which can leave users lost
The Classification of transactions list has over 20 types, some with similar or confusing names which can leave users lost
Sent and Received columns is a slower and confusing method of entering information such as how much USD was payed for an amount of Bitcoin
Sent and Received columns is a slower and confusing method of entering information such as how much USD was payed for an amount of Bitcoin
Sent and Received columns is a slower and confusing method of entering information such as how much USD was payed for an amount of Bitcoin
The dropdowns for each boasts a large amount of cryptocurrencies which doesn’t load instantly.
The dropdowns for each boasts a large amount of cryptocurrencies which doesn’t load instantly.
The dropdowns for each boasts a large amount of cryptocurrencies which doesn’t load instantly.
Research
User interviews were conducted conducted to Bitcoin users who have either used or looked up what Bisq is. This allowed collecting the target user groups thoughts, emotions, and actions.
User interviews were conducted conducted to Bitcoin users who have either used or looked up what Bisq is. This allowed collecting the target user groups thoughts, emotions, and actions.
User interviews were conducted conducted to Bitcoin users who have either used or looked up what Bisq is. This allowed collecting the target user groups thoughts, emotions, and actions.
Themes of privacy, community, and financial freedom emerge as key values from user research. Taking Bisq’s robust peer-to-peer network and adding a new feature to track and measure users’ Bitcoin performance becomes a great value add.
Themes of privacy, community, and financial freedom emerge as key values from user research. Taking Bisq’s robust peer-to-peer network and adding a new feature to track and measure users’ Bitcoin performance becomes a great value add.
Themes of privacy, community, and financial freedom emerge as key values from user research. Taking Bisq’s robust peer-to-peer network and adding a new feature to track and measure users’ Bitcoin performance becomes a great value add.
Privacy
Privacy
Remaining anonymous and KYC-free in the world of regulatory capture
Remaining anonymous and KYC-free in the world of regulatory capture
Community
Community
Supporting and being a part of like minded Bitcoiners to exchange with
Supporting and being a part of like minded Bitcoiners to exchange with
Financial Freedom
Financial Freedom
Measuring portfolio performance to gauge financial objectives
Measuring portfolio performance to gauge financial objectives
DEFINE
Persona - Frank Weller
Frank represents the type of user who is conscious of his data privacy and financial sovereignty, which has lead him to become a Bitcoiner. Frank has been regularly buying KYC-free Bitcoin through various platforms. With high conviction in the asset, he dollar cost averages no matter what. Which means Frank is unsure about the performance of his stack.
Frank represents the type of user who is conscious of his data privacy and financial sovereignty, which has lead him to become a Bitcoiner. Frank has been regularly buying KYC-free Bitcoin through various platforms. With high conviction in the asset, he dollar cost averages no matter what. Which means Frank is unsure about the performance of his stack.
Goals
Centrally track his Bitcoin Transactions
Centrally track his Bitcoin Transactions
Calculate his Bitcoin performance
Calculate his Bitcoin performance
Maintain his privacy
Maintain his privacy
Painpoints
Disparate trading methods means he needs to manually track transactions
Disparate trading methods means he needs to manually track transactions
Unaware of how to calculate his Bitcoin Performance
Unaware of how to calculate his Bitcoin Performance
IDEATE
User Flow
User Friendly Design
User Friendly Design
The Weighted Average Cost screen is designed from the ground up for quickest digestion of information and ease of use.
Export/Import - Gives users the flexibility to bring in their own data into Bisq, or take it with them to a spreadsheet for the power users.
Edit Table - Most basic tabular functions readily available by editing cells and columns as expected on typical spreadsheets.
Reset Data - For when users only want to look at transactions done inside Bisq, as opposed to the ones added from external platforms.
The Weighted Average Cost screen is designed from the ground up for quickest digestion of information and ease of use.
Export/Import - Gives users the flexibility to bring in their own data into Bisq, or take it with them to a spreadsheet for the power users.
Edit Table - Most basic tabular functions readily available by editing cells and columns as expected on typical spreadsheets.
Reset Data - For when users only want to look at transactions done inside Bisq, as opposed to the ones added from external platforms.
The Weighted Average Cost screen is designed from the ground up for quickest digestion of information and ease of use.
Export/Import - Gives users the flexibility to bring in their own data into Bisq, or take it with them to a spreadsheet for the power users.
Edit Table - Most basic tabular functions readily available by editing cells and columns as expected on typical spreadsheets.
Reset Data - For when users only want to look at transactions done inside Bisq, as opposed to the ones added from external platforms.
DESIGN
Wireframes
First sketch: Table view on top with dashboard on the bottom with circle cards.
First sketch: Table view on top with dashboard on the bottom with circle cards.
First sketch: Table view on top with dashboard on the bottom with circle cards.
Table Sketch: Final version with title on top left, Filter, Edit Table, and Bisq Only transaction toggle switch on the right-end. Check boxes appear in Edit Table mode to delete rows.
Table Sketch: Final version with title on top left, Filter, Edit Table, and Bisq Only transaction toggle switch on the right-end. Check boxes appear in Edit Table mode to delete rows.
Table Sketch: Final version with title on top left, Filter, Edit Table, and Bisq Only transaction toggle switch on the right-end. Check boxes appear in Edit Table mode to delete rows.
Sketch to Prototype
Prototype in GIFs
Prototype in GIFs
Filters and Toggles
Filters and Toggles
Editing a Cell
Editing a Cell
Importing Data
Importing Data
User Testing Findings
User Testing Findings
In order to test the concept's usability, I tested the prototype with 4 participants. After the moderated usability test and iterations, Bisq's new WAC feature crossed the finished line. Below are some key lessons learned throughout the lifecycle of this case study.
In order to test the concept's usability, I tested the prototype with 4 participants. After the moderated usability test and iterations, Bisq's new WAC feature crossed the finished line. Below are some key lessons learned throughout the lifecycle of this case study.
UI
All participants agreed the design of the WAC screen seamlessly matched with the rest of Bisq
Placing the 3 dashboard cards on the top of the screen to give a quick overview of the portfolio was received well
All participants agreed the design of the WAC screen seamlessly matched with the rest of Bisq
Placing the 3 dashboard cards on the top of the screen to give a quick overview of the portfolio was received well
UX
Having the Show in Satoshi toggle placed on the top right, and having it globally change units on the entire screen was much more preferred over the previous version where it was only a switch inside the Bitcoin card on the dashboard.
Bisq only Transactions toggle was favored over the previous version of having a Reset Data button which confused some users
Showing a data format example on the Import CSV screen was an appreciated guide
Conclusion
Conclusion
Although this is a limited prototype, testing it in the field resulted in positive and promising feedback that further validates this case study's potential for future development as a Pull Request to the project on Github.
The full and interactive prototype can be accessed in Figma via the button below:
Although this is a limited prototype, testing it in the field resulted in positive and promising feedback that further validates this case study's potential for future development as a Pull Request to the project on Github.
The full and interactive prototype can be accessed in Figma via the button below:
Although this is a limited prototype, testing it in the field resulted in positive and promising feedback that further validates this case study's potential for future development as a Pull Request to the project on Github.
The full and interactive prototype can be accessed in Figma via the button below: