Cryptocurrency is making headlines daily with news statements such as “Bitcoin just hit a new all-time high, Elon Musk is now accepting Bitcoin for cars, or CoinBase just went public on the New York Stock Exchange”. It’s a hot commodity and the latest way to get rich. For years there has been a lot of skepticism around cryptocurrencies. It was originally seen as a way for people to make illegal purchases that cannot be traced. It is now seen as an asset and investment - a way for your money to make you more money.
With this positive reputation comes a whole new set of investors, and clients that are new to trading cryptocurrencies. Customers that are looking for the best platform to entrust their money with. A service that has a clean and simple interface, and that makes transfers easy. A platform that displays key statistics in a simple and scannable manner. The ideal balance is a design that gives the experienced trader all the information they need but showcases it in a way that a beginner trader can understand, all wrapped up it in a clean, and non-intimidating package.
The primary function is plainly and simply to trade cryptocurrency. The entire purpose of CoinSquare is to buy and sell cryptocurrency and therefore the application must do this one thing exceptionally well. As part of the day-to-day user journey CoinSquare must provide a simple yet effective way to manage cryptocurrency.
CoinSquare very clearly displays currencies. When the main purpose of the product or service is buying and selling it is important to make your potential customer well aware of what is being offered. CoinSquare includes a Markets tab which clearly displays all the coin options available for buying and trading.
When looking to buy a specific coin there is a low chance that the potential client wants to scroll through dozens of coins. Something as simple as adding a search bar creates more than one path for the customer to follow. It also allows the user to navigate the site quickly when they already know what they are looking for.
The application provides the customer a chart of the coin but also has the functionality to change the date range on the chart to see if the coin is on an upward trend or downward trend. The important part of this screen is how prevalent the Buy and Sell button is, making it very easy to complete a transaction instantly if the customer choses.
Only a few items were missing from this page. Potential customers may be curious to see 52-week highs and lows in order to get a better feel of the trends prior to buying in. Also moving buttons from the left side of the screen to the right provides better accessibility for most clients.
The current application layout allows for the potential client to look for and exchange foreign and domestic currencies for cryptocurrencies. The important part within this screen is the display feature of the currency being sold and the currency being bought.
A lot of traders and potential customers will use graphs and trends to determine purchases so it makes sense that the trade screen is easily accessible from the market information screen. Once the currency the client is buying is locked in, they have the option of selecting what currency they want to sell in order to buy the cryptocurrency. A simple drop-down displays the client’s top 5 most traded coins as well as a search bar that allows them to quickly find the currency that is not displayed. One thing that CoinSquare was missing was a simple way to flip the input value. When trading, some people want to select the currency value and while others may want to choose coin number.
The current CoinSquare offers a way for the customer to see the value of their account and display the status of their coins and currencies. It’s very plainly displayed, so that even as a new client you can tell what this page is for and how their investments are doing. It even includes the value fluctuation over the last 24-hours.
The main goal of this entire redesign is to make it more friendly for the potential client that is new to cryptocurrency. The more adoption of cryptocurrency there is, the greater the opportunity for advancements in technology and transaction speed. Going with a lighter feel was key in the redesign. The second major implementation was the currency symbols. This is important when dealing with coins because coins are counted one to the total number of coins that will ever be issued. If you are displaying account value you need to have it displayed as a monetary value to not confuse the client. It’s also common in trading to move more money into your account because prices change quickly and buying low is important for cycles. The inclusion of the Add Funds button is key in helping customers not miss buy-in points.
To allow for the main function of CoinSquare to work there must be secondary functionality. The potential client needs to be able to fund their account to enable them to buy cryptocurrencies. Once purchases have been made there needs to be a clear, well laid out display of gains and losses. The last important functionality of CoinSquare is the ability to take trading profits and withdraw them to a bank account.
The CoinSquare app provides the ability to transfer funds, through both e-Transfers as well as through Wire Transfers. CoinSquare allows potential clients to fund their accounts with whatever method suits them the best. It also gives the customer significant information about transfer details such as fees and transfer times, as well as maximum and minimum amounts. Having a transparent user flow is important when dealing with finances as people tend to worry when dealing with money. This visibility not only informs the user but also builds their trust.
The primary goal of the redesign was improved accessibility and usability. The majority of phone users operate their phones with only one hand, making all buttons and click points at the top of the screen hard to reach. Moving the e-Transfer and Wire Transfer Call to Action points side-by-side at the bottom of the screen resolves this issue.
The implementation of a search-based dropped-down was added for a faster and easier search of the currency the user wants to fund their account with. Scrolling works if you only have a few options but if there are dozens of currency options you can accidentally scroll past the one you want.
Referring back to accessibility, one of the most important offerings is an easy way out if the customer selects the wrong option. To help with that, the e-Transfer information modal was streamlined to take up less of the page so it does not give the illusion you’ve left the current page.
CoinSquare is a modern financial application and needs a modern way for the user to transfer funds and access their bank accounts. To assist in this within the redesign, a modal has been created to allow the customer to launch their banking application throughout the CoinSquare app. This allows accessibility to e-Transfer information without having to reenter the client’s PIN as they toggle back and forth, therefore eliminating the likelihood of the banking application timing out during the transaction process.
When it comes to buying and selling cryptocurrency it is important to monitor trends, avoid buying when the coin is on the rise and make the investments that work for you. The current CoinSquare application allows for a client to see the 24-hour highs and lows and change the graph to showcase a customized timeline.
The redesign modernized the home screen and positions pages allowing the customer to see the coins they have a stake in, as well as how their investments are performing over a short period. When a client selects a particular coin, the app displays a more in-depth overview of that coin. The redesign showcases the coins the client is holding, as well as the value and percentage of their portfolio occupied by that coin. Some other key features included the total return that the client has made on particular coin and the activity. This allows visibility to the history of what was purchased, what was spent and the gains and losses.
Like the client flow for funding an account, the withdrawal funds have additional options to extract funds. However, the options for withdrawing funds are slightly different. The system now allows the user to wire funds as well as perform direct withdrawals from their account. The client continues to be informed of fees, waiting times and their maximum and minimum withdrawal amounts.
To make the client’s life easier when withdrawing funds, the redesign included a list view of the currencies the client has available to withdraw since only foreign and domestic currencies can be withdrawn. Above the list, a search bar has been included that holds multiple foreign currencies. The withdrawal method has been moved to the bottom and made into a Call-to-Action button. This button allows for accessibility and ease while using a phone with one hand.
Just as was done with all the funding account modals; the redesigned withdrawal pages clarify that the user is still on the same page. The Next and Cancel buttons are also more visible and easily accessible.
The application features a proprietary keypad for the PIN that secures the application. Consistency and standards are extremely important in keeping the client’s experience uniform. Uniformity is important in an application because when the client is familiar with the usability it eliminates the need for additional searching. The redesign features this keypad throughout the interface. The withdrawal interface also has a drop-down that allows the customer to select which account they would like the funds added too, while also showing them the amount of currency available to be withdrawn. This functionality ensures accurate information and reduces the possibility of errors.
The login screens may not be crucial to the functionality of the application but it is the first thing a new client will see. It needs to show the new client what the brand represents and let them know what to expect once they are fully in the application.
The important changes here were increasing the PIN dots to make them easier to see. This helps the client differentiate between empty and full states. Mistakes can always happen so it’s beneficial to give the customer a way fix errors. Adding a Back button to the PIN pad allows the user to correct their PIN if they enter the wrong number by accident. Allowing a client to easily identify where to gain access to their account is critical which is why the text colors have been inverted on the Sign In button. This provides the user clear direction of where to click. The overall redesign was focused on ensuring the client experience is streamlined and cohesive throughout their entire experience.
