Giveth-dapp: Propose Milestone redesign

[GriffGreen]

https://docs.google.com/spreadsheets/d/1BTG_BluAahVGog_R-Ubt2a93POiA84RHU3NqiXaUog0/edit#gid=0

Lets limit it to 4 types of milestones:

Payments
Expenses
Milestones
Bounties

This will probably be an epic and starts with a designer

[krrisis]

So here I would just go for 3 options: Milestone / Payment / Expense
Bounty is another specialization we do not need, a bounty can be described in a github issue, payment Milestone can be made once we have all the info. Simplifies system & set-up.

When you get a propose/create a new Milestone you get a pop up with these 3 choices + brief explanation under buttons what they are.

With it comes a dropdown box under a Campaign, by default it just shows the Milestones (as people want to donate to Milestones mainly). If they change the dropdown they can see payments & expenses for transparency reasons only.

[markoprljic]

So here I would just go for 3 options: Milestone / Payment / Expense
Bounty is another specialization we do not need, a bounty can be described in a github issue, payment Milestone can be made once we have all the info. Simplifies system & set-up.

When you get a propose/create a new Milestone you get a pop up with these 3 choices + brief explanation under buttons what they are.

With it comes a dropdown box under a Campaign, by default it just shows the Milestones (as people want to donate to Milestones mainly). If they change the dropdown they can see payments & expenses for transparency reasons only.

Hey, @krrisis I'll be working on the UI and flow of this issue.
I think I understood what you mentioned here but wanted to ask if you could maybe do a quick sketch (paper or digital as you prefer) of how you envisioned it? Thanks!

[krrisis]

1) you hit the propose button

2)

You add an intermediary pop-up that lets you choose between 3 options (got out my very best design skills)

3) depending on your choice you get to see less or more options in the next view - I've created other issues last week to simplify that view. Eg #1409
Griff made some proposals in the doc above per variation - to me that's still too many options. We have in any case never been used for bounties, if people want to make agreements beforehand - they can do this in google docs. We can bring them later if there's a real need.

The advantage of this approach is that we incentivize people to only donate to Campaigns and only to Milestones under it if these Milestones are really Milestones for the project that's set up, not ordinary payments. Money from Campaigns & Milestones is delegated to payments & expenses for individuals.

I can make more quick (super sexy :) ) designs for how I see the 'Milestones' but prob waste of time if Griff sees the detail differently

[markoprljic]

Thanks @krrisis this helps. I'm going to make a more polished mockup and send over when ready.

[markoprljic]

Instead of Propose a Milestone button label, in order to accommodate three different milestone options, we should rename the button to read "Create New" following up with a modal (or new page) showing these three options.

[markoprljic]

Considering making this as a standalone action with this being the first step. @GriffGreen @krrisis

[krrisis]

I love it!! and hope @GriffGreen will agree to leave bounties out for now, makes it easier :) I think the 'create new' also makes sense.
For me the 'create new' goes together with a filter on the left-hand side. By default it's filtered on showing Milestones only, but you change it to 'expenses' 'payments' or 'all' by clicking the dropdown/filter arrow

[markoprljic]

@krrisis While we're at that, I think it would be better to have tabs right away: Milestones | Expenses | Payments so that we don't hide options under a dropdown or an icon. I'll mock this up in the next iteration. Thanks for pointing this out!

[markoprljic]

@krrisis @GriffGreen Payments and Expenses forms might have different inputs required than the Milestone.

For example...

Expenses:

• Merchant
• Date
• Amount
• Currency
• Comment (optional)
• Attach Receipt
• Reimbursement Currency

Payments:

• Amount
• Currency
• Description
• Due date (?)
• Attach invoice(s) (optional?)

Another thing that came up while I'm redesigning this is the concept of allowing user to add a Milestone/Expense/Payment from anywhere on Giveth.
The Create New button can be accessible from the Manage dropdown and user would land on this page
Selecting one of the 3 options would open a new screen with the entry form which allows users to select the Campaign/Project to which this entry refers to. You can see here how this would look like.

[GriffGreen]

Selecting one of the 3 options would open a new screen with the entry form which allows users to select the Campaign/Project to which this entry refers to. You can see here how this would look like.

That is super cool @markoprljic ... I will bring that up in the sync call today.

[GriffGreen]

The Create New button can be accessible from the Manage dropdown and user would land on this page https://www.figma.com/proto/FBqHg0UfeuaIueDEZG0tBS/Giveth-Design?node-id=2072%3A841&viewport=135%2C115%2C0.5314952731132507&scaling=min-zoom

This is great! Made some comments

[GriffGreen]

The big question is if it is worth separating the bounties use case from the payments use case in order to reduce the options for payments in the next screen

[GriffGreen]

Another question is whether or not we can use the standard bootstrap methods for building this or if we should try to match the design perfectly

[GriffGreen]

Another thing that came up while I'm redesigning this is the concept of allowing user to add a Milestone/Expense/Payment from anywhere on Giveth.

Amin said that would be cool! And maybe we put it on the home page @markoprljic?

[aminlatifi]

Another question is whether or not we can use the standard bootstrap methods for building this or if we should try to match the design perfectly

Thanks @GriffGreen, I meant just how much job we will have on designing component? Is there ready component/libraries out there that match the design?

[markoprljic]

Another question is whether or not we can use the standard bootstrap methods for building this or if we should try to match the design perfectly

Doesn't have to match design perfectly, we can use the library we have and apply to this layout and UI.

[markoprljic]

