Fundada en 2020, Earth Love United (ELU) es una organización internacional sin fines de lucro con sede en Nigeria dedicada a crear conciencia sobre los problemas relacionados con el clima. Creen un público informado es esencial para generar un impacto ambiental positivo. Si bien abogan por soluciones climáticas, creen firmemente que la presencia en línea apoyará significativamente el logro de su objetivo. Para ello, invirtieron en soluciones a través de campañas en las redes sociales, podcasts, boletines informativos y el libro de su fundador, The Green Energy Boom. El equipo de Earth Love United nos ha pedido a nosotros, diseñadores de UX/UI del Grupo Guac, que nos unamos a ellos en este proyecto.
Earth Love United está particularmente interesada en involucrar a los jóvenes en la lucha por la justicia climática. Por eso, quieren conectar a personas que comparten valores similares. Para hacerlo, comenzaron a trabajar en una aplicación móvil que combina características de otras plataformas de redes sociales como Facebook e Instagram y aplicaciones de citas como Tinder y Bumble para crear su aplicación.
1. Investigación y análisis de la plataforma existente, utilizando las 10 reglas heurísticas de uso de Internet de Jakob Nielsen y descubriendo microinteracciones.
2. Comience con la iteración, utilizando como base el trabajo de diseño del equipo anterior y la nueva propuesta de nuestro equipo. Luego diseñamos maquetas de alta fidelidad para la aprobación del cliente.
3. Probando con su público objetivo, la generación Z (hasta 24 años), para recopilar comentarios.
4. Entrega final con modificaciones que se realizaron con los comentarios recopilados.
Habían realizado trabajos previos por un grupo de diseñadores y necesitaban ayuda adicional para expandir su proyecto. Mi equipo y yo fuimos responsables de hacer un análisis actual de su aplicación móvil de redes sociales y preparación de un producto mínimo viable (MVP) con los cambios apropiados para el desarrollo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Enean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.png)
Empezamos con un sesión de debate entre uno de los diseñadores anteriores que trabajaron en este proyecto y el cliente para obtener todos los comentarios e información necesario para planificar los próximos pasos y hacer una lluvia de ideas. Finalmente, se nos ocurrieron los puntos principales que mejorarían la experiencia del usuario.
Las principales características que faltaban eran:
-Historias.
-Sección de publicaciones y comentarios con opción para compartir.
-Vídeos cortos como TikTok y YouTube.
-Sección de chat como cualquier otra plataforma social.
-Un área de búsqueda (personas y temas).
- Potencialmente utilizando el morfismo vítreo.
La aplicación contiene cinco rutas rojas principales (inicio, conexión, publicación, bandeja de entrada y perfil), cada una con un propósito específico que, en última instancia, se parecerá a otras plataformas de redes sociales y, por lo tanto, atraerá al usuario. Al realizar una auditoría global, obtuvimos una imagen decente de cómo interactuarán los usuarios con la aplicación y el contenido de alto valor que se muestra.
Las microinteracciones son esenciales para la funcionalidad de una aplicación, proporcionar comentarios instantáneos y relevantes acerca de una acción completada y ayudan a los usuarios a dirigir su atención hacia donde debe estar. Teniendo esto en cuenta, basándonos en el diseño anterior, pudimos explorar las posibles microinteracciones que no se crearon y cómo deberían comportarse una vez implementadas.
El Evaluación heurística es una parte esencial del diseño de un gran producto con el que los usuarios puedan interactuar fácilmente y encontrar valor. Mi equipo y yo pudimos encontrar diferentes puntos e inconsistencias en toda la aplicación. Además de eso, proporcionamos recomendaciones en función de la gravedad de cada caso.
.png)
Luego creamos una mesa que nos serviría de obsequio para trabajar en el puntos de dolor encontrados al clasificarlos por gravedad, la regla heurística que estaba infringiendo y las recomendaciones.
Nuestro proceso de iteración comenzó con el uso de los descubrimientos durante la fase de investigación. Nuestro objetivo principal era asegurarnos texto e íconos contrastados de acuerdo con los estándares de accesibilidad. Además, elementos de interfaz de usuario coherentes en toda la aplicación transmitir profesionalidad y confianza a los usuarios. Por último, al comparar las versiones antiguas y nuevas, podemos tener una perspectiva clara de la mejora.
Aunque el contraste de color de los botones superó la accesibilidad, cambiamos a moderno y estético mira.
Siguiendo tendencias de diseño actuales, agregamos una interfaz de glassmorphism cada vez que se mostraba un campo de entrada de texto.
En la pantalla de inicio de sesión, cambiamos la visualización de los íconos de las redes sociales y agregamos un subrayado debajo del botón de registro para darle más énfasis.
Hemos añadido una opción de selección de cartas diferente para las dos pantallas siguientes y un cuadro para el botón «ahora no» para que coincida con el botón de arriba para una apariencia más elegante.
1. Añadido historias opción solicitada por el cliente.
2. Cambió el color del icono de la barra de navegación de la parte superior de verde a blanco para mejor contraste.
3. Se cambió la cuenta de cheques verificada verde de verde a azul para que coincida con otras plataformas de redes sociales y con fines de contraste.
1. Elimine los iconos de no me gusta, superme gusta y, en su lugar, añada un botón de seguimiento, con la opción de que el usuario desliza el dedo hacia la izquierda y hacia la derecha.
2. Se agregó la interfaz glassmorphism bajo el nombre por motivos de accesibilidad.
1. Cambia el icono del mensaje por otro que contraste con el fondo oscuro.
2. En lugar de usar botones de relleno para las opciones «personal» y «grupal», usamos un subrayado y cambiamos el color de las palabras a verde para combinar con los colores de la marca.
3. El icono de la barra de navegación en la parte inferior se modificó para que se rellenara una vez que los usuarios estuvieran en esa pantalla.
1. Bajo el perfil, estiramos la imagen por la pantalla para formar un mejor diseño.
2. También se agregó la interfaz glassmorphism bajo el nombre para una mejor legibilidad.
3. Se cambió el color de «seguir», «seguidores» y «publicación guardada» pasar el contraste y añadí una sección dedicada a ellos.
Basándonos en la lista de microinteracciones que compilamos durante las etapas anteriores del proyecto, creamos un diseño similar al de Instagram. Al hacerlo, los usuarios ya estarían familiarizados con cada paso y posible resultado una vez que interactúen. Esto nos daría la base necesitábamos desarrollar pantallas de alta fidelidad.
Los wireframes de microinteracción sirvieron de base para el desarrollo de pantallas de alta fidelidad. Al combinar las propuestas existentes con las nuevas, entregamos un producto muy detallado que habla el idioma del usuario.
.png)
Ahora que teníamos una aplicación completamente diseñada, era hora de probarla con los participantes que cumplieran con nuestros criterios. Nosotros elegimos Generación Z (18 a 24 años) personas interesadas en aprender sobre la crisis climática y cConectarse con personas de ideas afines. Además, tenían que estar familiarizados con las plataformas de redes sociales más populares. En primer lugar, realizamos un prueba moderada para examinar las reacciones de los usuarios.
-Descubre todo lo posible problemas de usabilidad
-Identifique cualquier confusión con la redacción y los íconos
-Asegúrese de que las pantallas estén intuitivo, y los usuarios pueden completar las tareas deseadas.
- ¿Los usuarios pueden buscar un tema o una persona específica?
- ¿Cómo interactúan los usuarios con la función Connect?
-Cuál es el del usuario experiencia general usando la aplicación?
Una vez que cada miembro del equipo pudo completar este paso, compilamos una lista de notas con las ideas de las entrevistas.
Todas las notas se compartieron y empezamos a patrones de atención entre los entrevistados y lo que experimentaron durante la actividad. Usamos el mapeo de afinidad para encontrar los comentarios más comunes recibimos puntos débiles que debían abordarse.
Una vez que se completó el mapa de afinidad, pudimos organizar cada problema encontrado en categorías que nos permitieran centrarnos en implementarlos de nuevo en el diseño. Los dividimos en cuatro categorías: Crítico, Mayor, Menor y Normal. Tres de ellas, en particular, nos llamaron la atención y debían abordarse.
La función de conexión es restrictiva y no está clara.
Resumen:
-Se pasó por alto el botón X, los usuarios no estoy seguro de cómo seguir adelante.
-Los usuarios que desean ver un perfil anterior a veces presionan accidentalmente X.
-No estoy seguro de si lo siguiente se ha realizado, necesito confirmación.
Recomendaciones:
-Sustituir el botón X por las flechas izquierda/derecha para moverse entre los perfiles.
-Agregue la página/el estado de confirmación al hacer clic en el botón de mensaje y seguimiento.
No puedo diferenciar entre mensajes nuevos y mensajes vistos
Resumen:
-Los usuarios expresaron que las diferencias entre los mensajes nuevos y los vistos son demasiado sutiles.
Recomendaciones:
-Texto en negrita del nuevo mensaje destacar más.
El icono de la galería de publicaciones guardadas es confuso.
Resumen:
-Los usuarios no son seguro de lo que significa cada icono.
Recomendaciones:
-Sustituir los iconos por etiquetas.
Una vez que reunimos y compilamos todos los comentarios de nuestros participantes, pasamos a pruebas no moderadas para obtener información adicional, pero de forma más rápida e imparcial. Uno de cada tres participantes señaló que la aplicación se parece mucho a Instagram y Tinder, que a los ojos de nuestro cliente era precisamente lo que estaba buscando, logrando así ese objetivo. Además, esta sesión validó nuestros descubrimientos anteriores: la aplicación es fácil de usar, va al grano y se parece a otras plataformas de redes sociales destacadas.
.PNG)
.PNG)
Basándonos en los problemas encontrados, pudimos:Para implementar rápidamente los cambios en el diseño eso mejoraría el uso general de la aplicación y compromiso del usuario. Este sería el último paso de nuestro trabajo de diseño, que estaba preparado para la transferencia del desarrollador.
Para aumentar la ayuda comunicación entre mi equipo y los desarrolladores, creamos documentación específica con anotaciones para ayudarlos a desarrollar el producto. Al hacerlo, en última instancia, lo haremos ayudar a los desarrolladores a entender la funcionalidad de la aplicación y cómo debe comportarse una vez lanzado. La guía de estilo también se incluyó como referencia, por si surgiera alguna duda.
.png)
Separarse de mi propia opinión sesgada es clave para ofrecer una experiencia de usuario excepcional. Por lo tanto, es crucial analizar los datos de investigación de los usuarios objetivamente para formular una justificación sólida para las decisiones.
El proceso de diseño es cambia constantemente, y la iteración es fundamentall. Sin embargo, no necesitamos reinventar la rueda. Por el contrario, el simple hecho de desglosar los patrones de diseño existentes e implementarlos en nuestro trabajo de diseño puede beneficiarnos.
Earl Love United comparte objetivos similares a los de muchas plataformas populares de redes sociales. Conecta, involucra, enseña y crea conciencia entre los jóvenes piensan que nuestra responsabilidad de cuidar los problemas ambientales es fundamental.
