Blupp es una aplicación diseñada para conectar con personas alrededor del mundo que comparten las mismas pasiones, hobbies e intereses que tú. Fue el trabajo de fin de máster (TFM) que presenté en la escuela CEI y obtuvo una calificación de 90/90

Índice

Observar

  • Desk Research 
  • Netnografía
  • Research Questions 
  • Matriz de tendencias 
  • Competencia: Introducción 
  • Competencia Netnografía 
  • Competencia: Benchmark 
  • Competencia: Mapa perceptual 
  • Competencia: Diagrama de Venn 
  • Competencia: Mapa de posicionamiento 
  • Análisis DAFO 
  • Entrevistas 
  • Encuesta 

Sintetizar

  • User persona: María 
  • Mapa empatía: María 
  • Customer Journey: María 
  • Matriz de necesidades: María 
  • User persona: Alejandro 
  • Mapa empatía: Alejandro 
  • Customer Journey: Alejandro 
  • Matriz de necesidades: Alejandro 
  • User persona: Laura 
  • Mapa empatía: Laura 
  • Customer Journey: Laura 
  • Matriz de necesidades: Laura 

Idear

  • Findings & Insights 
  • Ideas por clusters 
  • Matriz de utilidad y viabilidad 
  • In / Out 
  • Matriz esfuerzo e impacto 
  • Método MoSCoW 
  • Propuesta de valor 
  • Propuesta de valor: Relacionada 
  • Business Model Canvas 
  • Product Canvas 
  • Análisis de la Pirámide de Maslow 
  • Análisis HEART 
  • Análisis AIDA 
  • Estrategia “Go to market” 

Diseñar

  • Branding 
  • Visión, Misión y Valores 
  • Tono de voz y UX Writing 
  • Sitemap 
  • Flowchart 
  • Sketches 
  • Wireframes 
  • Sistema de diseño: Colores 
  • Sistema de diseño: Tipografía 
  • Sistema de diseño: Layout Grids 
  • Sistema de diseño: Iconografía 
  • Sistema de diseño: Spacers 
  • Atomic Design 
  • Accesibilidad: Medidas 
  • Accesibilidad: WCAG Compilance 
  • Accesibilidad: Color Blindness Test 
  • Prototipo en alta 
  • User testing en Maze 
  • Sesión de testing grabada 
  • Propuestas de mejora y ampliación 
  • Iteraciones realizadas 
  • Proyecto en números 
  • Links 
  • Disclaimer 

Introducción.

Las personas construimos demasiados muros y no suficientes puentes
ISAAC NEWTON

Construyamos puentes, derribemos muros

En un mundo donde la conectividad digital nos acerca más que nunca, aún persisten barreras que separan a las personas. Enfrentamos una paradoja: mientras construimos muros virtuales a través de redes sociales y aplicaciones que nos aíslan en burbujas de información, carecemos de suficientes puentes que nos unan en comunidades significativas. Es en este contexto que nace este proyecto, un puente hacia un nuevo enfoque en el diseño de experiencias digitales.

¿Cómo podemos conectar a la gente de una forma significativa?

A lo largo de la historia, las personas han buscado afianzar lazos a través de la comunicación y el intercambio de ideas, forjando comunidades que trascienden fronteras geográficas y culturales. Sin embargo, en la era digital, estas conexiones auténticas parecen haber quedado relegadas a un segundo plano, mientras prevalecen interacciones superficiales y pasajeras.

Explorando soluciones mediante el Design Thinking

Con la premisa de conectar a las personas de una manera más significativa con sus intereses y aficiones, trabajaremos en esta hipótesis mediante la metodología de Design Thinking (doble diamante)

Observar.

Desk Research

La incorporación de funciones comunitarias en aplicaciones como Twitter, Meta, Discord, Spotify, entre otras, representa una tendencia importante en el panorama digital actual. La creación de espacios donde los usuarios pueden conectarse y compartir intereses comunes está impulsando una experiencia más enriquecedora y colaborativa, fortaleciendo así la relación entre la plataforma y sus usuarios y es algo que las empresas están aprovechando en los últimos tiempos.

