Aterrizaje visual de l’Escola Decidim

Proyecto de Design Thinking sobre Participación Ciudadana

Aquí tienes el enlace a la 1ª parte de este proyecto:

¿Participamos?

Design System

Fundamentos

Como ahora veréis, he construido un pequeño Design System para tener más control sobre todos los elementos, componentes y detalles de la plataforma. Este sistema de diseño empieza por los fundamentos como:

• Voice and tone
• Typography
• Color
• Styles
• Grid

Voice and Tone

Para Escola Decidim es muy importante definir antes de nada cual será nuestro estilo, nuestra voz y el tono.
La voz es la personalidad que se va a reflejar en nuestra manera de escribir, el tono nos ayudará a empatizar ya que trata de emociones, conectar con la User.

Voz

La voz de Escola Decidim será:

• Didáctico pero sencillo(no aleccionador)
• Simpático pero equilibrado (no caótico)

Estilo

Algunos elementos clave para escribir la voz de la plataforma:

• Evitar la jerga Escritura sencilla pero correcta
• Escritura positiva Utilizaré un lenguaje positivo en lugar de un lenguaje negativo.

Tipografía

Source Sans Pro, es la tipografía principal de nuestra plataforma, al igual que lo es en la plataforma Decidim, al investigar su origen, descubrí que fue la primera tipografía de código abierto de adobe, por lo tanto hay un concepto que la une con nuestra plataforma (de código abierto). Es también una tipografía con una legibilidad muy buena gracias a su contraste y a la altura de la X.

Color

Los 2 colores primários de la plataforma son:

El Azul (#0085FF) por ser un color con connotaciones relajación y concentración.

El Gris (#70818C), como color neutral para textos y elementos.

Color de acento
El Amarillo(#FFD028) ya que es un color con connotaciones de optimismo, alegría, entusiasmo, creatividad.

Podemos ver también colores semánticos y los colores que se han utilizado en las ilustraciones.

Styles

Algo muy importante a definir son los Styles, atributos como los rounded corners o las elevaciones. Es importante tener un control para aplicarlos como es debido en diferentes tamaños por ejemplo.

Brand

He creado un logotipo para dar consistencia y personalidad al prototipo de la plataforma.

Para el logo he utilizado la tipografía Nunito, ya que es una tipografía amable, fácil y accesible. Y he conservado la Source Sans Pro para la parte del logo que hace referencia a Decidim.

Prototipado

Para construir el prototipo he utilizado Figma, componetizando todos los elementos para agilizar y optimizar el proceso. Cada elemento (template, organism) está compuesto, construido con varios elementos (molecules, atoms), como explicaré ahora.

Componentes y Atomic Design

Para la organización de los componentes se ha utilizado Atomic Design, es un sistema de trabajo que se basa en la creación de elementos modulares sencillos para crear estructuras de información mucho más complejas.

Átomo > Molécula > Organismo > Template > Sistema

Esta organización de los componentes atomizados está en un documento llamado Master Components (assets):

A continuación en estas imágenes vemos algunos de los componentes documentados, descompuestos en su forma atómica.

Diseño visual de la plataforma (UI)

La plataforma está construida con una Grid de de 1200px y estructurada con 12 columnas.

Tenemos el Navbar con el menú principal en la parte superior del Header, con la propiedad Sticky para tenerlo presente al hacer Scroll. Está compuesto de dos partes, una contiene todo lo referente a registro, buscador, idiomas y logo. En la parte inferior encontramos el menú principal con las 5 secciones de la web.

Y ahora si, veamos las partes más importantes de la plataforma:

Home

En primer lugar tenemos la home, que es donde los usuarios podrán hacerse una primera idea de la estructura y de lo que podrán hacer en esta plataforma participativa.

Por ello, van a tener unas secciones inferiores donde se les da una introducción de las funcionalidades que van a encontrarse, y si les interesa pueden profundizar en la sección de ayuda.

Sección Ayuda

Esta sección es de vital importancia, ya que en ella deben hacerse una idea mas clara de como participar en los procesos que les propone la plataforma.

Siempre con el target en mente, simplificando y haciendo accesibles estos procesos ya que en su naturaleza son algo complejos.

Sección Millorem l’Escola

En el hero de estas secciones disponen de un poco más de ayuda para comprender la mecánica de en este caso Iniciativas en la Sección Millorem l’Escola.

Sección Participem

Al igual que la anterior en el hero explicamos un poco el proceso, ya que en este caso el nivel de complejidad sube un poco, se añaden fases y cada proceso participativo que abre la escuela tendrá unas características diferentes.

Es sumamente importante que comprendan que son procesos que cumplen fases, y que hay unas fases comunes que tienen fechas de realización concretas.

Prototipo

Aquí tenemos el prototipo con los flujos de las dos principales funcionalidades de la plataforma L’Escola Decidim, animados en Figma.

Narración

Empieza con el proceso de registro, en el que vemos el flujo que nos llevará al Hero de Home ya logueados, es ahí donde veremos que hay una constante intención de que los procesos se entiendan desde el principio, la ayuda siempre presente para que la user entienda los procesos que va encontrando en la web, en el Hero también vemos una imagen con las usuarias representadas en ella, y un CTA que invita a las users a registrarse o a loguearse si no lo están.

De ahí pasamos a la sección Millorem l’Escola, que es la funcionalidad que estará conectada con la plataforma Decidim Barcelona, es aquí donde vemos las cards con las propuestas/iniciativas de las alumnas y el proceso de creación de una propuesta.

La siguiente sección es la de Participem, es la funcionalidad que empieza y acaba en el centro escolar, en este caso vemos el proceso de entrar en un proceso participativo. Mencionar que hay una sección llamada Exits que es la sección de rendición de cuentas, donde se pueden ver los procesos implementados hasta el momento.

Y por último la sección de ayuda, que es donde encontrará la información necesaria para comprender la mecánica de la plataforma.

Futuribles

• Espacio para Forums online, para debatir sobre un tema en concreto o hacer asambleas online.
• Algo muy interesante sería crear el standard/Master de la plataforma para distribuirla por todos los municipios y Centros escolares.

Conclusiones

Mis conclusiones de este proyecto con que con esta plataforma ponemos a la user en el centro, damos voz a las personas que hasta ahora no la tenían,
integramos a las mas jóvenes en los procesos de participación ciudadana,
convertimos a los ciudadanos en algo así como UX, les hacemos pensar y aportar sus ideas, y ellas ven cómo estas se implementan.
Los hacemos partícipes de la sociedad, que su opinión cuenta, y que es escuchada.
Hemos llevado una plataforma que funciona con éxito a un público que no la tenía a su alcance, por lo tanto aumentamos la participación y la futura participación ciudadana, haciendo que las users hagan Learning by using.
Estamos enseñando y fomentando la cultura participativa.

¡Gracias por leer este articulo! en breve más.