[Epic] Review of Budget Proposals - UX issues and bugs

[m-i-k-e]

This is an epic containing lots of points to be addressed.
This review is contained in two rather long videos:

Part one: https://www.loom.com/share/6a82e53cc3a34a1081a2214f44c4becc?sid=3dfb0f3b-e60e-4f35-a61d-eb321c8b9edb. (41 minutes)

Part two: https://www.loom.com/share/656648e7e9094f949127db2a14444fc7?sid=f4b06a86-887b-40e1-951a-ca8dd38330f5. (10 minutes)

I've summarised and analysed the transcript to parse out the issues so you don't have to listen to the entire videos.

[m-i-k-e]

Navigation & Contextual Clarity

• The wallet verification screen currently appears disconnected from the overall experience.

  • This should be a modal, and it needs a more concise explanation — e.g., “Verify your wallet address to confirm your eligibility” — to help users understand what’s happening.
  • It's not clear to me what "verifying your identity using your wallet" means. I'm not verifying my identity at all, I'm actually just verifying my wallet. And what is actually happening? I'm already connected with my wallet. So why does this need to happen?
  • Jump to video

• Navigation elements like “Back to Budget Discussion” can be confusing or are inconsistent with Material Design standards.

  • We can have a simpler navigation link: Replace with a simple back arrow and label like “← Budget Proposals” to align with common UI conventions and keep terminology consistent.

• After viewing a proposal and clicking "back," filters are lost - the page reverts to the default sort order, instead of the one chosen by the user.

  • The site must preserve filter state on return so users retain their chose context.

[m-i-k-e]

Search & Filtering

• The filter UI looks like a combo box but behaves like a toggle.

  • Use a dropdown pattern already used in GovTool for consistency. Jump to video
  • This is the sort/filter design in Figma:

• There's no indicator when a filter is active. This is a bug and needs to be fixed

  • The new filter design shows active filters a pills Jump to video
  • This is the sort/filter design in Figma

• Searching by category name (e.g., “Research”) doesn’t return expected results. When I type in a category name, as a search parameter, it's reasonable to expect that I see all things in that category.

  • Expand search indexing to include categories and metadata fields.

• There’s no way to sort proposals by fields like budget, comments, or date.

  • We need to sort proposals on other things besides .

[m-i-k-e]

Proposal Form

Form Experience

• Form instructions

  • It is extremely difficult or impossible to understand what the form field needs to have in it because the instructions are merged with the form box. This is not acceptable and must be changed.
  • Use the form design from the new design system, using the wizard pattern here: Link to Figma
  • Do not jumble the form fields together, use proper spacing, and do not put the instructions for the form inside the textbox.
  • Jump to video

• Sub-optimal use of dropdown elements inline in the form

  • Please watch video as this is easier to see than explain. However, the use of the dropdown elements in the form is very hard to use. In this case, a different element such as a radio button would be much better. This is a P0 for usability and must be fixed.
  • Jump to video

• Design for Proposal form wizard exists in Design System

  • We have a new design for the form/flow pages in the Design System. This would improve the form UX a lot, and will match with the evolving design of GovTool.
  • Link to Figma

• Proposal Form steps pages should not have "Show all" link

  • This doesn't make sense in context. It should be removed, and the new design used.

• Proposal form text needs better and clear instructions

  • All instructions on the form need editing/rewriting for clarity and brevity. For example, we ask users to start filling out the form without telling them what a budget proposal actually is.
    Jump to video

• The label “Submission lead” is confusing.

  • Since this is the form 'writer', it can be renamed to “Submitter” or “Your Name”.

• Asking for nationality is probably unnecessary and potentially sensitive.

  • I strongly suggest we don't need this.

• General form UX

  • It's unclear how many sections the form includes.
    • Add a progress indicator or step counter. - If a stepper is used, name out the steps for the user so they can understand how much work is needed.
  • Consider if the form would work as one page.

