NNS dapp new "Voting" UI & UX (in test)

It has now been a few months since we shared some ideas about the design of NNS-dapp (see post). Since that date we remained really active and proposed quite some new features - such as the recent “Optimistic Voting” (see post) - which often had for goal to improve the user experience.

Today we would like to continue this effort by proposing a series of changes which we hope will give a bit a refresh to the design of the “Voting” screens but, also should make the usage of these particular functions more comfortable.


The architecture of the presentation of the information has been “re-thinked”. It has for goal to give more priority on what I called the “system information” (proposal type, topic, dates etc.) over the “proposer input fields” (title, description). We think that it can make the screens more readable but also give strength to how we perceive the information. It also aligns partially the display with what is done in the Dashboard.

Speaking of, we cleaned the static label, description and information rendered in the dapp to align these with those of the Dashboard. Both dapps will now use the same source for the i18n keys.

In addition to the rendering, we are also proposing an improvement of the navigation. Indeed, most of us I guess rarely vote for a single proposal but, rather multiple proposals per session. That’s why on the detail screen we added a new navigation bar which can be used to navigate to previous and next proposal.

Likewise, to spare some scrolling, the information are better spread around the screen and on mobile devices, we are proposing a new sticky “bottom sheet” that contains the voting actions and neurons.


  • refreshed UI design (new cards, new buttons’ color, etc.)
  • information structure modified to present firstly “system information”
  • better use of the space for a quicker and better overview
  • ability to navigate from previous or to next proposal
  • quicker access to voting actions notably on mobile devices thanks to a sticky bottom sheet

Test it!

Enough chit-chat, nothing like a demo and test. We invite you to give a try to these changes on testnet :hugs:

:point_right: https://s55qq-oqaaa-aaaaa-aaakq-cai.nnsdapp.dfinity.network/?redirect=proposals

(do not use your regular anchor to sign-in, instead use anchor 10001, 10002 or create new test one)

Looking forward to your feedback!


Looks cool and love that it’s running on the IC :slight_smile:

One quick feedback, when I log in, it feels like I’m hit with a wall of proposal boxes and it’s hard to figure where to start. Would it be a good idea to color the cards by topic (i.e. governance proposal cards are blue, network economics cards are green, sns cards are yellow… etc). I know I can filter them, but I want to see them all and just need a place to start!

Otherwise it looks cool. when you click into the cards, it’s super clear (to me on desktop)

Thanks for letting us play with it!


Thanks for the nice and constructive feedback. I’ll share it with the team!

I, speaking for my self, can relate, it’s a fair point. I don’t see it as a show stopper though. I feel like that kind of “wall of proposals” issue - at least to some extension - also already exists with current design. Agree?

1 Like

I honestly hate this new gradient styte🤣

Haha shouldn’t design create emotion? The least we can say is that it does in that case :stuck_out_tongue_winking_eye:.

Joke beside, my two cents, I kind of feel it is not meant to stay for ever. I would not be suprise if there will be some more design iteration rather sooner than later. But, again, just a personal feeling.


As there was not objection and as we received positive feedbacks, we went on with a proposal that has been accepted and executed. These new features are now live on mainnet :partying_face:

That being said, we have take good note of @ais feedback and later on will come back to the suggestion - indeed lots of cards are displayed.