ux ui

App para el movimiento social

mock up iphone app movimientos sociales

¿diseño de una app que ayude al movimiento social?

La importancia de las movilizaciones para conseguir mejoras para la comunidad en su conjunto es el punto de partida de este proyecto. El objetivo aspira a la búsqueda de la unión de los colectivos que quieren cambiar el mundo, que quieren mejorarlo. Que tienen argumentos con contenidos respaldados y necesitan un medio en el que se le pueda dar voz y mecanismos de auge. Por lo tanto, la idea trata de centrar sus bases en la educación e información, siendo de fácil acceso. Y la unificación de la información sobre manifestaciones, en una misma plataforma.

mock up app movimiento social
mockup desktop app movimientos sociales
mock up app manifestaciones

En la pantalla de sign in se puede hacer una previa selección de los movimientos sociales de interés para así ser añadidos de forma destacada posteriormente. En la sección de perfil busca dar protagonismo al usuario, centrándose en dar prestigio y reconocimiento a quién escribe además de servir como portfolio profesional. El menú está dividido en: comunidad, movimientos, comparte, tienda y manifestaciones. La sección de comunidad está dividida en tres feed diferentes. El general que es «conversación» recoge lo que se está hablando en el día a día, con gran variedad de temas. El segundo, «manifestaciones» se encuentra información específica relacionada con ello. En este caso, solo podrían publicar las organizaciones que las convocaran. En la tercera, «voluntariados», igualmente solo pudiendo participar ONGs con información determinada.

Esta sección está relacionada con «comparte». En la parte superior se encuentra un botón de cámara para tener un acceso directo en el caso de encontrarse en una manifestación u otra situación y tener que compartir los acontecimientos o injusticia social. Destaca la diferenciación entre «opinión» y «referenciado». En el caso de opinión en la sección de «comunidad» aparecerá en el feed con un fondo blanco. En cambio, al elegir «referenciado» se añade una sección en la que se requiere añadir la referencia en dónde se ha extraído dicha información. En este caso aparecerá con un fondo azul, con el fin de destacar frente a las opiniones.

En la sección «movimientos» encontramos categorizados los diferentes movimientos creados en dos secciones: los que sigue el usuario y otros. Al seleccionar un movimiento, se abre una nueva pantalla con información y contenido sobre dicho movimiento. Hay una breve descripción del movimiento y, posteriormente, diferentes categorías para saber de dónde queremos obtener más información. Dichas categorías son: libros, podcast, documentales, música, referencias, películas, etc. La idea gira en torno que al entrar en una sección de películas, aparezca una lista con películas relacionadas con dicho movimiento y la valoración por parte de los usuarios.

Las sección de «manifestaciones» pese a encontrarse en el último lugar del menú (debido a no ser de acceso diario), representan la parte distintiva y más importante de la app.

En primer lugar aparece un mapa con el recorrido de la manifestación o manifestaciones que se estén convocando en dicho momento. La pantalla tiene dos secciones, una con historias de los usuarios para compartir lo que está ocurriendo en dicha manifestación y un botón para encontrar a tus amigos. Al hacer clic en el botón que representa el calendario, aparece una lista de las siguientes convocatorias de las manifestaciones con una breve descripción y datos principales. Se destaca la información de quién va para así animar a los usuarios a ir. Al dar al botón de «quiero saber más» se abre toda la información detallada relacionada con dicha manifestación.

Metodología ux

design thinking

Se ha seguido la metodología de design thinking en 4 etapas: observar, sintetizar, idear y diseñar.

En la fase de observar, se ha realizado un desk research, netnografía, research questions mediante el Diagrama de Venn. También se realizó una encuesta, un esquema de benchmarking y un análisis DAFO en dicha etapa. En la segunda fase, en sintetizar se elaboró un user persona, un mapa de empatía, customer journey y matriz de necesidades.

En la tercera fase del design thinking, idear, se unificaron todos los contenidos recopilados de las fases anteriores y se han convergido en los findings and insights con el fin de conseguir soluciones. Se organizaron las ideas en clusters, además de la realización de una matriz de utilidad y viabilidad teniendo en cuenta el contexto actual. Con esas ideas que priorizaron, se elaboró un in-out, descartando las ideas fuera del objetivo actual. Se siguió una clasificación de MoSCoW en cuatro categorías: must, should, could, won’t. Por última instancia, en esta fase se elaboró una propuesta de valor y un esquema de business model canvas.

En la última y cuarta fase, de diseñar, se comenzó con la elaboración de un sitemap, seguido de un flowchart. Se elaboraron wireframes, moodboard, además de la elaboración del design system.

design thinking app movimiento social
design system

En el design system se ha elaborado la identidad, colores, tipografía, iconos, menú, botones, componentes, se ha testeado la accesibilidad de dichos elementos, además de uso de grid en cada pantalla.

Interacciones figma app movimiento social
wireframe app movimiento social
mock up app black lives matter

La idea va encaminada en lo que Daniel Kahneman describe como sesgo cognitivo el “efecto marco” por el que las preferencias de una persona ante un problema de decisión, dependen de cómo se presente este. Es decir, dependen del marco. Se ha seguido esa línea en el proyecto para conseguir el objetivo de asistir a las manifestaciones, mantenerse informado sobre las razones de los movimientos sociales y mantener activa la conversación en torno a dichos movimientos.

Más cosas sobre el proyecto:
Cliente:
Proyecto final de «Diseño de interfaces y experiencia de usuario (UX/UI)» en CEI: Escuela de Diseño y Marketing
Año:
2021
Herramientas utilizadas:

Figma, Miro, Whimsical, Infogram, Zeroheight, Youtube

favicon icr
Resumen de privacidad

Nuestra web utiliza cookies propias y de terceros para gestionar el portal, recabar información sobre la utilización del mismo y mejorar nuestros servicios. Puedes hacer clic en ACEPTAR para permitir el uso de cookies o ver la configuración de las cookies para ver información detallada y seleccionar qué tipo de cookies deseas aceptar o rechazar.