Después de enseñarme a codificar y diseñar, rediseñé Tumblr.

Actualización: Después de publicar este artículo, Tumblr me contactó con la oportunidad de trabajar con ellos, y estoy feliz de decir que ahora soy parte de su equipo de Diseño de Producto.

El reto

Hace unos meses me enfrenté a todas las creencias diciéndome que no podía aprender a codificar y comencé a aprender. Si bien es algo que planeo continuar, tenía ganas de que el diseño del producto no desapareciera. Combinó mi entusiasmo por la resolución de problemas y mi fascinación por el comportamiento humano.

Ambas fueron disciplinas que soñé con aprender durante mucho tiempo, y no quería seguir siendo algo que dije que algún día sucedería.

Y así lo decidí. Cambié mi carrera profesional de la neurobiología y fijé mi mirada en estos objetivos. Pero estaba atrapado. ¿Debería centrarme en el desarrollo frontend o el diseño de productos? Fue entonces cuando me di cuenta: la única persona que decía que tenía que elegir uno u otro era yo mismo.

Entonces, se me ocurrió mi propia solución: aprendería ambos. Después de trabajar en algunos proyectos de JavaScript, me desafié a mí mismo a rediseñar la aplicación iOS de una plataforma cercana y querida: Tumblr.

Un poco de trasfondo

Recuerdo que me inscribí en Tumblr cuando aún tenía aparatos ortopédicos hace 10 años. Me conectó con algunas de las personas más interesantes que conozco y me ayudó a navegar problemas que pensé que nadie más tenía.

Pero a lo largo de los años ha tenido sus propios problemas. Lo he visto luchar para competir y mantenerse relevante en la industria de las redes sociales que cambia rápidamente. Ya no quería seguir siendo un observador pasivo y verlo caer (juego de palabras) desde el costado. Entonces, tomé un enfoque práctico para descubrir qué soluciones de UX podría pensar para remediar algunos de sus problemas.

Un vistazo rápido a mi rediseño

Antes de sumergirme en el estudio, quiero expresar mi admiración por lo que los diseñadores de Tumblr ya han hecho con la aplicación iOS. Y no, no solo digo eso por el bien de este artículo. Entiendo que hay razones para tomar decisiones basadas en datos e investigaciones a las que no tengo acceso. Este estudio se basa estrictamente en mi propia investigación y recursos, y por esa razón no es completamente completo.

Metas de negocio vs. y metas de usuario

Para evitar un rediseño no solicitado, me aseguré de que hubiera una necesidad real del usuario para lo que propusiera y que resolviera un problema. Comencé por comprender los objetivos comerciales y de usuario de Tumblr, luego trabajé para encontrar soluciones que los conectaran.

Lo primero es lo primero, ¿qué es Tumblr?

"Un lugar para expresarse, descubrirse y relacionarse con las cosas que ama ... donde sus intereses lo conectan con su gente". - Declaración de la misión de Tumblr (febrero de 2018)

Una parte de mi investigación consistió en comprender qué hizo que Tumblr tuviera éxito, qué significaba y qué estaba haciendo para los usuarios de hoy.

Su fundador, David Karp, lo construyó desde cero con el objetivo de reducir la barrera de los blogs. Era su bebe. Creo que el trabajo preliminar que él estableció ha sido una gran parte del éxito de Tumblr, y quería crear algo que respetara su visión.

Diseñó Tumblr para no tener muchas de las características que se consideran necesarias para las redes sociales. Un ejemplo fue mostrar el recuento de seguidores en el perfil de un usuario y otros marcadores numéricos de popularidad. Él creía que envenenó a una comunidad que lo construyó alrededor de números. Y temía que se volviera métrico y optimizado como "cualquier [otra] gran empresa tecnológica".

Objetivos de negocio

1. Hacer ingresos

Karp nunca tuvo la intención de ejecutar Tumblr como un negocio. Sintió que monetizarlo comprometería su autenticidad como plataforma para creativos. Pero necesitaba que funcionara si Tumblr se mantenía en funcionamiento, ¡así que se lo vendió a YAHOO! en 2013.

¡YAHOO! lanzó varios productos publicitarios y fusionó su equipo de ventas con el de Tumblr, pero incumplió reiteradamente los objetivos de ventas. Ambos tenían audiencias muy diferentes entre sí, ya que YAHOO! Era mucho mayor y Tumblr era mucho más joven. Esto dificultó el trabajo conjunto, ya que ambos equipos buscaban diferentes tipos de anunciantes.

Tumblr tuvo problemas para pasar de ser una empresa pequeña e independiente a ser dirigida por una grande. Y todavía está tratando de encontrar ese equilibrio. ¡Hoy es administrado por Verizon después de que compraron YAHOO! en 2017, y Karp ha renunciado desde entonces.