• The form doesn’t visually distinguish between submitter and beneficiary fields.

  • Introduce section headers or spacing so it's clear that they are different.
  • Put proposer first before Beneficiary.
  • "Please provide your current contact details field (Section 2)
    • The type of details is not clear
    • The words instructing the user should not be in the box (this should not be done in general, but in this case, they don't fit in the box.
    • This needs more thinking about as to what the user needs to provide, and how to ask them
    • I assume that this is all going into one database field. this will be very messy with spacing, etc. Video
    • Section 3: "Does the proposal align to the Product Roadmap..." There isn't a link to a product roadmap to assist the user here. Also, what does this mean? What if the proposal doesn't align to a goal, can the proposal still be submitted?
      • The link that is provided has a page heading of "Scaling the L1 Engine". This cannot be the correct page for this information. Maybe the things listed here are the product goals and imply a roadmap. To fix this, and if these are correct, we can simply create another page in the guides that is titled "Product Roadmap and Goals", and point the users there.
    • The question should be 'Which Product Roadmap Goals does this proposal align with?', instead of the current one, which is a yes/no question.
    • "If possible, provide evidence..." Would be better worded if it read: "Please provide evidence of wider community involvement" (marked optional) Video

• The save draft UX needs reworking.

  • There are a lot of simple mistakes on the Drafts page see video

  • There is no access to the drafts page, but a hidden one

  • The UI of the drafts page is very awkward, with instructions to the user in huge type, and asking the user to "Decide if they want..." We don't need to tell the users to decide, that's what buttons and context are for.

  • We need a "My Drafts" section, linked to the main page

  • We also need a way of managing/deleting the drafts

  • Redirect to a “My Drafts” view or show a confirmation modal.

  • Use a data table or more compact cards on this page

  • Remove the word "Unfinished" from the drafts page

  • "Show all" button makes no sense unless there are hidden drafts

  • "Not submitted" as a status can be removed, as by definition, all drafts are not submitted

  • "Start editing" should be "Continue editing"

  • Do not use the horizontal paginated scroll for cards (this has been deprecated and is not in the new Design System)

  • Jump to video

  • Section 4

    • First field: Would be shorter to just say "Proposal name"
    • Second field: Can say "Description" - Is this a duplicate of the Problem statement/ Proposal Benefit fields on Section 3? It seems very like it. If it's not, then perhaps this description belongs at the top of Section 3?
    • Third field "Dependencies" - I found that I didn't understand what this meant. If this is a required field, then GovTool needs to explain this further, perhaps with a guide entry?
    • "What tangible milestones or outcomes are to be delivered and what will the community ultimately receive" - I don't understand what 'milestones' means. Are we asking the proposer to define their own milestones? This needs to be clearer. Also, this is two questions, and "what will the community ultimately receive?" is a very good question. I think that "what will the community ultimately receive" should be a separate question. We could ask the proposers for user stories here. This would be of great benefit in assessing the proposal, as essentially user stories are a shorthand to the heart of the proposal.
    • "Please provide estimates of team..." This could be more informative if the applicant would provide actual names, levels of experience, qualifications, etc of team members". Also this text mentions "deliverables", and references the box above. The terminology needs to match, so a small text change to the box above or this text would do that. (box above does not mention 'deliverables')
    • The last question: "Please provide previous experience..." is good. It makes me think that most proposals for money in government tenders ask for references. I would propose that this might be a good thing as well?
    • "Contracting: Please describe..." Should say "Please choose your preferred contractural type"
    • When choosing "other in the point above, the text box says "Please describe what you have in mind". This should say "Please describe your preferred contract method"
    • Form submission/error checking not working on this page. When I try to submit the form, I can't (submit button is greyed out) Vireo. The problem is that I didn't fill out one field - but didn't notice it. Some sort of error checking/notification needs to be implemented. Either in line or on pressing of the submit button.
    • After the form is submitted, there is a modal. We should use the modals provided in the design system.
    • 

  • Section 5

    • Generally, this page needs simplification. The simplest way that we could make it would be for a user to enter a USD amount, and we can look up and display the amount in ADA.
    • The second line where a user selects another currency and also an amount will conflict 100% of the time with the first two fields. I'm not sure what is intended here, but it should be as the point above.
    • Video
    • ADA amount - and all fields don't need stepper
    • Conversion rate needs to be looked up, not entered by user
    • Cost breakdown - needs an example, also only needs one currency, which I propose is USD, as it doesn't fluctuate like Ada. If we ask for a breakdown in both currencies, then it's tied to whatever exchange rate that the user selects, and will invariable vary.
    • We could add more context to the cost breakdown area by looking at other, mature forms for software development, and making this into multiple fields. There could be fields for development, design, project management, licensing, travel, equipment, cloud costs, and misc. fields. This would give us a consistent way of comparing costs across different proposals and also enforce data quality on the proposer.

  • Section 6

    • Video
    • Section 6 does not make sense to me. I thought the proposal was what I was creating in the form. Maybe it should just say link any supporting information.
    • The URL fields should not require 'https://' they should just accept for example: microsoft.com, etc.

  • Section 7

    • Video
    • I was completely surprised by this. What is "Administration and Auditing"? This needs explanation. I can't write it unless I get more information.
    • One thing that I am wondering: Are Administration and Auditing the same thing? I understand what Auditing is, but not Administration. Also, what does the Administrator do? Perhaps this information should be supplied up front, on Section 1.
    • Further, this info definitely needs a guide page, as there's a lot to get here. Also, is there a cost to the proposer or the proposal? It's not clear. However, it would seem that all these services can't be for free.
    • I chose "No" in the first box, and the second box, which asked me to explain my choice, has some text about DReps in it. I further cannot understand why DReps are now involved. This has to be re-ux-ed and reworded.
    • 
    • The instructions are so long when they're merged into the top of the box that a user can't read them.

  • Submission

    • Video
    • This page asks me to review the submission before lodging my proposal. The problem is that there is no "Edit" button, and I can only determine that editing is done by the laborious process of multiple back-button pressing. This is not ideal. I think that this form is not too long to have on one page, and maybe that is the answer to the submission, or that upon editing, a new one-page version could appear, and the user could edit this in place.

[m-i-k-e]

Content & Language

• Some phrases are verbose or unclear, like “Submit proposal for Cardano budget.”

  • The entire text of the submission proposal needs to be looked at for clarity, brevity and grammar.

• Guidance text is sometimes too small or lacks helpful context.

  • Improve font size and add brief examples or tooltips.

• Some questions mix tones or are phrased ambiguously.

  • Use consistent, purpose-driven language.

• There’s a repeated use of vague terms like “proposal benefits” and “proposal description.”

  • Group similar content fields or rephrase with clearer distinctions.

Visual Design & Layout

• Some forms inherit background styling that hurts contrast and readability.

  • Set form fields against a white or light background.

• Tiny fonts and tight spacing make sections harder to read.

  • Apply consistent typographic scale and padding.

• “Show all” and “show less” feel unnecessary in some views.

  • Render these controls only when relevant.

• The “Continue” button at the bottom of the form can be unresponsive or ambiguous.

  • Ensure clear visual feedback and anchor it to the viewport.

User Identity & Metadata

• The user’s identity is not shown clearly during proposal creation.

  • Add a “Submitting as [username]” label at the top of the form.

• **Username (logged in user) is missing from interface entirely. **

• There is a Figma for this, as well as a github issue: Make username visible #3341

• Current epoch and date are not displayed but are important for governance timelines.

  • Display current epoch and date at the top of relevant views.

Help & Guidance

• There are no inline links to guidance or documentation for filling out proposals.
  • Include contextual help links and a dedicated “Guides” section.

[m-i-k-e]

Proposal 'home' and detail pages

Proposal Cards

• Proposal cards are rich but don’t scale well. There are too many cards for this to work.
• This is broken. we need to fix it. We can use the datatable design in the new design system. This needs to replace the cards Link to Data Table component in new design system
• Jump to video

Proposal detail pages

• The visual hierarchy is off — titles appear smaller than body text.

  • This can be remedied by using the style as defined in new design system. An example here: Figma link

• UI elements like share icons or comment counts feel visually unbalanced.

  • Group metadata in a compact section under the card or inside a tooltip.

• Proposer's username needs label on detail page.

  • We need a "Proposed by: <@username>". This is also an important field for the datatable view.

[m-i-k-e]

Most important changes in order of importance (in progress)

1. Fix the form layouts so that:

• Questions are clear and well written and use consistent terminology and voice.
• Options are easy to select (radio buttons instead of combo boxes)
• Hierarchy of information is correct (currently type sizes vary randomly)
• Instructions are not in the boxes, but above them.
• The errors are clear and show the users what they need to correct

2. Fix UX for draft proposals:

• A better way to see draft proposals - i.e. a link to the user's draft proposals on the Budget page
• Management of draft proposals:
  • Restart a draft proposal
  • Delete a draft proposal
  • Better wording and instructions (in guides)

3. Upgrade search experience

• Use Design System search designs for new search:
  • Shows which filter is applied
  • Shows the sort order
  • Add more sort orders:
    • By category
    • By cost
    • By name
  • Search for category name (i.e. a search for "Core" should show up all the Core proposals)

4. Important UX fixes

• Fix type hierarchy and layout on proposal page. Follow existing GovTool design patterns.
• Add a feature to show a user their proposals - 'as a proposer of at least one budget proposal, I want to be able to easily and quickly find my own proposals so that I can see comments, etc on them'
• Make editing an existing proposal easier/possible (one page editing?)
• Always show username in interface - users need to know that they're signed in and under what name (they could have several)
• Write guide entries to tell people how to create proposals and comment on them
• have proper type hierarchy on proposal detail pages (the header text is smaller than the sub-header text

5. Nice to have, but still important

• Drop "Read More" links - show entire text
• Fix UX around Polls and comments - polls are not in correct position, and information is confusing and hidden.