Presenting the Abracadabra Money UX/UI Update

Feedback Website / UI
1

Hi all!

We are really excited to be able to present to you and collect feedback for the new UX/UI of Abracadabra.Money.

Abracadabra started off by solely tailoring towards the degens in the DeFi space, due to this our UX and UI was Pixel art based, and wasn’t the friendliest of UIs. We believe this was the right move, as it did attract the crowd that we needed to kickoff the journey of Abra. Crypto overall is now very slowly starting to move in a direction where more of the average person is using crypto. We are still at the extremely early days of this but non the less, we believe it is time for us to change our frontend to be more friendly, trustworthy and easier to use.

This is why we are presenting you with this Figma Prototype, click here.

Please click through it, act like its a real website, and drop your feedback. Bear in mind, two things. Firstly, this is just a prototype, not an actual website, you will be able to do some interactions, but some buttons will do nothing. Its main utility is to give you a general idea of what the UI/UX will be! Secondly, as you are an active user of this forum, you are likely already used to Abracadabra, also think about the user that has never used Abra before. There after drop your comments in here, we will be reviewing them, taking all feedback into consideration for building the actual UX/UI.

This is the beauty of crypto, where the team and the community can really work together!

If you wanna know more about it do not hesitate to come and chat on our Discord!

Thanks!

5 Likes
2

The new Abracadabra, I LVOE IT! even if I’ll miss the old one

1 Like
3

Looks great! One nice to have (especially during turbulent price action) would be to include either the position health percentage or liquidation price vs current price visible in the Positions tab. Perhaps just below the “safe” tag. To be more specific I mean add this info to the position cards in the “Choose Position” section of the Positions tab.

2 Likes
4
  1. The new look IMO feels very defi generic and removes all of the vibe that the original site has. This leaves it feeling very bland with no personality.
  2. When borrowing the page is missing information about the position health which I believe is a nice feature of the original. I like the ability to borrow 25%, 50% etc and then have an overall understanding of the risk of the position.
  3. I think the move to split out leverage from borrowing is a good idea - countless people on the discord were always confused by the borrow product with leverage and why they never received any MIM in their account
  4. Given farming is a two step process (approve tx, then stake) I believe this two step process should be represented in the UI, like borrowing is.
6 Likes
5

One thing I enjoy is the ability to select the chain on the farming tab. Agree with others re feedback related to position health

2 Likes
6

This new presentation looks like very nice.

7

Looks clean for a defi application. Some magical references wouldnt go a miss. Be good to see how this transitions into a portrait layout

8

Interface looks cool. Art direction could use some more magic and color even if white vs all grey. Keep the brand on point. The idea is to want people to be excited to spend time on your site. I personally like to feel like I am a part of a brand or community not just a mechanism. Gotta make it feel like it is a portal to an entire universe. That’s what got Abracadabra this far. All grey everything looses me fast but the layout and functionality is great.

1 Like
9

Seems like it gave up a lot of its fun aspects to be more sterile, but didn’t really push far enough to give it a very professional feel. So its stuck in the middle of what it’s trying to do. It honestly looks like a knock off of solidly which I’m not really a fan of either. If you’re wanting this to be more welcoming to new users then there needs to be an easier way of making sense of the inputs and numbers. Places like the APR for staking its just slapped at the bottom, and not even aligned properly.

I think that there should be another pass at this with breakdowns of use cases, flows, wireframing, and mobile design in mind.

2 Likes
10

I don’t see how any of this is an upgrade over the current version:

  1. The visuals: the current site has its own look and feel that sets it apart from other defi sites. The new version is as bland and generic as it gets.
  2. Why has stake been sent to tools?
  3. The old site at least had an introduction story, however…vague and ultimately impractical. The new version has just the emptiest index page.

Independently of the new version, general improvements to the current version:

  • The homepage should actually explain what you can or can’t do with abra, in simple terms, ie:
    a) stake - get spell, stake it, earn x % of spell every x days
    b) borrow or leverage… explain the difference
    c) provide liquidity…
  • An explanatory paragraph or more tooltips in each section would go a long way towards helping users understand how each section goes. If you have to send them to gitbook to explain anything, that’s a big usability fail.
  • A good example is the staking page, many users can’t find out how to unstake their spell lest they think of clicking on the directional arrows. Having easy button tabs, say: stake/unstake takes out the guesswork. The info is so little that you might not even need tabs, could have two windows side by side so people can see their current spell holding without having to simulate an unstake.
  • adding sspell to suggested tokens
  • filters for farms, like hiding inactive farms
    *a very important point, adding a roadmap section, where you actually explain what’s what with the project: active proposals, recently approved proposals…the whole treasury update…