Los artículos recopilados destacan la importancia de las comunidades de fans y su popularidad en el contexto digital actual.

La gamificación ha demostrado ser una estrategia efectiva para hacer que estas comunidades sean aún más atractivas. Reforzando la lealtad y el compromiso de los fans, fomentando una experiencia más gratificante y una experiencia más enriquecedora.

Las comunidades de fans también ofrecen una vía valiosa para el marketing y la promoción de productos y servicios

Estos artículos destacan dos tendencias significativas en el panorama digital: el crecimiento continuo de la inversión en redes sociales y comunidades, así como el aumento constante del número de usuarios de internet.

En conjunto, estos hallazgos apuntan hacia un futuro prometedor para las redes sociales y comunidades en línea como herramientas poderosas para las marcas y una fuente de conexión y enriquecimiento para los usuarios.

El crecimiento continuo de la inversión en estas plataformas y el aumento del número de usuarios de internet subrayan la importancia de seguir desarrollando estrategias innovadoras para aprovechar al máximo el potencial de estas plataformas en evolución.

Netnografía

Los tweets recopilados reflejan la demanda y el deseo de los usuarios por una nueva aplicación basada en texto. Los usuarios expresan la necesidad de contar con una plataforma que les permita conectarse con comunidades de interés compartido, donde puedan interactuar y compartir contenido de manera significativa.

Research Questions

Matriz de tendencias

Competencia: Introducción

Competencia: Netnografía

Competencia: Benchmark

Mapa perceptual

Diagrama de Venn

Mapa de posicionamiento

Análisis DAFO

Entrevistas

Encuesta

Sintetizar.

User persona: María

Mapa de empatía: María

Customer Journey: María

Matriz de necesidades: María

User persona: Alejandro

Mapa de empatía: Alejandro

Customer Journey: Alejandro

Matriz de necesidades: Alejandro

User persona: Laura

Mapa de empatía: Laura

Customer Journey: Laura

Matriz de necesidades: Laura

Idear

Finding & Insights

Ideas por Clusters

Matriz de utilidad y viabilidad

In / Out

Matriz esfuerzo e impacto

Método MoSCoW

Propuesta de valor

Propuesta de valor: Relacionada

Business model canvas

Product Canvas

Análisis de la pirámide de Maslow

Análisis HEART

Análisis AIDA

Estrategia “Go to market”

Diseñar

¿Por qué Blupp?

En cuanto al proceso de branding de Blupp, se realizó una investigación exhaustiva sobre las principales redes sociales existentes, con el objetivo de seguir una tendencia reconocida y establecida en el mercado. Como resultado de este análisis, se ideó el nombre “Blupp”, concebido para evocar la onomatopeya de las burbujas, simbolizando las diferentes comunidades que existen dentro de la plataforma.

En relación al diseño del logo, se optó por una representación visual que va más allá de la simple asociación con las burbujas. Se utilizaron formas circulares, que se convirtieron en elementos clave del branding de la aplicación. Estas formas no solo reflejan las burbujas, sino que también se perciben como una figura humana con los brazos levantados, transmitiendo un mensaje de unión y diversión.

Enérgico, seguro, vibrante...

En el proceso de branding, se buscó crear una identidad visual que refleje los valores y la visión de Blupp, destacando la importancia de la conexión entre personas y comunidades de interés compartido.

El azul, como color principal, evoca sensaciones de confianza, tranquilidad y estabilidad.

Además, este tono de azul se caracteriza por ser vibrante y enérgico, lo que refuerza el sentido de dinamismo y vitalidad y se integra armoniosamente con el concepto de representar las burbujas, ya que sugiere movimiento y actividad, invitando a los usuarios a sumergirse en un espacio interactivo y lleno de posibilidades.

Visión, misión y valores

Tono de voz y UX Writing

Sitemap

Flowchart

Sketches

