Revamp the overview page

himanshugarg06 commented 6 months ago

[ ] Provide clear explanations of the product offerings
[ ] Improve navigation from the overview page
[ ] Remove all the images. paymaster images are already part of the paymaster documentation.
[ ] Add a demo, showcasing the UX improvements using privy.
[ ] add npm i sdk-package to showcase, add redirection to the quickstart page

bicoxdesign commented 6 months ago

We have some old designs from the last year. Please take it all with a pinch of salt since they were not informed by solid PRDs.

Also, please note that the components within the layouts such as paymaster cards, buttons, title styles, et al have also changed over time. We use cleaner, more relevant internal components now.

1. Overview Concept

Figma Board for Overview September 2023

Philosophy/How this was designed

This was made to show all key information clearly, helping you make decisions quickly. I wanted to display important metrics in an organised way so that 1) developers feel confident everything is working fine, and 2) the call-to-action buttons (CTAs) save time by acting as direct shortcuts to tasks that are usually buried deeper in the system.

overview-existing-user

2. Navigation Concept

Figma Board for Navigation November 2023

Philosophy/How this was designed

Inspired by Vercel, this design highlights all the important links more prominently, making better use of the space that the left navigation currently occupies without much benefit. With this new approach, we could comfortably introduce a fourth level of navigation. Right now, we're limited to using three levels effectively.

account-settings

paymaster-list

☠️ End of update ☠️

NunoFilipeSantos commented 6 months ago

@bicoxdesign , I believe @himanshugarg06 here is talking about the overview on Docs (this repository), not the Dashboard.

I have refined a bit the original ticket, please complete it with your thoughts @himanshugarg06 .

Graeme-Code commented 6 months ago

Hi @himanshugarg06 .

I think the points you have are good. Looking at the analytics here: https://analytics.google.com/analytics/web/

?utm_source=scheduled_report#/analysis/p427722938/edit/0K9oREacReuSdPPLf9b0FA

I think additions to the overview page which would be helpful:

Link supported networks (If dev's network is not supported, they might as well stop looking) (this was third most visited page after a session started)

AhmedBalaghi commented 6 months ago

Agreed with the points. In terms of the demo, id say lets be creative here and not just copy zerodev. We of course dont need to show lots of crazy things but what if it can be seqentiak. Heres gasless nft mint, heres pay gas in a different token, heres xyz.

bcnmy / docs