As it stands, the most worrying thing is the emptiness of /farm, followed by 2 out of the 3 ‘perform a ritual spell’ sections showing 0% roi anually, and yes, the lack of a solid communication effort to explain things such as:
Why was the approach to the sifu subject so nonchalant?
One day tetra is advertised as the big brother of the project, the next he is dumping all his spell.
It gives…a feeling of abandonment to the project.

/end of rant

1 Like
11

Being fairly new to crypto, I would assume that mass adoption is an important goal for everyone involved. The more money through the system, the more everybody shares in the profits. (The entire point of decentralized finance, I think).

Detailed explanations of exactly how to use these products seem to be missing from much of the defi world and its web interfaces. The only place to really understand how all this works, it seems to me, is to watch random youtube videos created by people who have no connection to the platforms themselves. These are typically poorly made and skip over important step-by-step aspects of the process. Sure I can read a short snippet on how to create some MIM and then buy a car with it, but to be honest, I’m over 40 and that doesn’t make sense to me. But you all still want my money in this project, right?

I would recommend and would very much appreciate links to videos that are professionally produced by abracadabra.money which walks a prospective user through the steps of using each aspect of the products you are offering here.

There is a wide-open opportunity to communicate/educate a huge swath of the general public, with discretionary income, who I believe would be very eager to get involved in a crypto platform that showed them exactly the whys/hows/benefits of getting involved.

1 Like
12

The UI is fine.

But there are far more pressing things to be working on IMO.

  1. Decentralize rewards claiming for UST Degenbox.

  2. Earned APY is not an accurate number.

  3. Keep retained UST available for withdrawal at agreed upon 10%.

That’s it, that’s all I care about. Thanks to the team for the hard work.

13

No one gives a F who is an investor or not. You can make your own decisions with your money and not follow someone like a sheep. We all have a brain to think with.

2 Likes
14

It looks clean, simple and has a familiar interface to DEX’s etc. The MIM logo does stand out a little, having kept it’s pixilated look. Can the “Stats” page be integrated into the Collateral Assets drop down menu as well - being able to see at a glance how much is available/how much one can borrow per asset in the wallet? Or maybe that can be a Check Box/Filter on the stats page, showing only what is in your wallet and how much can be borrowed? Having both Borrow and Leverage separate is less confusing for someone new and makes it clear by having to choose what the borrowing is for. Could the farms page also have the option to deposit the liquidity pair? I envision a farm where if you don’t have the LP tokens from wherever, you could chose to deposit them at the farm, and through contracts, get the pair deposited, and then LP tokens put into the farm with one click. Maybe depositing the LP pair could be a different page, like under tools? If that’s overly complicated then a link to the Add LP page for whatever DEX, with the correct assets selected would be quite helpful.

With new users in mind, a “Start Here” or “How This Works” type of option should be on the top. Possibly a tooltip (or several) per page describing various things. Linking to the docs is well and good, but having a walkthrough or tutorial (and possible links to good videos that go into more depth) would be very valuable for newcomers. Most games come with a walkthrough on the rules and how to play, so if one is new to borrowing/leverage/farming etc, clear definitions and how/why they work may go a long way to make people feel confident and want to use the platform. Simplifying, or changing some terms could be beneficial for easier understanding. We all know what farming is, but if you called it “Earn” (Anchor and Coinbase use this term, albeit for different methods of “earning”), one would know immediately what that page was.

Any chance for leveraging one could get a alert somehow when the health of the loan reaches xx%? Or an auto leverage position where you you can deposit collateral and the algo/contract makes sure you don’t get liquidated while leveraging (thinking like NEXUS does to Anchor)

15

It is nice, professional but…it misses something. It is a bit bland. I miss colour (that degradated blue is very nice but scarce) and details.

Good points

  • Separate borrow from leverage
  • Chain selector in each tab
  • Simplicity remains as in the original Abracadabra

Bad points

  • Everything is just…too grey?
  • The APR in the farms miss the “%” at the end. Nothing big but you feel something is missing.
  • Leverage could be explained deeper
1 Like
16

Guys please rethink removing the Abra brand identity. It’s a big deal. I get the impulse to make the site more user friendly but it’s possible to do that without shifting Abra’s visual tone/identity. I know you’re under fire rn so I don’t want to seem negative, but the new site looks like an off-the-shelf Wordpress theme. No disrespect, but it’s clear that whoever is designing it is a dev first and a designer second. And it seems that no one is focused on brand identity.

