Redesign + Critique

MeanFi

Screen: Asset Balances

User Goals: Quickly view their balances, recent transactions & explore other parts of the app.

Untitled

Issues:

  1. It's hard to know what the total portfolio is worth
  2. Cannot figure out how much the portfolio grew or lost.
  3. No breakdown of what the portfolio consists of.
  4. Fonts are too small & illegible.
  5. Too much data & tables + fewer visuals.
  6. Navigation isn't future-proof + lacks context.
  7. Nothing is prioritized here in terms of CTA, so users will have to think and find things to do on their own.
  8. Transactions aren't sortable.
  9. Lack of visual hierarchy in the balance breakdowns. Making it appear disorganized and misaligned.
  10. The red color is too bright + almost hurts the eye or seems like an error color.
  11. Panels don't follow a grid + logos + borders are generally misaligned. Too much whitespace that's wasted.

In short, the visual clutter on this page is high and it's hard to derive any meaning from this by simply glancing at it. One has to figure too many things out to

Untitled

Solutions.

  1. Added a total net-worth section + a graph that represents how it's doing overtime + % change over time. The layman prefers USD as the default currency but we can keep this to SOL or whichever else.
  2. Added a pie breakdown showing the top 5 holdings and their %. The color of this can be matched from the logo or simply the default colors can be used.
  3. Used a clean font called Inter and several font weights to prioritize and deprioritize information.
  4. Side Navigation with icons to give more context + many more items can be added here without being hidden in menus. Top menu space can be used for other items.
  5. Reduced unnecessary borders and spaces. Added a balanced arrangement + UI patterns that repeat all across giving it a sense of consistency + familiarity
  6. Used green arrows and % to indicate a net change in one's portfolio
  7. Added more context to transactions by writing Sent/Received + made them sortable.
  8. Overall picked a milder red that is less loud to look at. Arranged the items in the logo to look more coherent and similar heights

Screen: Exchange

User Goals: Quickly swap between 2 tokens, know balance before swapping. Preview the final conversion before making a decision.

Untitled

Issues:

  1. The one-time vs repeating exchange is hidden in the dropdown many users won't discover it. Plus it takes two clicks to go back and forth.
  2. Too many borders.
  3. Similar issues as Screen 1.

Untitled

Solutions:

  1. Added tabs for 1-click switching between recurring and one-time transfers. No confusion as the high-level context will be set.
  2. In previous, the dropdown grouping didn't make sense as one time was grouped with other options. More options = more confusions.
  3. The first choice a user needs to make can be simply reduced to 2 options, one time or recurring then they can decide if recurring how often.
  4. UI fixes of making it more open and legible.
  5. Similar fixes as screen 1.

Screen Transfers:

User Goals: Transfer crypto between two accounts, set up recurring payments, add funds.

Untitled

Issues:

  1. Visually overwhelming and the amount of decisions to be made per line is high.
  2. The part about adding funds is super confusing and often feels like a repeat step due to the one above.
  3. Several inconsistencies that were were mentioned earlier.

Solutions

  1. Broken the process into 2 steps instead of 1.
  2. The first step is to add the information about the recipient & the second step is to add funds to support these recurring transactions.
  3. Added a final confirmation screen to indicate if this was a success or not.
  4. The second step acts as an intermediary. A lot of the times people make mistakes and aren't sure of what they want to do. This acts as a confirmation screen and makes it error friends in case people want to change their minds.

Untitled

Untitled

Untitled

Screen Payroll

User Goals: Setup and manage payrolls, add new payroll, view existing ones.

Untitled

Issues:

  1. Same as above

Untitled

Solutions / Suggestion:

  1. Needs CRUD functionality ( create, rename, update, delete) that's common in typical SaaS apps.
  2. Added panels to view existing ongoing payments and visualize them
  3. Added transactions that are in context to payroll so one doesn't have to go back to the main screen
  4. Added analytics section to get a general sense of how much money is being spent per month.
  5. Overall tools like payroll need more management features than just creation,