Los bocetos han sido una herramienta invaluable para plasmar rápidamente las ideas sobre papel y visualizar la estructura y la distribución de elementos en la interfaz. En esta fase, la prioridad ha sido capturar la esencia de Blupp y definir la experiencia del usuario de manera intuitiva y atractiva.

Durante el proceso de bocetos, hemos iterado y refinado diversas veces, explorando diferentes enfoques y soluciones para cada pantalla y funcionalidad.

Además, los bocetos nos han permitido evaluar cómo fluye la información en la interfaz y cómo los usuarios interactuarán con la aplicación en diferentes escenarios. Esta fase de diseño nos ha brindado la oportunidad de identificar posibles obstáculos y desafíos en la experiencia del usuario, permitiéndonos realizar ajustes y mejoras antes de pasar a la fase de prototipado.

Wireframes Lo-Fi

En esta fase, hemos utilizado el enfoque de baja fidelidad para concentrarnos en la estructura y el diseño general de la interfaz, sin preocuparnos por los detalles visuales o gráficos. Los wireframes en baja fidelidad son esquemas básicos y sencillos que nos han permitido explorar diferentes diseños y opciones de diseño de manera ágil y flexible.

Diseñar

Sistema de diseño

Colores

Tipografía: Roboto

La elección de la tipografía “Roboto” para el sistema de diseño de Blupp se basa en su legibilidad y versatilidad en diferentes dispositivos, garantizando una jerarquía visual clara en la presentación de la información. Su amplia disponibilidad y compatibilidad en múltiples plataformas asegura una experiencia coherente para todos los usuarios.

Al ser una tipografía básica, se enfoca en resaltar el contenido y la experiencia del usuario, alineándose con la identidad visual de Blupp como una plataforma de comunidades basada en texto que fomenta la conexión y la autenticidad.

Puede ser modificada en el futuro por una tipografía propia desarrollada por Blupp

Iconografía

Hemos optado por una iconografía sólida con un diseño claro pero minimalista para garantizar una experiencia visual coherente y fácil de entender para nuestros usuarios. Los iconos sólidos proporcionan un aspecto limpio y moderno, lo que ayuda a simplificar la comunicación visual y a transmitir de manera efectiva la función o la acción que representan.

El diseño claro y minimalista de los iconos se alinea con nuestra filosofía de mantener una interfaz sencilla y fácil de usar. Evitamos detalles innecesarios y elementos complicados para asegurar que los iconos sean intuitivos y comprensibles de un vistazo. Especialmente para asegurar la accesibilidad.

Espaciadores, múltiplos de 8

La elección de múltiplos de ocho para los espacios en toda la interfaz de Blupp se basa en la implementación de un diseño consistente y modular. Utilizar múltiplos de ocho, como 8px, 16px, 24px, etc., permite una estructura alineada y bien organizada en la distribución de elementos, proporcionando una mayor coherencia visual en toda la aplicación.

También los hemos utilizado debido a que se alinean con la retícula de diseño de muchos dispositivos y sistemas operativos. Esto significa que los elementos colocados en múltiplos de ocho se ajustarán de manera más armoniosa y equilibrada en diferentes tamaños de pantalla y resoluciones.

Diseño atómico

Al utilizar el diseño atómico, hemos creado una biblioteca de componentes que se pueden combinar y reutilizar en diferentes partes de la aplicación.

Cada componente está diseñado para ser independiente y funcional por sí mismo, pero también se puede integrar fácilmente en otras secciones del diseño. Esto nos ha permitido agilizar el proceso de diseño y desarrollo, ya que podemos ensamblar rápidamente diferentes partes de la interfaz utilizando los mismos componentes base.

Además, el diseño atómico nos ha ayudado a mantener una apariencia visual coherente en toda la aplicación. Al establecer reglas de diseño y estilos para cada átomo y molécula, hemos asegurado que todos los componentes sigan la misma paleta de colores, tipografía y elementos de diseño.

Diseñar

Accesibilidad

Medidas de accesibilidad

Cumplimiento WCAG

Cumplimos con los estándares de accesibilidad WCAG (Web Content Accessibility Guidelines), asegurando que nuestra aplicación sea plenamente utilizada por personas con discapacidades visuales o motoras.

