Grin++ v0.2.0 (Android) available now!

Here are a few pointers on general UX, or on how to use the design elements to provide user with information.I havn’t figured out how to do the transactions yet, but I think the mockup from the other thread going in the right direction.

Before I start elaborating on the mockups I’d like to say that the most important thing regarding UX is that the application works.Rn it’s crashing a lot (Android/MacOS/Linux). I don’t know why that happens, but it’s really bad for the UX. It’s just frustrating for users if things don’t work as intended. You can have the best design in the world, but if the app doesn’t work, it does more harm than good to the whole project.

Ok, enough ranting. Let’s start. :sweat_smile:

1. The loading screen

  • You can educate the users in the loading screen. Add important facts, and the workings of the UX(with screenshots) to it. The user will then have the opportunity to learn about Grin and the application while synching. You can add dozens of those. Maybe the community can work on these.
  • The loading % should be general, and not task-specific. It’s important that the user knows how long it will take, and how far he has progressed. I’ve added an estimated time to help solve this issue.

2. Login

  • This is more on the button states. Primary (filled bg), Secondary (outline), Buttons with a yellow background will be “green” buttons. It’s the success-color.

3. The wallet

  • I moved the important navigation-elements from top to bottom. It’s hard to reach navigation elements on top of the screen.
    – Additionally I moved the wallet-specific elements to the top, next to the wallet name. Network, QR, Copy.

  • See how I used colors, typography and icons to provide the user with information.
    – A pending transaction has a grey font.
    – Incoming transactions are bolder than outgoing transactions. Same goes for wallet states. unconfirmed in my example. The rule of thumb here is: negative = thin, positive = bold.
    – To-Do’s, or unfinalized transactions have an outline, they are not filled yet.
    – I have used icons to vizualize the texts whenever it was possible.

  • When clicking on a To-Do, you can lead the user to a separate screen where he can finalize or cancel his tx. I also described what needs to be done.

  • And I removed the logo from the top left corner. Meanwhile people should know that they are using grin++.

Ok, that’s it for now. I know it’s still far from perfect, and that things can be further improved. But it’s more about the underlying principles, and about how to approach UX/UI.

I hope I could help to better understand all this, and provide you with some ideas to improve your app. :ok_hand: