search

RoboSats / robosats

A simple and private bitcoin exchange
https://learn.robosats.com
GNU Affero General Public License v3.0
677 stars 134 forks source link

Improve UserGenPage / LandingPage #204

Closed Reckless-Satoshi closed 1 year ago

Reckless-Satoshi commented 1 year ago

RoboSats is simple, there is only 4 views: UserPage (aka LandingPage), MakerPage, OrderBook and OrderPage. The UserPage recently got a review and critic by the guys of Bitcoin Design Community (@GBKS @Bosch-0 @pedromvpg @IamSanjana )

Landing page critic (click for video)

crit

Figma used in the video

Describe the solution you'd like

Let's use this stream of realizations / weaknesses / ideas and create an actionable plan to build a more friendly iteration of RoboSats UserGenPage.js

We are using React MUI v5 all over, so it would be appreciated if the new design sticks to MUI components.

Additional context

This task is relevant enough for us to put on it some BTC from the dev fund.

For extra incentive, the combined task (drafting + implementing) will be rewarded 1.5M Sats (the mind of the designer will better know how the implementation should feel).

Drop a comment if you want to assign yourself any task. There is not time pressure on getting a new landing page ready, so do not be afraid to assign yourself to later renounce it ;)

KoalaSat commented 1 year ago

I found this guide https://bitcoin.design/guide/savings-wallet/, for sure there is a lot of unnecessary (for Robosats) steps, but I believe that would be a great source for inspiration together with the video

BrodaDemi commented 1 year ago

Hi guys, so I came up with a few page redesigns. Would love to have your feedback on them. Here's a link to the Figma file: https://www.figma.com/file/F431OdSfLfjwa912j0U7yx/ROBOSATS?node-id=114%3A16609

fmitjans commented 1 year ago

I think the Figma page looks great! Two improvements I think are worth implementing from the review video are:

  1. The page shouldn't generate an avatar until the user chooses to, in order to avoid confusion and to make more clear that the avatar shown is the result of a randomly generated token (or a restored one).
  2. The order book should be accessible before needing to generate an avatar, so that the main concept of the page is shown without overwhelming the user with avatar details. Let me know what you think
n-ochs commented 1 year ago

I'd love to take on the redesign task. I have plenty of MUI (v4 + v5) & React experience. Will this issue be updated or a new one will be created after a design is approved?

BrodaDemi commented 1 year ago

Hey Fmitjans, those are really valid points, and things I’ve taken into consideration.

  1. A part of the redesign is adding a bit of personalization that way the users get to feel like they’re a part of the decision making process.

  2. I already implemented no 2 in the redesign. Immediately users jump into the dashboard, avatar or not, they immediately get to see the relevant datas and order book. Although for users that haven’t generated a token, at some point they’d be asked to as they can’t go far without it. Something like that.

can we schedule like a video call where I can walk you through the designs and the thought process behind them?

Reckless-Satoshi commented 1 year ago

Hi guys, so I came up with a few page redesigns. Would love to have your feedback on them. Here's a link to the Figma file: https://www.figma.com/file/F431OdSfLfjwa912j0U7yx/ROBOSATS?node-id=114%3A16609

Hey @BrodaDemi

This is top work. Thank you very much for this inspiring work. I think it is beautiful, congratulations!

Comments

I find some trouble conceptualizing how this design fits within the current app and how actionable it is. I would try to summarize as briefly as possible:

Ideas

I might be too attached to the current chaotic design :D For this task I was expecting maybe a more pragmatic approach to redesigning the UserGenerator page and streamline the user flow building over what we currently have. An example idea for the user generation: a user opens the onion link, and instead of being shown a Robot right away he is asked whether he is new to RoboSats. If he is new, a Dialog (similar to what Mullvad does) is shown with 3 steps: 1) "First let's create a random token, this will be the key to your robot avatar" user clicks , ~ random characters flip on screen until the token shows ~ 2) Now, let's generate a random robot identity for trading *user clicks "Generate" 3) "Woah, your robot avatar is CoolLightning517" . Copy your token safely in case you need to return as CoolLightning517 in the future" Copy (button). Dialog closes and shows the BookPage.

Alternatively, a deeper redesign as suggested by you, best if the BookPage is the first page the user sees, then the robot generation prompt triggers when the user clicks on an order. The emergency recovery button (sign in) can be placed in some corner. Place the Make Order Button on the book page, and the Order Maker inputs show as a dialog over the Book page exactly as designed by you.

Other comments and context

We can, of course, work on a new frontend that is Desktop/Browser only and conforms better with user expectations. But I am not sure we have the resources to build it and properly maintain two "RoboSats Basic" frontends (we certainly need the one that is mobile friendly and fun above everything else). Many elements of this frontend proposal could actually fit more / be merged with RoboSats Pro (https://github.com/Reckless-Satoshi/robosats/issues/177), where users do have a local "workspace" (~ account).

I find that I might have left this task described too openly. I did not want to write a counter critic to specify why some design choices of the initial design were important / mobile first. Preferred to leave contributors comment and propose first, in retrospect I should have framed it more tightly.

Thanks to this draft of @BrodaDemi we now have way more clarity on what are the choices and trade-offs going forward for RoboSats basic frontend. What do you think? I think it is possible to implement most of your suggestions as direct upgrades over the current app without redesigning it as a desktop website. A few more iterations of the draft might be needed until we have a concrete plan to develop.

Reckless-Satoshi commented 1 year ago

I'd love to take on the redesign task. I have plenty of MUI (v4 + v5) & React experience. Will this issue be updated or a new one will be created after a design is approved?

That's amazing! I am assigning you in this Issue. But indeed, we will probably create a new Issue once we settle for something actionable.

BrodaDemi commented 1 year ago

Hey @Reckless-Satoshi

Amazing take and comments. That really gave some sort of insight into what exactly I'm working on. I started the redesign process after talking to Christoph and also watching Bosch video where they gave their reviews on the site, in terms of UX and UI. The conversation was heavily geared a web/desktop redesign. This is my first time of hearing that there's an app somewhere.

So I understand where you're coming from and I just want you to know open source project or not, I want the best in terms of innovation and advancement for robots.

BrodaDemi commented 1 year ago

So I get that my focus now will be on the mobile app in regards to specific areas. My question now is that where can I get the app to go through it? cos I use an iPhone so is It downloadable?

And just a design thought now yeah, I realised we could sell the app more on the site cos just as I was clueless about robosats having an app, I'm sure thats how most users are too. but first things first, how can I get the app on my phone?

Reckless-Satoshi commented 1 year ago

So I get that my focus now will be on the mobile app in regards to specific areas. My question now is that where can I get the app to go through it? cos I use an iPhone so is It downloadable?

We have an .apk for Android https://github.com/Reckless-Satoshi/robosats/releases/tag/android-b4fac4c , but this is not needed. The easiest way to experience the mobile UI is to use Tor Browser on Android or Orbot + Safari on Iphone. Then access robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion, should be a similar experience as installing the app (if anything, the viewport of the installable app is a bit larger and load times faster). The app is a simple webview that loads the frontend using the device's system browser. The app is responsive, so the Order Book, Order Page and the bottomBar are larger and show more information if you access from Tor Browser on desktop. Ideally we want to maintain a single app that is responsive and serves Desktop / Mobile / Native.

BrodaDemi commented 1 year ago

![Uploading 0484D088-9560-4836-8791-169353CA1EE2.png…]()

BrodaDemi commented 1 year ago

Can you send screenshots

domrishe commented 1 year ago

@Reckless-Satoshi I put together a figma sketch of some ideas based on the community crit a while back. Basically I tried to maintain the ethos I think you guys are going for (simple/robots/playful) in mind so I made sort of a separate flow for people who are first-time users to keep the actual tool super simple and clean for repeat users. New users get a little walk-through of the process. Also a separate page for recovering a robot. Glad to discuss.

https://www.figma.com/file/VmJapnwOYyxlV92jRCsCte/RoboSats-Re-design?node-id=0%3A1

Sorry, I put this together after the crit but didn't realize I should post it here vs. our community slack (I'm new here) and I've been out of pocket for a couple weeks.

I think this could maybe be a lower-level bridge on the way to the great stuff @BrodaDemi has proposed.

BrodaDemi commented 1 year ago

Hey @domrishe this is a really cool onboarding flow. Can we collaborate to make this much more aesthetically pleasing?

Reckless-Satoshi commented 1 year ago

Can you send screenshots

We can put some screenshots here. (yet... I think it is important that you experience the current version and complete some trades. You can do it in your phone with testnet BTC accessing robotest.onion.moe or unsafe.testnet.robosats.com. The mobile browser experience is about the same as the installable app.)

Hey @domrishe this is a really cool onboarding flow. Can we collaborate to make this much more aesthetically pleasing?

I'm strongly supporting this collaboration!

Just a recap of some points we have found to be key for improving the user flow:

BrodaDemi commented 1 year ago

https://www.figma.com/file/F431OdSfLfjwa912j0U7yx/ROBOSATS?node-id=418%3A2334

@Reckless-Satoshi Hey, I want you to check out this designs and give me your feedback. Also, I'm having trouble visualising how the back up option will work. Would it be in form of an export to cloud thing, or download to computer, etc. I would need you to share more light on that.

For the recovery button too, how does it work? Btw, the following designs are still work in progress but to achieve amazing result, I need your feedback and clarity on the aforementioned.

domrishe commented 1 year ago

Hey @domrishe this is a really cool onboarding flow. Can we collaborate to make this much more aesthetically pleasing?

@BrodaDemi I don't really have any more bandwidth to put towards this effort at the moment, but please feel free to use or add anything from my figma file. Looks like you've got a good direction from here. Lmk if you have any questions about what I put together

Reckless-Satoshi commented 1 year ago

Would it be in form of an export to cloud thing, or download to computer, etc. I would need you to share more light on that.

It is Copy to Clipboard or Download Text File button, those are options to store the token string. The recovery is as simple as "input your token". I want to reiterate it is very important to have some experience as a user on the current version in order to understand what needs to be improved and how to improve it. Robot tokens are somewhat unique to any other website. They are to be used only once, they are "temporary", they are akin to a bitcoin private key...

Your new design is once again very beautiful and practical. I still believe we should not rework the components that are already OKish. E.g: changing the book datagrid for a list of cards. That's a lot of work. It is a matter of preference, but the datagrid is already sort of good and is very battle tested (too small payoff for the amount of work involved).

Please, wait until I come back with a rough sketch, so we can more iteratively exchange visions. I will try to have it by the end of the week. I have never used Figma, I am not sure it can be used with throw away emails and Tor Browser. So I might just use Photoshop and redesign user flow by recomposing the components we have already. Our main objective here is to more clearly guide the user and improve its flow, while avoiding to redo components unless very necessary.

BrodaDemi commented 1 year ago

okay @Reckless-Satoshi

Reckless-Satoshi commented 1 year ago

okay @Reckless-Satoshi

Just a heads up that it will take me a bit longer :`)

Reckless-Satoshi commented 1 year ago

Hey @BrodaDemi @domrishe , I do not know how to best proceed.

The issue we are having is sub-optimal communication, due to the fact I cannot annotate or edit Figma (also, Figma is not actionable, the dev will have to redo the work again). Drafting a UI on Photoshop is just not feasible as far as I have been trying: would be easier to just implement it in code. I have also tried to make a sketch with paper and pen for communication, but the drafts I have created are not clear at all, these won't be helpful.

Options:

  1. Use MUI components in Figma (apparently available, but not free) or another design tool that supports MUI (hopefully one that does not have strong restrictions when creating a user).
  2. Implement code directly and prototype using MUI components (forget Figma or UI desgin tools).
  3. Describe in words as clear as possible the requirements for each path and the components must be there. (but then what? :D)

I'm slowly going to start with 2, placing empty boxes with text describing what needs to go in-place, building a draft skeleton for the new user flow (also take the chance to turn into .tsx the components that are still .js).

I can also give my best try to 3 and describe as best as possible what I tried to convey on my last messages.

The current state of BrodaDemi's Figma very closely resembles what we have talked and it's the way to go. The only issue is to adapt it to use the components that we have created (use of order book, use the navigation bar, stick to no scrolling, color scheme, etc)

Reckless-Satoshi commented 1 year ago

I slowly started to transform RoboSats components and by now we have the new BookTable and Makerform as well as a new framework #289. These new components are embedded into the BookPage and the MakerPage. To complete the redesign we will need to create the new RobotPage, a SettingsPage and a Navigation bar. I will have ready the SettingsPage and NavBar in the next couple of weeks max. So the only thing left is the...

New RobotPage

After the refactor of the RoboSats Basic frontend, there is a placeholder for the new RobotPage (/src/basic/RobotPage) and a new data model "Robot" (/src/models/robot.model.ts) . We define in /src/basic/Main.tsx state variables robot and setRobot() . Exemplary API calls to generate/delete/logout of a Robot with using the new model has been implemented in the old UserGenPage.js as a guide.

The new RobotPage should have 2 views: 1) "Generate a robot" (when you have not active Robot) and 2) "Your Robot Profile" (can strongly reuse the /src/components/Dialogs/Profile.tsx).

  1. Generate a Robot should have 2 modalities (2 buttons), one big and centered "Generate a Robot", this is for newbies and would be the verbose on-boarding flow depicted by @BrodaDemi https://www.figma.com/file/F431OdSfLfjwa912j0U7yx/ROBOSATS?node-id=418%3A2334 and @domrishe https://www.figma.com/file/VmJapnwOYyxlV92jRCsCte/RoboSats-Re-design?node-id=0%3A1 . The second button "Quick generate" should skip all the steps and in one go give you a robot avatar (i.e. create a strong token, make the /api/user generation call and show the new Robot right away). The second one is way more useful for anyone who has experience with RoboSats as this is how UserGenPage.js currently works. On the generation flow for newbies, extra points are given for nice and fun transitions and animations. It would be very cool if the randomly generated token has a "slot machine" vibe to it (random number/letters flipping vertically). On the other hand, @redpurdy is working on a really cool animation to show while the new robot avatar is loading (loosely inspired in #270 and easy to add to /src/components/RobotAvatar component) .

  2. The view (2) "Your Robot Profile" should simply show Robot-wide settings. Check /src/components/Dialogs/Profile.tsx . Namely these settings are: enable Telegram notifications; shortcut to your active/previous orders; enable/disable stealth invoices; and, the rewards and compensations switch (referral link and submit and invoice to be paid out rewards). Only thing missing in the current component is a "Logout" and "Delete" buttons (after pressing it, the view (1) will be shown).

Other comments

This task only requires knowledge of ReactJS and MUI and can reuse large parts of /src/basic/UserGenPage.js and /src/components/Dialogs/Profile.tsx

This task is rewarded with 1M Sats :zap:. Write below if you want to be assigned. Preference for assignation given to @n-ochs as interest was shown long time ago. If there happens to not be any volunteer in ~3 weeks max I will take this task as it is the last component needed to have the new iteration of RoboSats Basic ready (would be amazing to have finished it by the release of the Android app).

Reckless-Satoshi commented 1 year ago

Let's share the UI design reward between both contributors @domrishe and @BrodaDemi .

Very arbitrarily we could split the 300K into 250K for @BrodaDemi and 50K Sats for @domrishe. Please submit a LN invoice with a long expiration time from a proxy node pubkey :rocket:

n-ochs commented 1 year ago

I would still love to take on this task.

Just throwing it out there: if needed, I can turn any class component into functional and/or JS file into TS. I'm very comfortable with React TS + MUI.

Please let me know when I can branch off and start. @Reckless-Satoshi

Thanks!

Reckless-Satoshi commented 1 year ago

I would still love to take on this task.

Just throwing it out there: if needed, I can turn any class component into functional and/or JS file into TS. I'm very comfortable with React TS + MUI.

Please let me know when I can branch off and start. @Reckless-Satoshi

Thanks!

Feel free to start whenever you want! :rocket: Let me know if you have any question. We can open a dedicated thread for this task.

In case you want to look into other components that need JS -> functional TS work look into the OrderPage/TradeBox #303 or the other RoboSats PRO components that are planned https://github.com/Reckless-Satoshi/robosats/issues/177#issuecomment-1289175371

Reckless-Satoshi commented 1 year ago

@domrishe PR https://github.com/Reckless-Satoshi/robosats/pull/308 introduces the new Navigation Bar. It also refactors and makes it cleaner the login process in the old UserGenPage. If you started working on this component is worth rebasing to add those commits. I will keep testing it but will be merged in a similar form to what there is now. Also feel free to join us in our dev group https://matrix.to/#/#robosats:matrix.org for faster communication :)

Reckless-Satoshi commented 1 year ago

@n-ochs won't be able to follow through with the implementation of the new robot page. I might put mylself on it on the following weeks :)