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.
Approach
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.
Summary
- 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 
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!
.