In autumn of this year we will start working on the redesign of the interface of Decidim. We invite the Metadecidim community to join this session, get to know the firsts drafts we’ve been working with and give your valuable feedback.

(This session will be held in English)
Central European Time

📺 Watch the video of the meeting:

Meeting report

Presentation of proposals

👨🏼‍🏫 Presentation

👀 Demo: http://decidim-design.herokuapp.com/public

4 questions for the debate:

• Are these problems correctly identified?
• Are these problems correctly addressed?
• What other use cases are not addressed in this proposal?
• What other major areas/problems would you address next?

Group work

GROUP 1

Are these problems correctly identified?

Hal (Japan): I think these problems are identified well. Especially the responsive design is very important because more than half users are using smartphones in Japan.

I like the incremental approach and thought given to upgrade process of existing instances

Are these problems correctly addressed?

Seems so, to me. But I haven't deployed a live instance yet with real users

What other use cases are not addressed in this proposal?

Accessibility of the platform - language translation, visual impairments, etc. 

What other major areas/problems would you address next?

These sample contents should be more real text. (and images)

Accessibility issues are important.

Users with screen readers have issues reading the UI. There were also contrast issues (at least in NYC). 

GROUP 2

Are these problems correctly identified?

Good diagnosis.

Are these problems correctly addressed?

No proposal on harmonize the buttons

What other use cases are not addressed in this proposal?

The number of tabs (or double menu), the map interface

We don't have an information hierarchy strategy for mobile. We should reduce the amount of information.

Are there any other ways to solve these problems?

What other major areas/problems would you address next?

Feedback on the proposal

Cards

• Paulina : Process origin is not really visible. Looked better when it was smaller. Prefered the older version. 
• Klaar : Meeting card, afraid that if that it'll be too long if the whole description. Afraid that people won't understand that you need to click through to get the details.
• Virgile : they need to be clear that they can be clicked through. More differentiation between the cards.

Filters

All: huge improvement!

Process

Virgile : A lot of feedback saying that Hiding information about phases is not very appreciated. I would have a block below the description for the steps and the block could be unfolded by the user. So you don't have a separate page. Detach the steps in 2 ways: leave the current step and the CTA, and the rest of information of the steps can be in the block.

Process technical data

• Klaar: the suggested solution makes the problem a bit worse. Maybe instead of adding a new item menu it could be hidden under the information icon. The main menu should be as short as possible (4 or 5 tabs max).
• Virgile: Maybe folding the documents in the homepage would be better. Most people don't have a problem scrolling down. If it gets too crowded we could find a way to fold them. Let's take into account the mobile strategy. Generally, we could hide a lot of info into foldable menus that users
• Pauline : Toggle for related documents is a great idea.Maybe use folders for that. Thinking about the right sidebar that is not very used, we have a lot of blank space.

GROUP 3

Are these problems correctly identified?

• Cards
• Question: will you be able to add images to meetings?
• We like that top is "cleaned up" -> leads to more clarity. 
• Process Pages
• The menu bar could be useful to improve guidance of participants through process. 
• Francesco liked where the technical data was previously
• Filters: great, that filters will take less space - more space for main content.
• Expected
• about how participants are guided through processes on a more fundamental level
• when participants access the landing page, it is not clear on what to do
• Main navigation menu is often modified in practice, so it should be addressed

Are these problems correctly addressed?

• General agreement that everything presented was a welcome improvement
• Cards
• the fact you can click on cards anywhere is nice
• Filters
• seems like an improvement
• Process page header being much cleaner is good

What other use cases are not addressed in this proposal?

• Cards
• will you be able to add images to meetings
• we didn't see what voting would look like on cards
• Process page
• The sub menu bar is not prominent enough
• For ordinary citizens, it needs to be more dominant
• the steps are now where the technical data use to be
• Does lowering it make it less prominent?
• Customization of navigation bars
• maybe do a hamburger side menu

What other major areas/problems would you address next?