2. Crecer la base de usuarios

Crecimiento anual de usuarios de Tumblr (datos recopilados de Statista)

Tumblr está luchando para aumentar su base de usuarios al mismo ritmo que sus competidores. Hoy tiene casi cuatro millones de blogs, pero el crecimiento ha disminuido durante los últimos cuatro años y se prevé que continúe disminuyendo durante los próximos dos años.

3. Incrementar el compromiso

Tumblr no tiene tantos usuarios activos como sus competidores, pero sus usuarios están bastante comprometidos. Pasan más tiempo al mes que los usuarios de Instagram y las sesiones duran más que Instagram y Facebook.

Aquí es donde mantenerse relevante es un problema, porque sus competidores constantemente introducen nuevas formas de mantener a su audiencia comprometida.

Objetivos del usuario

Realicé 72 entrevistas con usuarios de Tumblr seleccionados al azar por encuesta y chat. Como la mayoría de ellos querían permanecer en el anonimato, omití sus nombres de usuario de la vista pública. Los objetivos más comunes que surgieron fueron:

Demografía del usuario

Tumblr tiene la base de usuarios más joven de sus competidores con un usuario promedio de entre 18 y 24 años. Hay una cantidad igual de usuarios masculinos y femeninos, que también es diferente a sus competidores.

El 67 por ciento de los entrevistados dijeron que habían estado en Tumblr durante más de cinco años. Cuando se les preguntó qué los mantenía en Tumblr, la respuesta más común fue que podían ser ellos mismos sin el juicio de los demás. No se sentían presionados a la altura de una determinada imagen, porque la comunidad aceptaba las diferencias. Algunos incluso comentaron que Tumblr era el primer lugar en el que se sentían seguros explorando temas en los que se sentían completamente solos, como la sexualidad y la salud mental.

No me di cuenta de lo significativo que era Tumblr para muchos usuarios. Era más que un espacio para pasar el tiempo mirando memes o fotos estéticamente agradables. Para muchos, era un lugar en el que podían conectarse genuinamente con otros como ellos, descubrirse y navegar por asuntos personales.

Persona de usuario

Construí la siguiente persona de usuario en torno a las respuestas que recibí en mis entrevistas y la mantuve en el centro de mi diseño:

Investigación

Los usuarios tuvieron problemas con la aplicación iOS

  • El 54% utilizó más la aplicación iOS
  • 32% usaban escritorio más
  • El 13% usó ambos por igual

... pero no dejes que los números te engañen! Aunque más de la mitad usó más la aplicación iOS, no fue porque la encontraran más fácil o más agradable. Sus estilos de vida en movimiento no les dieron muchas opciones.

"[Uso la] aplicación iOS más porque es más práctica para mi estilo de vida, pero prefiero la versión de escritorio porque es más fácil de navegar".

Aquellos que usaron ambos igualmente sintieron que algunas características eran más fáciles una sobre la otra. Y dividieron su tiempo entre ellos dependiendo de lo que necesitaran hacer.

Mientras que los usuarios de escritorio deliberadamente evitaron usar la aplicación iOS. Se quejaron de que era muy incómodo, lento y difícil de navegar.

Respuesta típica de los usuarios sobre Tumblr iOS (The Office)

Aquí hay un análisis rápido de la página de inicio de Tumblr

Página de inicio, también conocida como panel de control del usuario

Problema # 1: la interfaz de Tumblr fue en contra del instinto del usuario

El 98 por ciento de los usuarios dijeron que cuando navegaban por su feed, se enfocaban inmediatamente en el contenido de una publicación, no en quién la publicaba.

Puede estar pensando: "Bueno, eso tiene sentido. Tumblr está compuesto casi en su totalidad por fotos grandes y coloridas. ¿Cómo podría no captar su atención primero? "Pero eso no es suficiente para explicarlo. El mismo porcentaje de usuarios dijo que quién lo publicó era menos importante para ellos que el contenido en sí. Y en la mayoría de los casos, ignoraron quién lo publicó por completo.

Solución 1: contenido primero, información segunda

Vamos a cubrir los conceptos básicos de mi rediseño. Cambié el diseño general de las publicaciones colocando el contenido al principio, por lo que sería lo que los usuarios vieron primero al bajar su feed.

Después de eso pongo información del usuario. Esto incluyó quién lo publicó en su feed, de quién lo publicaron y quién fue la fuente original. Lo organicé todo junto, para que los usuarios no tuvieran que escanear la publicación de un lugar a otro.

Pero todavía era problemático que los usuarios se ignoraran entre sí. Entonces, agregué la función de deslizar hacia la izquierda para ver las ocho publicaciones más recientes de un usuario en forma de cuadrícula.

