Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stakepools theme #23

Closed
linnutee opened this issue Jul 2, 2018 · 16 comments

Comments

@linnutee
Copy link
Member

commented Jul 2, 2018

Tasklist @MariaPleshkova
UI views: https://www.figma.com/file/dzjw34JZ40sxEJVqhekmhZBP/Decred

  • Create a wire-frame for Login + Register page + password sequence
  • Create a wire-frame for API key / Connect views
  • Design draft of Login+Register page
  • 
Design draft Settings Page
  • 
Design draft Connect Page (not connected to the stakepool)
  • Design draft Connect Page (connected to the stakepool)
  • Design draft Tickets Page
 (-[x] @linnutee collect content)
  • Design draft Voting Page

  • Design draft Stakepool Admin: status page
  • Design draft Stakepool Admin: add low fee tickets
  • Design draft of Home Page (-[x] @linnutee collect content)
  • Design draft of Stats (Visitor)
  • Design draft of GDPR modal (Content needed: decred/dcrstakepool#259)
  • Design tablet and mobile drafts for key views
Notes: 07.01.19
- Closing down this issue, as all design and front-end work besides the GDPR content is done.

Notes 02.07.18: 
- renamed address page to Connect page,
- added GDPR modal
- added mobile and tablet drafts (only for key views, to be decided later) 
- took home page to the end of the list to give time for considering better onboarding

Definition
dcrstakepool is a web application developed by the DCR project enabling hosting stakepools.
It coordinates generating 1-of-2 multisig addresses on a pool of dcrwallet servers so users can purchase proof-of-stake tickets on the Decred network and have the pool of wallet servers vote on their behalf when the ticket is selecte. Stakepool hosts can get the software from Decred's gh; application also comes with a default web-ui theme, recommended to be used by all stakepool host.
All views and comments: https://www.notion.so/eeter/Stakepool-Theme-Overhaul-0518-491c02c8989f4af18d1bcf3525e87162

Goal
The goal of the work is to update the visual design; making it more consistent with the current Decreditons UI as well improve general usability where possible. Although anyone can customise their stakepool's UI, ideally provided theme should be a good enough default solution to take away need for edits.

Primary use case
From a users perspective, a stakepool's UI is interacted with during the setup process of connecting a wallet to a stakepool. During this process, the user needs to:

  • Select a relevant stakepool from Decrediton (or decred.org/stakepools)
  • Register an account on the selected Stakepool
  • Login, find and copy the API key and paste it to Decrediton.
  • Other use cases as secondary, the stakepool theme gives

Secondary use cases (lower priority)

  • Stakepool admins can add ignored tickets (due to low fees attached) to stakepool
  • Stakepool admins can see statuses of daemons/voting wallets/stakepooldaemons
  • Users can update their voting preferences (also in Decrediton)
  • Users can edit their basic settings: password, email
  • Users can view the stakepool statistics (also in Decrediton)
  • Users can see their ticket information (also in Decrediton)
  • Users can connect to stakepool via commandline wallet

Scope

  • Re-design the stakepool theme in a consistent style referred from Decreditons UI
  • Structure wise, the big picture can remain the same, any suggestions for changes should discuss tradeoffs involved
  • Structure and flow updates:
    • Login and Register should be simplified; I propose using a tab or accordion pattern approach, to locate them closely rather than in two different pages as now.
    • Finding and copying the API token should be simplified.
      This module can be re-located from the Settings.
    • Address page can be thought-over if needed. Since it's the command-line option to connect to a stakepool, hence a secondary use case. Currently the potential problem with is confusion with finding the API key; since that's currently located under Settings. Would consider having them on the same page instead and with a clearer hierarchy.
  • Home/Landing views:
    • The stakepool fees and stats can be highlighted clearly as statistical info.
    • The descriptive and onboarding content can be updated, can use the Stakey illustrations / animations from @lustosa and @kyle or create a new relevant pieces that would assist with the onboarding. (Stakey illustrations are used in context of pos)
  • Tickets in "Add Low Fee Tickets" view can be visualized in graphical or any better manner
  • The visual design should be based on a default latest bootstrap grid. https://medium.com/@petehouston/setup-twitter-bootstrap-grid-in-sketch-f6e69eab95c2

Workflow

  • UI design in Adobe XD, Sketch or Figma
  • Normal / temporary communications via Slack; Calls via eeter.co slack; Documentation, tasklists and archiving Github.

Content

Decrediton UI references and supplied assets:
Staking setup: https://xd.adobe.com/spec/45ac2e7a-426e-488f-9a41-590e64c63563/
All key views: https://xd.adobe.com/view/da48d1a5-e1b9-4392-68ac-2fbb8d15e2f8-ac79/
Launcher views: https://xd.adobe.com/spec/f3d26fc1-dbc2-4a3a-9870-c0ac2ae59a8a/
decrediton ui v015 - Masters.zip
stakey-illustrations.ai.zip
decred-colors-rgb.ai.zip
Decred - Logo Package.zip

@MariaPleshkova

This comment has been minimized.

Copy link
Collaborator

commented Aug 31, 2018

Link to Zeplin project: https://zpl.io/25qk0w0

@MariaPleshkova

This comment has been minimized.

Copy link
Collaborator

commented Sep 12, 2018

@rmykolas thank you
there are some amends concerning the links above:
-change the color of info icons (connect page)
-add hover effect to info icons and back icons (it's the same)
-change the color of active header item (to #091440 )
-it seems like there's more space between "login" button and "password" field on my layouts than in here
-same situation as above with "update pswd" button and "repeat pswd" field
-add "back" icon to "pswd sucessfully updated"
-checkbox field near "i'm not a robot" differs from the layouts
-make buttons the same everywhere (w:125, h:44)
-change #0c1e3e to #091440 everywhere
and also these pages are withouts last amends, so I didn't write about the things that have been changed and already shown on the layouts on Zeplin

@rmykolas

This comment has been minimized.

Copy link
Member

commented Oct 2, 2018

@MariaPleshkova

This comment has been minimized.

Copy link
Collaborator

commented Oct 4, 2018

@rmykolas

This comment has been minimized.

Copy link
Member

commented Oct 5, 2018

Perfect, thanks @MariaPleshkova.

Though for the next time, we should probably set ourselves up with a TrackDuck project, so it's easier to leave and address feedback ;)

@MariaPleshkova

This comment has been minimized.

Copy link
Collaborator

commented Oct 9, 2018

@rmykolas oh, okay, sure, thanks :)

@rmykolas

This comment has been minimized.

Copy link
Member

commented Oct 12, 2018

Hey @MariaPleshkova - the URLs have been updated based on your comments!

Can you send me your email address, so I can add you to a TrackDuck project, so you can leave the rest of your feedback there if there's any and we can wrap this up?

Thanks!

@MariaPleshkova

This comment has been minimized.

Copy link
Collaborator

commented Oct 12, 2018

Hi @rmykolas . Of course, it's mariepleshkova@gmail.com

@rmykolas

This comment has been minimized.

Copy link
Member

commented Oct 12, 2018

@MariaPleshkova just added you to the TrackDuck project, so you can easily add any additional feedback there and we can track the progress there as well.

@MariaPleshkova

This comment has been minimized.

Copy link
Collaborator

commented Oct 16, 2018

@rmykolas accepted your invitation and added my feedback (desktop vers). Also not sure if I can left my comments on tablet and mobile versions there.

@rmykolas

This comment has been minimized.

Copy link
Member

commented Oct 23, 2018

Hey @MariaPleshkova, I went through all of your TrackDuck feedback and combed through the mobile/tablet versions once more and I'm not pretty much fully happy with the result. Could you check it all out and let me know if there's anything else I missed?

In terms of tablet/mobile feedback, it's a bit tricky with TrackDuck, but I believe, you can reduce the width of your browser window and leave feedback. I should be able to distinguish that it is non-desktop feedback.

Also, I left a couple of comments on the Zeplin project, where I couldn't export an image or grab a box-shadow of an element from there.

Once again, the URLs are the same.

Thanks!

cc: @linnutee @saender

@MariaPleshkova

This comment has been minimized.

Copy link
Collaborator

commented Oct 24, 2018

Hi @rmykolas
I was trying to check updated URLs out, but all the pages look weird now
image
image
image
Maybe you've got any ideas of what's wrong?

@linnutee

This comment has been minimized.

Copy link
Member Author

commented Oct 24, 2018

Seems something got broken in the previews indeed. I'll have a closer look when updated.

One thing to address: all assets there (icons and those onboarding images) should be with .svg's or certainly @2x png's. Currently very pixellated.

@rmykolas

This comment has been minimized.

Copy link
Member

commented Oct 24, 2018

Hey, it seems that something broke when I uploaded everything and I saw that some of the old links are actually wrong, so please find the new URLs below. Also if something seems broken, please make sure to either clear your cache or even better - open the pages in incognito mode. Thanks!

https://s3.amazonaws.com/dcrstakepooltheme-new
https://s3.amazonaws.com/dcrstakepooltheme-new/connect-to-wallet.html
https://s3.amazonaws.com/dcrstakepooltheme-new/connected-to-wallet.html
https://s3.amazonaws.com/dcrstakepooltheme-new/email-verification-successfully.html
https://s3.amazonaws.com/dcrstakepooltheme-new/login.html
https://s3.amazonaws.com/dcrstakepooltheme-new/low-fee-tickets.html
https://s3.amazonaws.com/dcrstakepooltheme-new/password-update.html
https://s3.amazonaws.com/dcrstakepooltheme-new/password-updated.html
https://s3.amazonaws.com/dcrstakepooltheme-new/register.html
https://s3.amazonaws.com/dcrstakepooltheme-new/reset-password-link.html
https://s3.amazonaws.com/dcrstakepooltheme-new/reset-password.html
https://s3.amazonaws.com/dcrstakepooltheme-new/settings.html
https://s3.amazonaws.com/dcrstakepooltheme-new/stats.html
https://s3.amazonaws.comdcrstakepooltheme-new/status.html
https://s3.amazonaws.com/dcrstakepooltheme-new/tickets.html
https://s3.amazonaws.com/dcrstakepooltheme-new/voting.html

Also a quick note - I removed the "I'm not a robot" checkboxes from the pages, because those actually cannot be styled, as the actual Google's Captcha mechanism doesn't allow that.

Cheers!

@rmykolas

This comment has been minimized.

Copy link
Member

commented Nov 20, 2018

Here's the final result:

https://github.com/rmykolas/dcrstakepooltheme-new

You can fork/clone the repo or download it as a .zip.

@linnutee linnutee closed this Jan 7, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.