• about how participants are guided through processes on a more fundamental level
• when participants access the landing page, it is not clear on what to do
• Main navigation menu is often modified in practice, so it should be addressed
• customizing invitational emails to private spaces
• allow images to be resized - example the logo is often to small on the homepage
• collaborative text work splits it up into many proposals, which makes the landing page cluttered with hundreds of proposals from one collaborative text (option of hiding them)
• being able to customize what shows up on the process landing page

GROUP 4

What other major areas/problems would you address next?

• Maps
• Hierarchy of information
• The forms used by the user to input data can be unneededly complicated

Looking at the design elements:

Cards:

• Good with pictures
• The number of supports is now quite small and in grey
• The author of the proposal is almost invisible, it's really important to understand that there are people behind the proposals
• There is no CTA button on the process card and it's a shame. It was really useful to make the user dive in the current step of the process
• There is no information about the number of people following on a card anymore. Not sure if this is good or not. It should be visible when supports are inactive
• Follows aggregate comments and supports in a way so this can be an interesting metrics

Filters:

• Really glad with the redesign
• Before, the mobile version was very confusing with a Filter button which was often missed by users
• It is really good that the Filter block is now more visible, split in 3 parts (search field, filters, filter by status)
• It's a big change that you can't choose proposals with different status anymore (Accepted, Evaluating, Unanswered)
• Does that also mean that the default mode (All) will now include the Rejected proposals as well?
• We could have a sorting option to show the most followed proposals (could be called most active)
• There should be a really easy way to find my own proposals (it could maybe include my organisation's proposals as well?)
• The filter items (Eixample, Ajuntament on the mockup) could have different colours based on their nature (category, area, source...) so they are easy to differentiate 

In general: we should facilitate user's usability: have an easy access to your own profile (my proposals...) 

Process landing page:

• It's good that the banner is not behind the process title anymore
• The red letters on the top menu are hard to identify as buttons or links
• The navbar menu items are still too close to each other and not really readable. We are using emojis to make them clearer but a lot could be done in the standard design
• Would need a radical change
• The timeline is lower and didn't get bigger. It should get a bigger place as it's so important for the user to understand where they are in the process
• The CTA button (also on the timeline card) got lower as well, it should be bigger and higher up
• Next to each component's title, there could be a CTA button (New proposal, Vote...)

Process technical data:

• Agree that this information is not important enough to warrant a whole tab. What if only a field is filled, will it take up a whole new tab? Admins will end up not using it at all
• Also the name "Technical data" will be confusing for users, they will not understand that it is technical data of the process

(it was not completely clear how the problem of contrast between images and text is solved: is it only for the process landing page that they are "separated" now?)

GROUP 5

Are these problems correctly identified?

• We like to view the card "type" on top of it (ie: "PROPOSAL"). It should be used in the other types as well.
• Great job with statistics

Are these problems correctly addressed?

• The process phases card should be visible in all the components of the process (including the technical data page)
• It is really useful to have the action button in the initiatives cards to sign them, as well as other cards that have a clear "Call to action"

What other use cases are not addressed in this proposal?

• Make it easier to customize styles for a Decidim instance, improve documentation, Themes repository?
• Improve the UI and UX guidelines for developers for creating new content (which cards to use and in which cases), and make maintainers request developers to follow the guidelines in order for their PRs to be merged.
• Responsiveness of header and footer. Especially important to fix the "tabs problem", now are clipped if there's to many and the viewport of the browser is small but not too small.

Are there any other ways to solve these problems?

• Enable participants to either upload an image or choose an icon for resources that display in cards (such as Proposals)

What other major areas/problems would you address next?

• Rethink some UX journeys (for instance, joining meetings might be confusing). 
• Improve the organization, structure and documentation of the SASS codebase. Make it easy for developers to create new themes.
• Admin should be improved too.
• Conferences is an important place and should be taken into consideration too (main page, programme)
• Maybe add a button to join each meeting in the meeting programme? Or in the meeting card