Liquid Democracy is a non-profit organisation focused on the development of online democratic participation and decision-making tools. It´s currently working on a main software called Adhocracy adopted by several partners on a wide range of topics such as urban planning, participative budgeting, corporate internal organisation etc.

The aim of the project “E-Youth — Tools and Tips for Mobile and Digital Youth Participation in and across Europe” is to get more young people involved in political decision-making and increase their trust in European political institutions through an online platform called Opin.

The project has currently limited resources to make any initial research, A/B testing, structured Q/A and large focus groups. Therefore for some of the solutions adopted presented here I had to follow my professional instinct or to look for the most widely adopted designs among other popular products.

The team was composed of two PMs, two backend developers, one frontend developer and me.

I´ve joined the team when the prototype was just released and when there was an ongoing discussion about the roadmap but some major decisions had been already made, including decisions regarding the corporate identity.

I have participated since my first day to all scrum events and the product vision group where we defined the product roadmap and understood what the prior user stories were.

We maintained an updated backlog and we pokered user stories to define story points.

Designing for young adults
It can be a big challenge as the topic often carries many wrong assumptions. I´ve written a quick list of resources on the topic here:

https://medium.com/@dimarconicola/designing-for-young-adults-897624e9fecd#.njirjf82d

Please Note that Liquid Democracy was not in charge of the visual identity of the project which was provided by one of the the partners involved on this project.

As mentioned before we had to validate a prototype and to do user testing and user research without any budget. 

We used a free version of Marvel to share the click-dummy and collect contextual comment directly on the screen.

We also set up a questionnaire with google drive that we shared with our partners concerning general feeling about the website, coherence with the topic and some goal oriented question.

Defining short term achievable accessibility checklist to increase accessibility by 80%.

I had to set-up an efficient workflow to design and cooperate with developers, PMs and partners.

This is the final setup: Sketch / Craft / Marvel / Zeplin / Taiga / Trello

As a designer in LD, working at the same time in 2 different team and projects, I noticed that the fragmentation of the UX reflected the fragmentation in the teams.

One of the main reason why this had happened was the need to prototype new features across different projects in the shortest time possible without any cross-team meeting in between.

I came up with the Idea to abandon this one-shot project approach and to build instead a UI Kit for online participation, which includes components and patterns that is accessible to everyone, in order to increase consistency and efficiency and to create a shared vocabulary between designers and developers, which represented a huge gap that usually led to misunderstanding and slowed down the entire process.

In building a new design system for online participation we took our inspiration from the Atomic Design guidelines that suggests to structure your UI as a complex organisms: with molecules and atoms.

It also forced us to choose which applications (Photoshop or Illustrator or Sketch, etc.) we’d support and how we’d share files with one another.

I have extensive knowledge of most of Adobe products but I decided to give Sketch a try mainly because of its good integration with third party components.

It was incredibly smooth and I was fully productive after few hours. I´ve written a short article about my first experience with sketch here:

https://medium.theuxblog.com/my-first-week-with-sketch-dea2e75a93da#.bervhtplh

Moreover Sketch, as opposed to Photoshop, make designing well documented libraries much easier instead of grouping layers and export many file versions.

The Ui Kit is an ongoing project that we already used for the next big release of Opin website and will hopefully become the first Opensource UI Kit to prototype Online Participation in the next future.

The library is structured as follow:

They are the atoms of our world or else the smallest constituent element of our design system. One of the great advantage of using symbols, especially in the meaning that they have inside Sketch, is that the changes will spread across all components and pages where there is an occurrence of a symbol so that it will have a huge impact in terms of design consistency. 

I.e. a button is a symbol because the same element can be repeated unchanged in many components.

They are more complex objects, that give symbols a specific usage but still lack a context. I.e. a card is a component because shows various elements and has a specific meaning but it cannot be displayed outside a specific context.

It is the biggest element of our system and shows an aggregation of symbols and components in a clear context and a goal that is comprensibile for the users. I.e. the Organisation Profile