Consultations Participant Experience

[xabier]

This issue discusses the overall participant experience (PX) of the consultation user-journey:

• Integration of Consultations in main home page:
  • Banner to announce the event
  • New section with consultation cards (like assemblies or processes)
• Consultations home page
• Consultation specific page with components and internal structure

A more detailed functional description can be found here (in Spanish): https://meta.decidim.barcelona/processes/roadmap/f/123/results/6933

[htmlboy]

Hi everyone!

Please find attached a PDF with a first draft/proposal of what the new Consultations page(s) would look like.

In this sketch I'm proposing some styling differences to set Consultations apart from the already known processes and proposals. Still to be defined: "Entidades interesadas" page, and the Decidim Home banners and details referencing the Consultations publishing and voting.

I'd like to have some feedback from the UX team (@decidim/lot-px), since they're already working in a general UX review. Would this design fit in your current plans? Please let me know what you think.

Also, any feedback from @decidim/developers would be more than welcome!

Thanks!

Estructura multiconsulta.pdf

[xabier]

Nice work @htmlboy !

[ailopezglez]

Thank you very much @htmlboy In the pdf, we see the consultations detail , but we would still need a home of consultations where can see the available consultations list (past and active) What do you think?

[htmlboy]

@ailopezglez Thanks, that's a good point! Could several consultations be active at the same time?

• If that's a regular case, it might require a disambiguation page (home of consultations).
• If it's a rare case, this disambiguation page could be active only if there are 2 ongoing consultations.
• If it's not the case, I'd leave the active consultation as the consultations home page, and add a link to "see past consultations" at the bottom of the same page.

Thoughts?

[jsperezg]

@htmlboy , @xabier

I've something that do not fits with the current design of Decidim layouts:

If you check the mock-up in page 5 you will see that the consultation data appears under 'Informacion' using the same icon that is currently used for the pages feature.

Decidim force us as developers to define a title and an icon for it. This mockup should be defined accordingly in order to get the required text and the icon for it.

[jsperezg]

@htmlboy @xabier Additionally, consider that each feature defines one and only one entry for the menu. IMHO we should find a way to merge Información and Ficha técnica.

I agree that having the possibility of defining several menu entries per feature would be nice but having it for this development will imply changes in the core for sure. We need to consider if it is feasible according to the deadlines that we have.

[ailopezglez]

@htmlboy Maybe, a possible solution is to create a multi-consultations home that will only be shown in case there are two active. If there is only one, show de multi-consultant landing directly. In this case, the question is how important it is to see the past multi-consultations. If there is only one multi-consultation and we go to landing multi-consultation, will not be able to access the past multi-consultations I also have a question about adhesions in multi-consultations. In initiatives there is a section to see the entities that have adhered. In multi-consultation it does not exist. I do not know if this section should exist

[htmlboy]

@jsperezg Hi, thanks for your feedback!

The main idea of separating the "ficha técnica" from the "home information" is to declutter it, so the user gets the main idea with a quick scan, while keeping transparency of data and all the extended information available.

That said, it might make sense to have a different icon for this kind of extended information. Maybe @decidim/lot-px have some thoughts regarding this?

Cheers!

[htmlboy]

@ailopezglez Yes, my understanding is that two active consultations will be a rare case, so we could prepare a disambiguation page to show up only in that case. For the regular case (only one active consultation), I'd add a link at the bottom of the active consultation to "see past consultations" to keep transparency of data.

As for the adhesions, I have no information regarding they should exist or not, but it'd make sense to have them under the "ficha técnica" section, which can be expanded as much as needed to fulfil these requirements.

Thanks!

[ailopezglez]

@htmlboy @xabier In Decidim there aren't predefined scopes as a municipality or district, they are created from the admin. In addition, there aren't priorities or difference levels in category scope. (Attached example images.) In the mockup the municipal consultations have more relevance than district, for example. I think that we must think how to fit these two concepts.

[htmlboy]

@ailopezglez The visual difference between City and District consultation was part of the initial requests for this mockup… @xabier, what should we do in this case?

[htmlboy]

Hi everyone! Please find attached a new version of the Consultations proposal, reviewed with the feedback I got online and offline. I will be coding the HTML for these elements during the next week, but please feel free to comment on it, I'll probably be able to add any feedback directly to the prototype.

Thanks!

Estructura multiconsulta v2.pdf

[xabier]

Great job @htmlboy !

Four comments:

• The cards for "Entidades interesadas" be the same as the current cards for Debates because we are going to call this feature/component and cannot associate two different looks to the same component. The debate-component is under redesign now so we can take your design for it but be aware that it needs to be usefull for all debates.

• For consistency and simplicy with the rest of the site should we not have the right-filtering menu of the display of the Debate and Meeting cards?

• I am also worried we are creating a new type of component for the "Where to vote" locations. This is beyong the contract of software developers and it also introduces a new type of Meeting component on Decidim. Not sure how to solve this. Easy solution: leave current Meeting display.

• Regarding the banner: since the main home image (with the call to action button) is configurable, it seems to me that the most evident option is to change the image and the call-to-action button during the consultation period. Not sure how this might clash with the banner just bellow. I don't have a strong opinion on this.

[xabier]

@ailopezglez The visual difference between City and District consultation was part of the initial requests for this mockup… @xabier, what should we do in this case?

The solution is to be able to highlight one scope as more visible and leave the rest as secondary. This way we can satisfy the need for Barcelona to highlight city-scale questions and leave district-level questions as secondary. @ailopezglez is this good?

[htmlboy]

@xabier Hi, thanks for the feedback! Here's some… feedback to the feedback :-D

