How Nigeria's BuyCoins Can Solve Their UI/UX Problems #YouAreWelcome

Sometime in February 2021, the Central Bank of Nigeria (CBN) released a memo and this time, the target of their famous memos was the cryptocurrency exchange in Nigeria i.e. buying, selling and depositing funds to and from cryptocurrency apps into Nigerian bank account became prohibited.

This caused an uproar with the Nigerian youth especially the people in the Nigerian tech ecosystem because of the uncertainty of what this ban means for startups in the crypto space.

BuyCoins is a Nigerian tech startup that functions as an exchange and allows users trade cryptocurrency. It is probably the biggest crypto platform especially in West Africa in terms of trade volume, however, I have heard comments such as

“The app is terrible but it gets the job done”,

so many times that I had to experience it for myself. For a long time, BuyCoins was the only company in the crypto space, thus, they enjoyed first mover advantage and people used the platform despite its flaws.

In recent times, more crypto exchanges such as Patricia have popped up in the market and these flaws in the user experience and user interface may then become the attributes that determine further adoption of the BuyCoins product which is bad news for both the business and product lifecycles.

On this note, I have analyzed the UI/UX of the BuyCoins signup process as a first-time user on two mobile devices — iPad and an iPhone- in order to really gauge the depth of the issues. I have grouped the images into batches based on page in order to avoid having a ridiculously long article (oops!). Thus, the issues I found are listed in subsequent paragraphs.

DISCLAIMER: I’m sure some hard work has gone into this product but this article is not trying to put down the product or the team behind it. Rather, the aim of this is to highlight some areas that could be worked on to make the user experience (and possibly the user interface as well) better even by a fraction.

1. BUT, I WANT TO SIGNUP WITH GOOGLE:

Lack of alternative options of for sign up and login options such as phone number, Facebook, Apple, Google. I can’t help but see this as a disadvantage in terms of time, potential loss of useful user data that can be used to enhance the user experience , more security, current industry trends and so on.

2. OOPS! I TYPED MY EMAIL WRONG:

The next step is to confirm email but I can’t go back if I made a mistake while inputting my email address.

Signing up on the BuyCoins app using an iPad

3. PRIORITIES, PRIORITIES:

At this point, if I accurately typed in my email and wish to sign in, that should be a major action as opposed to resending the confirmation email. Therefore, the ‘SIGN IN’ button should be more prominent button than the resend email button. Besides, why is the sign in button as an alternative still present even when I’m signing in?

4. I’M NEW AND CLUELESS, WHERE’S THE ONBOARDING?

For a product which is not widely used or trusted by the majority of the population (I’m referring to crypto exchanges in general), it is important to enlighten new users on how the product works or even what it does. The easiest way to do this is by having onboarding pages which are unfortunately absent. Please, fix this.

5. DASHBOARD IN DISARRAY (a):

I successfully login and the main page is the dashboard which is standard procedure. However, on observing the dashboard, I notice the misalignment between the hamburger menu and the page margin. Am I being nitpicky? Who knows? Regardless, it’s worth a mention.

6. DASHBOARD IN DISARRAY (b):

On the dashboard page, there’s a to-do checklist for the user. 

• Firstly, the demarcation lines are of varying thickness and colors but I guess it can be argued that this is not very obvious and should not be an issue. Well, it’s debatable. 
• Secondly, the icons used in the widget are quite obviously different and not uniform. In UI/UX design, uniformity is key especially when it comes to icons. If you use a filled icon, make sure the other icons within that group or preferably across board are actually uniform in terms of shading, thickness, type and size.

7. I SEE A FLOATING BUBBLE:

On the top right hand size, there seems to be a floating bubble with the number two inside it. I suspect that this is a notification bubble but how is a user supposed to know this? There is no bell or notification icon to indicate this. Maybe something that allows people who can’t see properly to recognize that they have notifications? This is important, please fix it.

8. ARE THEY CHIPS OR BUTTONS?:

On scrolling, you see names of BTC peer-to-peer sellers with what seems like tiny chip labels with ‘View’ written on them. I wonder why these “chips” were not given the size of actual buttons with so much space surrounding them. It’s a major action button placed outside the typical user’s scope of view (middle LHS), thus, the least you can do is make the button prominent enough to draw the user’s attention to the fact that they can actually click on it. Some users with eye problems might find this user experience quite challenging to say the least.

9. ICONS NOT IN HARMONY:

Moving further down the dashboard page, you still see instances where there is a lack of uniformity with the icons and it’s even more obvious this time.

10. OOPS! WHAT’S THAT WEIRD BUBBLE?:

I could not help but notice this weird circle which seemed to be hovering on the ‘Buy and sell’ page icon in the widget while I was on the dashboard page. , I clicked on it to see if it would disappear and it never did. I’m not sure what that is or why it’s there but it clearly should not be there at all because it distracts the user from the task that they ought to complete or achieve.

11. I’D LIKE TO GO BACK, PLEASE:

Another thing I noticed when I clicked on every page is that there was no back button to take me back to my previous page which meant that in order to go back to a previous task, I had to go through the user flow from the beginning which was definitely not a great experience.

12. JUST TOO MUCH TEXT:

Some of the pages had an overwhelming amount of text- some of which seemed to be better suited to fit in help bubbles or onboarding pages or pop-up modals. The instructional texts had tiny chip-like buttons that said ‘Dismiss’ which would have definitely been made much better-looking, easier on the eye and easier for the user to comprehend by elevating the experience with a modal or two and eye-catching icons. I did not understand what was expected of me because it was all a lot to digest for a newbie wannabe crypto enthusiast like myself.

13. ERROR MESSAGE:

On selecting a coin to buy on the ‘Buy/sell’ page, an error message came up with no distinguishing qualities between the action button ‘Close’ and the rest of the text. It might have been better if it was sectioned off with a different color or the text was made bold to allow the user easily know that they ought to click on the text to close the pop-up error message/snack bar.

14. USER ACCESSIBILITY AND INCLUSION:

Another UX issue that I noticed was the fact that I had to squint to read text despite my 20:20 vision (I have to brag about it while I still have it.). On a serious note though, the experience could have been enhanced by:

• increasing the letter spacing
• Increasing line spacing
• Keeping font size consistent throughout: In order to highlight a text, you do not necessarily have to increase the font size to a ridiculous degree, it’s possible to achieve it by playing with font boldness and/or variations in font color and it still gives the illusion of variety and distinguishability.

15. CONFUSION ALERT, DEACTIVATE TEXT, PLEASE:

Finally, on clicking on the deposit button, it navigates to the next page which has a default amount of 500 with the Naira sign on the extreme right hand side which is quite abnormal for the user because the currency sign should almost always be on the left hand side. Putting the currency sign on the RHS draws the user’s eye away from the left hand side of the page which it should be on by default and takes it to the opposite end without anything tangible to hold the attention — this is an abnormal situation.

Secondly, this looks like an active text which could mislead the user, however, on deleting the number 500, the default inactive text was revealed. Bug or not, this clearly needs to be fixed.

Also published here