Design the v1.0.0 dapp

[AlexJupiter]

I need to get a bit ahead of our engineering as I need to send the designs to the Open Coop Conference for approval. Hopefully by discussing these designs beforehand, we will also all understand the vision we are all trying to achieve.

To view the designs please visit this Figma file and share any comments in this GitHub issue. I will also update on my progress in this GitHub issue as this is just the start and I know we will need many subsequent iterations.

To confirm these are the designs we are going to need to implement to complete the v1.0.0 milestone, which is due on 20/07/18.

[AlexJupiter]

@aecc @LucasIsasmendi @virgile-dev @medied please let me know your thoughts on the above.

[virgile-dev]

This Open Coop pilot is a great context the dapp as it only needs a single ballot and we can expect people to handle the horrible burden that metamask puts on the user.

This said, here are general remarks on the design.

• We agree that the landing page of the dapp will be the ballot ?
• I think it'd be useful to provide all the screen for the full implementation, here a couple (we can turn it into a task list above) : delegate screen, revoke screen, transaction status screens for voting, delegate and revoke
• We should be thinking about mobile since the pilot will be at a conference

Here come detailed remarks :

• On the sign up page, maybe we should think of making a video tutorial, instructions could look prettier, we should add instructions for people on mobile (as pepeht does).

• For the delegations graph, it doesn't really make sense to put a drop down menu there. Why no just display the tabs for each options

[AlexJupiter]

@virgile-dev thanks for the feedback 👍

We agree that the landing page of the dapp will be the ballot ?

In my opinion yes. We can of course just share a specific URL, however the only change to the codebase will be to redirect the user to a specific ballot once they have signed up. It is worth noting that @LucasIsasmendi mentioned that we will have to rewrite the smart contract to support multiple options on a ballot, so we might as well rewrite it at the same time to include multiple ballots. However, I want to confirm that supporting multiple ballots shouldn't be a priority for this.

I think it'd be useful to provide all the screen for the full implementation

Totally agree. Planning on fleshing out this design over the coming weeks. Just looking for initial feedback at this stage.

We should be thinking about mobile since the pilot will be at a conference

Meeting this milestone is going to be difficult as it is, and unless we have extra resources (in terms of devs), my guess is we will be restricted to desktop for this demo: unfortunately. The reason being, getting the dapp to work on mobile will require us to hook into another ethereum wallet and that's going to be a tonne of work I believe. Again, this is a MVP. Moving forward, we should do a proper vendor analysis of all the ethereum wallets out there. I am also concerned about using Cipher at the moment due to their recent acquisition to CoinBase; meaning their APIs might change soon.

For the delegations graph, it doesn't really make sense to put a drop down menu there. Why no just display the tabs for each options

I must admit this is lazy design on my part, however I cannot think of a better solution at the moment. There wouldn't be space for ten tabs for example, and I was reluctant to design a scrolling tab interface due to our lack of resources in the front end department.

[agazima]

@AlexJupiter I think grey color which is present next to all the colors representing all kind of answer is very dominating and doesn't fit the colors. I would choose something way lighter :D The focus goes to the grey color instead to the answer. I am also thinking that showing that grey area is not really visually good looking, why not just the colored area? Somehow something looking like this

Why there is this dropdown tab? Is it because of the amount of options that you want to present there?

[virgile-dev]

@AlexJupiter on the mobile part, you just need to have your app to be responsive really. @aecc Toshi etc. just work out of the box like metamask nothing else to code. I haven't tested though.

[AlexJupiter]

@agazima:

I think grey color which is present next to all the colors representing all kind of answer is very dominating and doesn't fit the colors.

Feel free to edit the component here in Figma, happy to take your steer here!

@virgile-dev, if @aecc and @LucasIsasmendi say that it's little to no extra work to integrate with Cipher/Toshi then I am all for it 👍