• The cards for "Entidades interesadas" be the same as the current cards for Debates because we are going to call this feature/component and cannot associate two different looks to the same component. The debate-component is under redesign now so we can take your design for it but be aware that it needs to be usefull for all debates.

Noted!

• For consistency and simplicy with the rest of the site should we not have the right-filtering menu of the display of the Debate and Meeting cards?

That's completely optional, the current HTML & CSS allow both options. I'd add it only if there are enough elements and the filtering makes sense.

• I am also worried we are creating a new type of component for the "Where to vote" locations. This is beyong the contract of software developers and it also introduces a new type of Meeting component on Decidim. Not sure how to solve this. Easy solution: leave current Meeting display.

Actually, the "where to vote" is the same meeting component with fewer information elements. Would this format still be a problem?

• Regarding the banner: since the main home image (with the call to action button) is configurable, it seems to me that the most evident option is to change the image and the call-to-action button during the consultation period. Not sure how this might clash with the banner just bellow. I don't have a strong opinion on this.

That's an interesting option! :-) Maybe this is something that should be consulted to the UX team, since it affects critical areas of the website?

[xabier]

@htmlboy

That's completely optional, the current HTML & CSS allow both options. I'd add it only if there are enough elements and the filtering makes sense.

We cannot anticipate the number of debates and meetings, unless the feature is configurable from the admin panel I would prefer to have the filtering panel active: this would also allow to use the filtering of categories to check which "entidades interesadas" are against or in favour of the Consultation

Actually, the "where to vote" is the same meeting component with fewer information elements. Would this format still be a problem?

Maybe it is not a hard problem.

Regarding the banner: That's an interesting option! :-) Maybe this is something that should be consulted to the UX team, since it affects critical areas of the website?

In a meeting today with the developer team we decided to keep this special banner, then City Council will decide whether to use it or not, but we thought it was a good feature to add to the platform, and different organization might use it differently.

@decidim/lot-px can you have a look at @htmlboy 's proposal?

[javierarce]

Nice work, @htmlboy! I only have some very minor comments regarding the proposal:

If the date in the banner is not a link, I would use a different color, since red texts are used to indicate links throughout the website:

I would also make the dark grey area to be as high as the banner to maintain the look and feel of the ones that we already have in the process section (this is more a matter of personal preference than a hard opinion).

In the cards for each consultation I would try to find a different solution for the placement of the button over the art in the background. I think in some cases they could be a little hard to read.

I would make the hashtag green and link it with twitter, like it's currently happening in the processes.

Regarding the icons for "ficha técnica"… we can come up with something different if you want (we already have the task to review and rethink some of the new icons).

In the full-width banner, I would try to find a better way to indicate when the voting period is open. Maybe we could put the information next to the title and description and out of the button?

Finally, I have a doubt regarding the placement of the vote button once the voting it's enabled. Will it appear in the same position as it is now the disabled one?

[xabier]

@javierarce thanks for your feedback :+1:

[htmlboy]

@javierarce Awesome, thank you very much for the feedback! I'll make these changes directly in the HTML prototype. As for this question:

Finally, I have a doubt regarding the placement of the vote button once the voting it's enabled. Will it appear in the same position as it is now the disabled one?

I think it makes sense… do you see any potential problem?

[htmlboy]

@xabier

We cannot anticipate the number of debates and meetings, unless the feature is configurable from the admin panel I would prefer to have the filtering panel active: this would also allow to use the filtering of categories to check which "entidades interesadas" are against or in favour of the Consultation

OK! Since both patterns will be available, it's an integration decision then :-)

[javierarce]

I think it makes sense… do you see any potential problem?

No, I think the placement by itself is fine and make sense with the design you propose… but we are currently placing the main call to actions of the page in the top of the right column, so I was wondering if there would be a way to place the button in the same position while maintaining the new changes that you propose.

One idea could be to move the secondary navigation ("Información, ficha técnica, encuentros, etc.") on top of the question. Here's a super quick and dirty mockup (sorry) of my idea:

I think your design makes sense, so take all of this just as a suggestion (my idea is probably far from ideal).

[htmlboy]

@javierarce oh, I see your point! But the whole idea of the Consultations layout was to break a bit with the Processes layout (meaning: "users, this is whole new thing!"), and focusing mostly in the question and the main action… I'm a bit worried that if we make it close, but not exactly like the Processes, it might become a little confusing. Also, in contrast with the Processes page, the navigation tabs have a lot less importance than in the Processes (they DO have importance, obviously, don't get me wrong ;-) ).

As part of the UX team, what would be your decision? Does this proposal fit in the current UX review of the interface?

[javierarce]

but the whole idea of the Consultations layout was to break a bit with the Processes layout

Ok, if that's the idea I'm ok with your decision (plus I also see your concern with having a slightly different interface)

So +1 for me.

[htmlboy]

@javierarce thanks for the support! :-)

[jsperezg]

@htmlboy @xabier I think that the functionality for voting is incomplete according to the current mock-ups. IMHO we should add the overall supports collected somewere in the UI. What do you think?

[xabier]

@htmlboy @xabier I think that the functionality for voting is incomplete according to the current mock-ups. IMHO we should add the overall supports collected somewere in the UI. What do you think?

Good point @jsperezg here is how I think we need to proceed:

1. We have to operate as if voting was the support button/functionality, with all the features and configuration options it has for proposals. Overall this is going to be the most extended use-case, because contracting a eVoting system as SaaS is very expensive and technically complex.
2. We need to make possible to change this from the admin panel so that when a voting SaaS is used the regular proposal-support system is substituted by another system (that probably brings you to an iframe or redirects to a voting server)

Does this make sense?