Esto facilitaría a los usuarios encontrar más de lo que están buscando, ya que es probable que un blog del que les gusta una publicación tenga más del mismo contenido. También están conociendo a otro usuario y su blog sin tener que abandonar su feed. Si un blog tiene contenido que les gusta, es probable que lo recuerden y al usuario que lo respalda.

Pero no solo es útil para conocer nuevos blogs o encontrar nuevo contenido. Una de las principales razones que los usuarios dieron para permanecer en Tumblr fue interactuar y consultar con amigos cercanos que hicieron en él. Con esta función, podían ver cómo les iba a sus amigos al revisar sus publicaciones recientes.

Aquí hay un ejemplo de un amigo cuyas publicaciones recientes sugieren que es posible que desee comunicarse con ellos:

Otra área problemática fue la forma en que Tumblr recomendaba nuevos blogs para seguir. Cada enésima publicación, un puñado de blogs recomendados aparecieron en función del historial similar de un usuario. Pero el algoritmo no era el problema. El avatar, el banner y la biografía de un blog ocuparon más de la mitad del espacio dado, mientras que una vista previa del blog real solo tomó una fracción.

La manera de Tumblr de recomendar blogs

Esto no tenía ningún sentido. Dado que Tumblr es una de las únicas plataformas que permite a los usuarios personalizar sus perfiles, ¿fue esto para permitirles expresar más su creatividad o sus personajes? ¿O fue para alentarlos a prestar menos atención al contenido y más atención el uno al otro?

En cualquier caso, la ventana de oportunidad para convencer a los usuarios de seguir blogs que no sabían era estrecha. Y según mis entrevistas, iban a basar su decisión en el contenido y no en avatares, biografías o pancartas.

Rediseño de los blogs recomendados de Tumblr

Entonces, en mi rediseño, convertí el contenido del blog en la estrella del programa. Mostré las publicaciones más recientes en una cuadrícula para dar una mejor visión general de lo que trataba el blog. Esto guiaría mejor la decisión del usuario de seguir o no.

También gamifiqué la experiencia para alentar a los usuarios no solo a pasar más tiempo haciéndolo sino a divertirse con él. Podrían deslizarse hacia la derecha para seguir o hacia la izquierda para ver otro blog. Esta sería una forma más efectiva de lograr que los usuarios se conecten entre sí, porque lo que contienen sus blogs es más representativo de sus intereses que lo que dicen sus biografías. Sobre todo porque la mayoría de los usuarios no tienen nada en sus biografías.

Es un ganar / ganar. Los usuarios encuentran más blogs que les gustan y personas con las que es probable que se conecten. Pasan más tiempo navegando y chateando. Y están aumentando las tasas de participación de Tumblr al hacerlo.

Problema # 2: Publicaciones en cola

Antes de este estudio, no tenía idea de lo importante que eran las publicaciones en cola para los usuarios. Pensé que unos pocos dedicaron varias horas para producir contenido durante todo el día. Pero, seamos sinceros ...

Las colas permitieron a los usuarios programar sus publicaciones con anticipación, lo que alivió la presión de administrar un blog. Después de descubrir que más de la mitad dependía de ello para mantener activos sus blogs, tuve que convertirlo en una prioridad. Los blogs activos ayudaron a las tasas de interacción, y permitir que los usuarios mantuvieran sus blogs activos sobre la marcha cambiaría más de escritorio a móvil.

Pero hacer cola era la característica más quejumbrosa en mis entrevistas. Los usuarios se quejaron de que había demasiados pasos involucrados, y algunos incluso recurrieron a aplicaciones de terceros para hacer el trabajo. Que tantos se esforzaran por hacer que la aplicación funcionara para ellos, e incluso compensar lo que faltaba con otra aplicación, fue una gran señal de alerta para mí.

Entonces, lo primero que hice fue desarmar el proceso. Quería entender cómo cada parte de ella constituía una experiencia que frustraba a los usuarios.

Proceso de colas de Tumblr

El diseñador de UX Steven Hoober dijo que el 49% de los usuarios móviles sostienen sus teléfonos con una mano, y el 75% de las interacciones móviles se manejan con el pulgar. Llamó a esto el principio de "zona del pulgar". En el diseño actual, todos menos el primer paso están en la zona roja. ¿Te imaginas hacer esto en un autobús lleno de gente donde tenías poco o ningún margen de maniobra para cada publicación que querías hacer cola? Este fue un escenario real que dio un usuario.

Solución # 2: Administre su blog sobre la marcha

Rediseño de la función de espera de Tumblr

Lo primero que hice fue mostrar la función y deshacerme de todos los pasos innecesarios. Ahora todo lo que tenía que hacer era presionar y arrastrar para hacer el trabajo.

