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.
¡Hey! Uso cookies, ¡las digitales! 🍪 Si sigues navegando por aquí, asumiré que estás de acuerdo con nuestra "política de cookies"AceptarPolítica de privacidad