Uno de los aspectos clave de nuestra accesibilidad es el contraste de color, que es vital para garantizar una legibilidad óptima del contenido. Nuestros colores han sido cuidadosamente seleccionados para lograr un contraste excepcional, con calificaciones de 4,6 y 9,1 en el nivel AAA. Esto significa que nuestros usuarios con discapacidad visual pueden disfrutar plenamente de la aplicación sin dificultades para distinguir el contenido.

También se ha asegurado con un test de daltonismo que estos colores tienen al menos la calificación AA

Color Blindness Test

Diseñar

Prototipo en alta

Onboarding

El proceso de onboarding de Blupp ha sido diseñado para ser una experiencia simple y atractiva para los nuevos usuarios, permitiéndoles explorar rápidamente todas las funcionalidades y características que ofrece la aplicación. Se ha optado por cuatro pantallas en las cuales se le explica la posibilidad de explorar comunidades, conocer gente afín, crear contenido y, por último, crear una comunidad propia

Personalización durante el registro

Los usuarios podrán elegir una foto de perfil y seleccionar temas de interés que luego serán usados para recomendar contenido de forma más personalizada. Tanto la foto de perfil como la selección de temas, podrán ser cambiados o reconfigurados posteriormente.

Encuentra tus comunidades

La página explorar segmenta y clasifica todas las comunidades públicas y las muestra conforme a los intereses marcados por los usuarios en el proceso de registro.

Además, pueden buscarse comunidades específicas por medio de la barra de búsqueda introduciendo un término, un código de invitación o el permalink de una comunidad

Tu comunidad, tu nuevo hogar

Las comunidades son espacios dedicados a un interés común. Fans de un artista, seguidores de un influencer, de una serie, de un hobbie… Un grupo de amigos de la universidad, etc. Si compartes algo con alguien ¡puedes tener una comunidad para eso!

En las comunidades puedes interactuar con otros y crear contenido asombroso

Mil formas de crear contenido

Blogs, encuestas, preguntas, podcast, pensamientos… Crea cosas geniales, el límite lo pones tú

Conecta con tu gente

Las comunidades están llenas de usuarios tan apasionados como tú. Puedes interactuar con ellos de muchas formas distintas: A través de chats, por medio de comentarios e incluso siguiendo su perfil para no perderte ningún contenido que publiquen

Chatea sobre los temas que te importan

No solo tienes chats privados con usuarios. Puedes crear chats grupales con gente que ya conozcas o abrir una sala de chat pública para que cualquier miembro de la comunidad pueda unirse a la fiesta

Eleva tu experiencia con la suscripción de Blupp Plus+

Blupp Plus+ es una suscripción mensual que ofrece contenido exclusivo sin afectar la experiencia principal del resto de usuarios. Obtienen ventajas que lleverán su experiencia de uso al siguiente nivel

Lleva tu comunidad a las estrellas con las mejoras de la comunidad

Las mejoras de la comunidad ayudan a desbloquear ventajas increíbles para las comunidades. Mejorar no es solo beneficioso para la comunidad sino que tú también tendrás ventajas dentro de la comunidad que decidas mejorar

Sube de nivel y sé un miembro reconocido

Ser un miembro activo en la comunidad te otorgará puntos de experiencia y reconocimiento en la comunidad

Crea lazos extra fuertes

¿Necesitas demostrar a todo el mundo lo amigo que eres de un usuario? Interactúa con él dentro de la comunidad, gana puntos de amistad y conseguir el rango más alto

La diversión sigue en tu ordenador

Prototipo en alta animado

A continuación, se presenta un vídeo animado a modo de showcase del prototipo en alta

User testing en Maze

Sesión de testing grabada

Invitamos a 6 personas diferentes a probar por primera vez la aplicación de Blupp y grabamos su experiencia.

Las misiones son muy similares al testing anterior realizado en maze.

Tono de voz y UX Writing

Iteracciones realizadas

El proyecto en números

error: El contenido está protegido