Es posible que hayas notado que cambié la función de comentarios por una en cola. Hacer clic en las notas de una publicación también condujo a sus comentarios, y no tenía sentido tener dos botones haciendo lo mismo en la misma página. Entonces, en su lugar, agregué la opción de deslizar hacia la derecha para ver o dejar comentarios. Los usuarios aún podrían acceder a los comentarios al ver las notas de una publicación, pero de esta manera conservaron espacio y se sintieron menos redundantes.

Problema 3: los usuarios no veían lo que querían

Una parte de mi investigación involucró la revisión de la versión actual en la tienda de aplicaciones. Quería entender con qué usuarios tenían más problemas.

Además de hacer cola, la mayor queja era que los usuarios no obtenían el contenido que querían. Se quejaron de desplazar su feed en vano en busca de algo que les gustara. No se trataba de seguir a las personas equivocadas, más bien, lo que buscaban difería por sesión.

Esto tiene sentido. Encontrar y compartir contenido agradable fue el primer objetivo del usuario que mencioné anteriormente en este artículo. Y si los usuarios no obtenían el contenido que querían, había poca o ninguna razón para que continuaran usando la aplicación.

Solución # 3: filtro y vista de cuadrícula

Así que tener la opción de filtrar el contenido en el feed de un usuario era algo que tenía que priorizar. Dado que más del 70 por ciento del contenido en Tumblr está basado en imágenes, agregué la opción de ver el feed en una cuadrícula para una mejor visión general del contenido. Permitiría a los usuarios navegar por su feed sin sentir que era una tarea difícil.

Aunque no se demostró en mis otras maquetas, mantuve el filtro y las funciones de chat acopladas mientras un usuario navegaba por su feed. Esto los mantendría actualizados con cualquier mensaje nuevo que recibieran. Y les dio control sobre el filtrado de su alimentación nuevamente si lo deseaban.

Problema 5: actividad y mensajes agrupados

La sección de actividad alerta a los usuarios sobre nuevos me gusta, comentarios y seguidores. Era parte de la navegación principal hasta que Tumblr lo reemplazó con mensajería instantánea.

Navegación anterior vs. Navegación nueva

Si los usuarios querían ver su actividad, tenían que 1) ir a su bandeja de entrada y 2) deslizar hacia la izquierda. No solo eliminarlo de la navegación y meterlo en el chat lo hizo menos accesible, sino que los usuarios tampoco recibieron notificaciones de nueva actividad. El número de notificaciones que se muestran arriba del símbolo de chat solo se refiere a mensajes nuevos. Entonces, si los usuarios querían saber si tenían una nueva actividad, tenían que verificar manualmente cada vez.

Navegación inferior (izquierda), publicación creada por el usuario de Tumblr que describe el sistema de notificación actual (derecha)

Supongo que Tumblr puso mensajes instantáneos en la navegación principal para alentar a los usuarios a chatear entre ellos. Cuanto más chatean entre ellos, más tiempo pasan en Tumblr.

Pero saber cómo otros interactúan con tu blog es una oportunidad para involucrarse. Le permite saber cómo se recibe su contenido y quién interactúa con su blog. Puede animarlo a publicar más y mantener su blog activo si ve que le está yendo bien.

E incluso puede abrir la oportunidad de descubrir nuevas personas para chatear. Es más probable que revises un blog y lo sigas después de ver que han interactuado con el tuyo, por ejemplo.

Solución 5: separe la actividad de la bandeja de entrada

Puse actividad en la navegación principal y moví los mensajes a la esquina superior derecha de la fuente. Tenerlos separados y a la vista permite a los usuarios mantenerse al día sobre cómo les está yendo a su blog y cómo están sus amigos. No tenía que ser uno u otro.

Y eso es todo, amigos

Aprendí que cada problema es una oportunidad para ser creativo, especialmente los que parecen demasiado difíciles de resolver. Y esto no se limita al diseño o la programación. He aplicado esta lección a mi propia vida, y este estudio es el resultado de ello.

Mi problema era que quería cambiar al desarrollo frontend y al diseño del producto, pero no tenía la experiencia. No podía permitirme cursos lujosos o bootcamps, y no quería agobiarme con préstamos. Pero nada de eso importó. Hay cientos de recursos gratuitos disponibles en línea. Puede buscar cualquier cosa que haya soñado aprender, está literalmente a su alcance. Sabía con diligencia y paciencia que podía ponerme en marcha por mi cuenta y construir experiencia creando proyectos como este.

Si quieres aprender algo pero sientes que no tienes la habilidad, experiencia o recursos, créalos. Haz oportunidades para ti mismo. Encuentre una manera de hacer que sus problemas funcionen para usted, no en su contra.

Un meme saludable de Mean Girls cortesía de los usuarios de Tumblr

Si tiene alguna sugerencia o pregunta, ¡me encantaría escucharla! Agradezco con entusiasmo cualquier comentario constructivo, porque me ayuda a comprender qué mejorar para seguir adelante.