Playfulness is core to what got Abra this far. It was/is oppositional. Look at Curve’s UI. Imagine them suddenly shifting to a site that has no personality. That would feel totally wrong. This shift you’re proposing is equally wrong.

It seems like you are so far down the road that comments like this are just pissing in the wind (I hear the site is “95% done”), but for real, don’t lose sight of the forest because of the trees.

If Abra doesn’t have its fun and “fuck you” identity then it’s just another complicated defi protocol. New people buy a personality first, and then they get their head around the protocol. They bought into Dani who was the personification of the fun and oppositional brand. Without Dani doing that heavy lifting and without any fun visual identity, there’s nothing for people to ascribe to.

People aren’t buying into a protocol, they’re buying into something much bigger - an identity/personality/movement they can align with and get behind. By all means make the UX better, but please reconsider abandoning Abra’s personality.

2 Likes
17

It’s needed that It can allow people to conect their wallet by another networks beyond Ethereum , where the fees are pretty expensive!! Please, do It. I don’t borrow because these ones.

18

Still could benefit from another level of abstraction to appeal to the majority of users who do not need all the detail:

  1. On stats page, remove liquidation fee since it is already priced into liquidation price
  2. only show tokens that have collateral available in borrow page
  3. Sliding scale for deposit (i.e., button to hit 50% of balance)

I really like the leverage function. Abra is an intermediary for additional strategies on other platforms. Could be interesting to partner/ build those strategies into the platform (i.e., I want additional exposure to eth vs. deposit, borrow, buy with the buying occurring somewhere else). However, I think it could be even simpler by removing any jargon and focusing on the intent (i.e., buying additional exposure to eth, avax, etc.) why teaching downside protection.

19

UI/UX is fine, not a huge departure. But the branding is very weak imo. Old landing page had a lot of character, this one feels very Web2 to me.

2 Likes
20

First thing to point out is that It’s difficult to judge the new site by simply asking if its better for “mainstream users”…better at what? Lay out the pain-points you see now and how you know they are pain points.

My only gripe with the current UI is that very few user actions are automated, if I have the components of a curve LP but I don’t have the LP tokens, I have to first go to curve and get the LP token. Automating this step for the user is what the non crypto native wants. Some things are already automated (curve LP token to cvx curve LP token for example) but why stop there? Why not be able to enter the cvx (or yearn position) if I already have the basic components of the position without going to curve (or yearn) at all?!

Convenience driven automation is the UX that the site is missing. The thing holding Defi back from mainstream is that Cefi products are just simpler to use…you give them your money, they do the rest, Abra should be no different. You’d never invest in an ETF that makes you buy assets in proportion then send them to the ETF manager so why does abra have that expectation of their users?

The menu bar at top has been made more complex with more options (even some that are the same function!!) …The protocol is simple, you put up collateral, you borrow, you farm, you stake, you vote. Why present more options than this in the most general menu? current menu bar is better than the prototype. The exception is the blockchain selection menu moving it from the main menu bar does well to ensure the app feels consistent no matter what chain your are on or positions you are using, it does well in unifying the UX for different chains and create an experience where everything you need to do to participate in the protocol can be done from the site.

The “positions” page replacing the dashboard page is a step back imo, clicking on your wallet ID is the more intuitive way of seeing the money you’ve got in the protocol and it doesn’t clutter the menu bar. In general creating a more complex menu bar is not best for any users.

In all honesty, the new front end screams low effort, it’s not as polished as the current site and lacks the implicit understanding of the protocol that the current artwork gives off to all users. If we are going to get rid of the marketing and artwork why don’t we just turn into a loan as a service protocol where other front ends can adopt the backend protocol and loan products and wrap the in their own UI.

TLDR; Focus on actual UI/UX instead of artwork or marketing changes. Automation is an actual element of the user experience that can be improved - make the protocol low effort by means of automation with Zap like functionality, thats what actually makes or breaks things (in terms of convenience) for new users. Art and marketing is the one thing that abra does better than most. Going for the “defi generic” low effort look is a giant risk to expansion of the user base IMO.

KISS: Keep It Simple Stupid.

The required information is there, change the way information is organized and presented (typographic changes like font size/spacing, proper font weight for its intended purpose, etc…) and the effort required of the user to use the products as a non-blockchain native user. The brand is strong, don’t kill it because you don’t have a marketing team or branding experience. As a random do you know what DAI is? No, but chances are you have a better idea what ‘magic internet money’ is when you hear the name. That identity is something many protocols would kill for as defi goes mainstream in the coming years.