Another question is whether or not we can use the standard bootstrap methods for building this or if we should try to match the design perfectly

Thanks @GriffGreen, I meant just how much job we will have on designing component? Is there ready component/libraries out there that match the design?

1. Yes we can and probably should put it on the homepage.
2. We can use existing front-end library and apply to this layout and UI, doesn't have to be 100% match.

btw. what framework are we using? Maybe I can continue design iterations with those components. @aminlatifi ?

[markoprljic]

I added the Bounty option https://www.figma.com/proto/FBqHg0UfeuaIueDEZG0tBS/Giveth-Design?node-id=2072%3A841&viewport=159%2C255%2C0.10972581803798676&scaling=min-zoom

Blocker: I need to know what input fields and options are mandatory on this page @GriffGreen

[markoprljic]

@GriffGreen Please review the following:

Bounty https://www.figma.com/proto/FBqHg0UfeuaIueDEZG0tBS/Giveth-Design?node-id=2314%3A15&viewport=184%2C2651%2C0.21352197229862213&scaling=min-zoom

Milestone https://www.figma.com/proto/FBqHg0UfeuaIueDEZG0tBS/Giveth-Design?node-id=2128%3A62&viewport=184%2C2651%2C0.21352197229862213&scaling=min-zoom

cc/ @aminlatifi

[lorelei1]

Are there any current options on Giveth 1.0 to create/use a milestone template?

[GriffGreen]

Goal here is to make lots of small issues @aminlatifi and then assign to @MohammadPCh

[MoeNick]

@RamRamez @MoeNick will be pair on this

[MoeNick]

All tests passed except:

1- Edit Milestone goes to old form (By milestone creator in his profile, or by the campaign owner when he/she wants to edit)
2- As a user, when I start a milestone, If any fields are required, the form wont show me the notification, or scroll to the exact required field. I put #1988 as separated but related issues.
3- I cannot remove any pictures.

@aminlatifi

[aminlatifi]

All tests passed except:

1- Edit Milestone goes to old form (By milestone creator in his profile, or by the campaign owner when he/she wants to edit)
2- As a user, when I start a milestone, If any fields are required, the form wont show me the notification, or scroll to the exact required field. I put #1988 as separated but related issues.
3- I cannot remove any pictures.

@aminlatifi

1. We know, edit by new forms is not supported yet. It should be planned I guess.
2. You are right
3. In new form? or old one?

[aminlatifi]

All tests passed except:
1- Edit Milestone goes to old form (By milestone creator in his profile, or by the campaign owner when he/she wants to edit)
2- As a user, when I start a milestone, If any fields are required, the form wont show me the notification, or scroll to the exact required field. I put #1988 as separated but related issues.
3- I cannot remove any pictures.
@aminlatifi

1. We know, edit by new forms is not supported yet. It should be planned I guess.
2. You are right
3. In new form? or old one?

@MoeNick In new forms there is a delete button in bottom right corner

[MoeNick]

All tests passed except:
1- Edit Milestone goes to old form (By milestone creator in his profile, or by the campaign owner when he/she wants to edit)
2- As a user, when I start a milestone, If any fields are required, the form wont show me the notification, or scroll to the exact required field. I put #1988 as separated but related issues.
3- I cannot remove any pictures.
@aminlatifi

1. We know, edit by new forms is not supported yet. It should be planned I guess.
2. You are right
3. In new form? or old one?

@MoeNick In new forms there is a delete button in bottom right corner

1- So I will create one issue in product backlog.
2- o I just made this issue it blocked and related this to #1988 I hope cherik can do it in currant sprint, what's your opinion?
3- I meant at the old form.

[aminlatifi]

All tests passed except:
1- Edit Milestone goes to old form (By milestone creator in his profile, or by the campaign owner when he/she wants to edit)
2- As a user, when I start a milestone, If any fields are required, the form wont show me the notification, or scroll to the exact required field. I put #1988 as separated but related issues.
3- I cannot remove any pictures.
@aminlatifi

1. We know, edit by new forms is not supported yet. It should be planned I guess.
2. You are right
3. In new form? or old one?

@MoeNick In new forms there is a delete button in bottom right corner

1- So I will create one issue in product backlog.
2- o I just made this issue it blocked and related this to #1988 I hope cherik can do it in currant sprint, what's your opinion?
3- I meant at the old form.

2- I guess it doesn't block this one, we can release this version with this issue. Let's assign it to @MohammadPCh, I hope he have bandwidth for it.
3- Old form will be replaced with these forms, so won't fix that.

[MoeNick]

I move

All tests passed except:
1- Edit Milestone goes to old form (By milestone creator in his profile, or by the campaign owner when he/she wants to edit)
2- As a user, when I start a milestone, If any fields are required, the form wont show me the notification, or scroll to the exact required field. I put #1988 as separated but related issues.
3- I cannot remove any pictures.
@aminlatifi

1. We know, edit by new forms is not supported yet. It should be planned I guess.
2. You are right
3. In new form? or old one?

@MoeNick In new forms there is a delete button in bottom right corner

1- So I will create one issue in product backlog.
2- o I just made this issue it blocked and related this to #1988 I hope cherik can do it in currant sprint, what's your opinion?
3- I meant at the old form.

2- I guess it doesn't block this one, we can release this version with this issue. Let's assign it to @MohammadPCh, I hope he have bandwidth for it.
3- Old form will be replaced with these forms, so won't fix that.

Let it be blocked Amin, it is kinda bug and a bad UX. Hope will merge with #1988 together.