Designing Twist: el desafío de hacer que el trabajo en equipo sea menos estresante

El diseño nunca es neutral. Así es como creamos una aplicación en torno a los valores más fuertes de nuestra empresa.

El diseño nunca es neutral. Parece que las aplicaciones que usamos todos los días nos dan toda la libertad y la opción del mundo, pero ese nunca es el caso. Cada opción, cada botón, cada interacción define no solo las acciones que podemos tomar, sino también las acciones que queremos tomar.

Dada la cantidad de espacio que le damos a las aplicaciones en nuestras vidas, en nuestro trabajo, nuestras finanzas, nuestro estado físico, nuestro entretenimiento, nuestras vidas sociales, las elecciones que hacemos como diseñadores tienen consecuencias muy reales.

Cuando nuestro equipo remoto comenzó a usar Slack hace tres años, experimentamos el impacto sutil pero real que el diseño tiene en el comportamiento. Desde sus canales de chat de flujo libre hasta sus compositores de mensajes de una línea a la vez, todo sobre Slack fue diseñado para mantenerlo en comunicación con su equipo en tiempo real, todo el tiempo. (No es sorprendente que el equipo detrás de Slack diseñó originalmente las aplicaciones de juego).

¿Responder constantemente a los mensajes de chat grupal fue el mejor uso de nuestro tiempo? Por supuesto no. Pero eso es lo que nos encontramos haciendo.

Identificamos la necesidad de un tipo diferente de herramienta de comunicación y comenzamos a diseñar Twist. (Puede leer más sobre esa decisión aquí).

El diseño de Twist ciertamente tampoco es neutral. Nos propusimos construir intencionalmente una herramienta en torno a los valores que tenemos como empresa:

  • Que las conversaciones reflexivas que impulsan el trabajo significativo hacia adelante son el alma de un equipo.
  • Para que sea transparente, las conversaciones no solo deben ser accesibles para todos, sino que también deben organizarse de manera que las personas puedan regresar y encontrarlas más tarde.
  • Que las personas necesitan poder desconectarse para concentrarse en su trabajo, o disfrutar de la vida fuera de sus trabajos o tomarse unas vacaciones, sin sentir que se están perdiendo conversaciones importantes.
  • Que las personas deberían poder trabajar desde cualquier zona horaria del mundo en el horario que mejor les funcione, sin quedar fuera de discusiones importantes.
  • Ese trabajo debería traer satisfacción, no estrés y ansiedad.

Queríamos darle una visión transparente de las elecciones que hicimos para diseñar Twist en torno a esos valores, los problemas que enfrentamos y cómo los resolvimos, y los desafíos que aún enfrentamos. Ya sea que sea un diseñador interesado en construir principios más éticos en sus propias aplicaciones, o alguien interesado en aprender cómo evolucionó Twist, esperamos que aprenda algo útil.

Los 3 requisitos originales

Cuando comenzamos, no teníamos una lista concreta de especificaciones para nuestra nueva aplicación, pero sí nos conformamos con 3 requisitos principales que guiaron el diseño desde el principio:

1. Una herramienta para la comunicación de todo el equipo.

Hasta este punto, estábamos usando Slack como una aplicación de chat, Wedoist (nuestra antigua herramienta interna) para discusiones a largo plazo, a veces correo electrónico para otras conversaciones, aplicaciones de mensajería directa como Hangouts para hablar rápidamente con otros, proyectos compartidos de Todoist para otros mensajes internos. , y más.

Demasiadas herramientas de comunicación hacían imposible concentrarse.

Esta comunicación fragmentada hacía imposible saber dónde estaba cada conversación cuando necesitábamos hacer referencia a ella más tarde. Se echaron de menos las cosas y la comunicación se sintió desorganizada y estresante.

Necesitábamos crear una aplicación capaz de albergar todos los diferentes tipos de comunicación que ocurren en una empresa en un solo lugar sin ser demasiado complicados.

2. Principalmente comunicación pública

La transparencia es fundamental para la forma en que trabajamos en Doist. Sabemos por experiencia que podemos construir una mejor compañía y mejores productos más rápido si no discutimos las cosas de forma aislada. Por ejemplo, de los aproximadamente 50 canales Twist que tenemos, solo dos son completamente privados. Como empresa remota, este nivel de transparencia es primordial, pero creemos que todos los equipos pueden beneficiarse de conversaciones democráticas, transparentes e inclusivas.

Lo que hayamos construido es necesario para garantizar que la mayoría de la información sea accesible y accesible para todos, especialmente para los recién llegados que no son conscientes de lo que ya ha sido discutido por el equipo.

3. Comunicación asincrónica

La tecnología ha hecho posible la comunicación en tiempo real con un solo clic, pero nuestro equipo reconoció el peligro de estar constantemente conectado. En Doist, creemos en la ambición y el equilibrio. Priorizamos el tiempo para desconectar, no solo para disfrutar de la vida fuera del trabajo, sino también para poder hacer el trabajo profundo que impulsa proyectos importantes hacia adelante.

También creemos que el futuro del trabajo es remoto, donde personas de diversos orígenes, países y zonas horarias se unen para crear mejores productos y empresas. Con los miembros del equipo repartidos en zonas horarias, la comunicación en tiempo real simplemente no funciona. Si quisiéramos que todos tuvieran una voz, sin importar su ubicación, zona horaria o estilo de trabajo, sabíamos que no podríamos basar toda la comunicación de la empresa en el chat en tiempo real.

Necesitábamos profundizar y evolucionar el nuevo producto (y nuestra empresa) hacia una comunicación asincrónica. Con nuestra nueva herramienta, todos necesitaban poder comunicarse en su propio horario sin perderse nada importante.

¿Cómo convertimos tres requisitos básicos en una aplicación completa? El resto de esta publicación describe varias de las decisiones clave que hemos tomado en el camino para alinear el diseño de UX / UI con nuestro producto general y la visión de la compañía.

Poner en práctica los principios

Chat vs hilos

El mayor problema que tuvimos con Slack fue la estructura del chat, donde varios temas se fusionaron en una conversación interminable. No solo se enterró rápidamente la información, sino que también ató a las personas a la aplicación, constantemente verificando nuevos desarrollos en un canal.

Rápidamente nos dimos cuenta de que las formas más antiguas de comunicación digital (correos electrónicos y foros) en realidad habían evitado este problema específico (aunque al crear diferentes problemas propios). Los usuarios pueden crear un nuevo tema / correo electrónico para cada conversación, asignarle un tema y, a partir de ese momento, la discusión se mantendrá organizada y sobre el tema.

Las conversaciones estructuradas en torno a temas específicos pueden ocurrir más lentamente que en el chat, pero aseguran que las discusiones importantes no se entierren o se pierdan mientras alguien pasa tiempo con sus hijos o duerme o se concentra en otro trabajo. Los hilos facilitan volver a conversaciones anteriores más tarde en el día, mañana, la próxima semana, el próximo año, siempre que sea.

En otras palabras, colocar hilos en el núcleo del producto ayudaría a los equipos a mantener conversaciones tanto transparentes como asincrónicas (dos de nuestros tres requisitos originales).

Una vez resuelto nuestro mayor problema de diseño de UX, finalmente nos propusimos crear los primeros wireframes de la nueva aplicación:

Diseño de diseño Early Twist de mayo de 2015 con enfoque en hilos, aún no hay mensajes directos.

Lamentablemente, aún no habíamos resuelto nuestro primer requisito: toda la comunicación en un solo lugar.

Agregar mensajes directos

Dos años después del desarrollo del producto, nuestro equipo cambió completamente de Slack a Twist. Fue, sin duda, una transición difícil. En ese momento, la única forma de comunicarse en Twist era a través de hilo.

Como hipotetizamos, los hilos eran geniales para discutir el trabajo. Pero faltaba esa camaradería inefable que venía con el chat en tiempo real, y todos en el equipo lo sintieron. Algunas personas intentaron usar hilos para "chatear", pero fue como tratar de colocar una clavija cuadrada en un agujero redondo. Simplemente no encajaba con la interfaz. Sabíamos que teníamos que resolver este problema por nosotros mismos si teníamos la esperanza de hacer de Twist una alternativa viable a las aplicaciones de chat grupal.

Poco después del cambio, decidimos agregar algún tipo de mensaje directo para complementar los hilos, algo que haría que la comunicación se sintiera más liviana y casual, sin perder la simplicidad de la aplicación o la naturaleza asincrónica de las conversaciones.

Probamos y discutimos muchos diseños internamente ...

Exploraciones de diseño que intentan incorporar mensajes directos en Twist.

... pero al final optamos por mantener Mensajes e hilos como dos pestañas completamente separadas dentro de la aplicación.

Concéntrese en cada tipo de comunicación en pestañas separadas.

Lo hicimos por algunas razones clave que se derivan de ser conscientes de la atención de las personas:

1. Los hilos están destinados a pensamientos más completos y conversaciones a largo plazo. Los mensajes son breves y casuales, y se usan para hacer check-ins o socializar rápidamente. Es lógico pensar que las personas pueden estar en diferentes "modos" cuando quieren revisar un hilo o comenzar un mensaje. Con dos pestañas separadas para mensajes y conversaciones, las personas pueden revisar una sin distraerse con la otra.

2. Debido a que los mensajes y los hilos están destinados a dos tipos muy diferentes de comunicación, requieren UX / UI muy diferentes. En el escritorio, la entrada del mensaje es un campo simple de una línea que le permite enviar presionando Enter. Por el contrario, el compositor de hilos tiene un campo de entrada más grande, incluye una opción de descuento para formatear y requiere que haga clic en Publicar para enviar. (Intro comenzará una nueva línea). Con los hilos y los mensajes en la misma pestaña, la carga cognitiva de cambiar la interfaz de usuario y el contexto del compositor era demasiado alta. Mantenerlos en dos pestañas separadas hizo que la transición entre los dos modos de comunicación fuera mucho más intuitiva.

Componentes de comentarios y mensajes

3. Con los mensajes en una pestaña separada, teníamos el espacio para mostrar cómodamente una vista previa del fragmento de un nuevo mensaje en una conversación antes de que un usuario haga clic. Puede parecer algo pequeño, pero la vista previa del fragmento hace posible que las personas puedan evaluar la importancia de un mensaje de un vistazo y decidir si responden ahora o más tarde.

Es fácil mirar un mensaje o hilo y ver si es urgente o no.

Si bien hemos descubierto que los mensajes son un componente esencial de la comunicación del equipo, los hilos siguen siendo la característica más importante de Twist. En la incorporación, enfatizamos la creación o contribución a un hilo como la primera acción más importante. Los mensajes son secundarios.

Notificaciones atentas

Las notificaciones son las principales herramientas de UX que los diseñadores usan para que las personas vuelvan a sus aplicaciones. Para cualquier aplicación de comunicación, las notificaciones son un mal necesario, pero queríamos asegurarnos de que las personas que usan Twist mantengan el mayor control posible cuando se comunican.

Elegir a quién notificar

Otro gran inconveniente de un diseño de chat grupal como Slack fue que cada nuevo mensaje en un canal desencadenaba una notificación no leída para todos en ese canal. El resultado fue una gran cantidad de lecturas irrelevantes que saturaron la interfaz y nos llevaron nuevamente a conversaciones que no necesitábamos leer. Con los hilos, queríamos crear un sistema más atento que minimizara las notificaciones para todos.

Tomamos lo que aprendimos de los comentarios de tareas de Todoist como punto de partida. Si bien todos los miembros de un proyecto compartido pueden ver todos los comentarios de la tarea, puede seleccionar quién recibirá una notificación específica cuando publique uno nuevo. Aplicamos principios de UX similares a los hilos y comentarios Twist recién creados: todos en un canal pueden ver todo, pero tú eliges a quién se le debe notificar sobre cualquier hilo o comentario dado.

Puntos no leídos sin los números

Una vez que alguien notificó a alguien acerca de un nuevo hilo o comentario, necesitábamos una manera de hacerles saber que se había publicado algo relevante sin presionarlos para que revisen de inmediato. El propósito de los no leídos en Twist es indicar la actividad relevante que los usuarios pueden verificar cuando elijan, no atraer a las personas a la aplicación.

Nadie necesita el estrés de ver 99 mensajes no leídos

Muchas aplicaciones marcan no leídas con el número de elementos que necesitan atención, pero ver un número exacto puede ser abrumador y crear una presión sutil para permanecer siempre en la "bandeja de entrada cero". En su lugar, optamos por utilizar un simple punto indicador no leído sin un número específico. En cuanto al diseño, hicimos que el punto no leído fuera lo más sutil posible y los mostramos solo en las pestañas de navegación principales.

Posible aviso de repetición

Una vez que resolvimos las notificaciones que desencadenan una lectura no leída dentro de la aplicación, dirigimos nuestra atención a las notificaciones de escritorio, móviles y correo electrónico potencialmente mucho más molestas que se envían cuando en realidad no está utilizando la aplicación.

Hicimos que el menú de notificaciones de repetición sea fácilmente accesible en la esquina superior derecha del escritorio, sin importar dónde se encuentre en la aplicación. Las personas pueden desactivar todas las notificaciones de Twist por hasta 8 horas. También puedes elegir programar una siesta diaria para que solo recibas notificaciones cuando realmente estés trabajando.

Agregar una opción para establecer Días libres cada semana fue una característica particularmente importante para nuestro equipo. Desconectarse del trabajo los fines de semana es lo que nos mantiene frescos para la próxima semana. También queríamos ayudar a otros equipos a establecer límites de trabajo saludables.

Tiempo libre

Ejemplo de tiempo libre en iOS

Demasiados empleados sienten que tienen que mantenerse conectados durante sus vacaciones (lo que, por supuesto, anula por completo el propósito de tomar vacaciones). Más allá de las siestas diarias y semanales, también queríamos una función robusta que estableciera la expectativa de que no debería tener que revisar sus conversaciones mientras está de vacaciones. O licencia por enfermedad. O licencia parental. O simplemente fuera de la oficina por un período prolongado de tiempo.

Cuando alguien establece su "Tiempo libre", Twist desactiva todas las notificaciones hasta la fecha en que regrese. Su foto de perfil cambia automáticamente a un avatar de Tiempo libre (que cambia según el motivo de su ausencia) y aparece un mensaje junto a su nombre que indica por qué se fue y cuándo regresará.

Mostrar su estado de tiempo libre de manera tan destacada en la interfaz permite que las personas sepan que no deben esperar una respuesta. Si es urgente, pueden encontrar a alguien más para ayudar. Si no es urgente, pueden publicar un comentario para que usted lo revise cuando regrese.

Solicitar permiso de notificación

Tener en cuenta sus notificaciones es importante para nosotros.

La gente espera tener la opción de recibir notificaciones de escritorio, por lo que sabíamos que necesitábamos integrar los permisos de manera temprana en la experiencia del usuario. Sin embargo, esto también estaba completamente en desacuerdo con nuestra filosofía de menos notificaciones y un trabajo más enfocado.

En lugar de presionar para activar las notificaciones como lo hacen muchas aplicaciones, agregamos un mensaje gris discreto en la parte superior de la aplicación que aparece después de la primera vez que un usuario recibe una notificación que le concierne y si se desconocen los permisos en el navegador , mostramos el banner mencionado. Si bien el usuario no toma medidas, seguimos acumulando notificaciones hasta un límite de cinco. En caso de que el usuario permita notificaciones, mostraremos inmediatamente las notificaciones pendientes hasta el límite de una por tipo thread_added, comment_added o message_added. Mantuvimos la redacción neutral para que las personas pudieran decidir fácilmente si quieren notificaciones o no. Una vez que han tomado una decisión, hacemos un seguimiento con información sobre herramientas en la configuración de notificaciones para informarles que pueden personalizar sus notificaciones si se vuelven demasiado molestos.

De esta forma, un momento de incorporación potencialmente difícil se convierte en un momento natural para educar a los nuevos usuarios sobre cómo la aplicación puede ayudarlos a controlar cuándo y cómo se comunican con su equipo.

No hay "presencia en línea". No hay indicadores de "leer recibo".

Dos características distintivas de la mayoría de las aplicaciones de comunicación de equipo son los indicadores que informan a las personas si estás en línea y los indicadores que informan a las personas si has visto un mensaje en particular. Ambas características crean presión para estar disponibles y responder de inmediato. Ponen a otras personas en control de cuándo se comunican con usted. Con Twist, queríamos darle la vuelta a eso.

Eliminamos por completo los indicadores de presencia y recibo en línea. Dicho esto, decidimos mantener el indicador "Alguien está escribiendo ..." para evitar confusiones cuando varias personas están en línea al mismo tiempo (no teníamos esto originalmente y fue un gran dolor que las personas comentaran unas sobre otras). Cuando vea "alguien está escribiendo", puede tomarse un momento para pausar su escritura y revisar el comentario de la otra persona antes de publicar el suyo. Esto mantiene los hilos un poco más limpios al evitar múltiples líneas de comentarios similares.

El resultado es un UX que hace que las personas se sientan más cómodas comunicándose de forma asincrónica en lugar de responder de inmediato.

Elegir familiaridad sobre novedad

Hacer que una persona adopte una nueva herramienta puede ser difícil. Lograr que todo un equipo adopte una nueva herramienta juntos al mismo tiempo es, bueno, mucho más difícil. Con ese desafío en mente, nos propusimos intencionalmente mantener patrones de UX con los que las personas ya están familiarizadas, en lugar de inventar otros nuevos y desconocidos.

Necesitábamos asegurarnos de que la experiencia central de iniciar conversaciones entrelazadas (invertir tiempo e información en la aplicación) fuera lo más intuitiva posible. Cada vez que nos encontramos con ganas de agregar información sobre herramientas, retrocedimos un paso para repensar el diseño y encontrar una solución más obvia y simple.

Por ejemplo, el actual compositor de hilos y el concepto de bandeja de entrada que agrega todos los hilos relevantes de una persona son muy similares al correo electrónico. Hubiera sido fácil dejar que nuestros egos se interpusieran y diseñaran algo completamente único, pero nuestro objetivo era hacer que los equipos adoptaran la herramienta de la manera más fácil posible. Twist no es reinventar la rueda, sino combinar los aspectos más útiles de otras herramientas en una sola aplicación simple.

Bandeja de entrada con hilos similares a los clientes de correo electrónico

Centrarse en el diseño multiplataforma

En estos días, el diseño para dispositivos móviles no es solo algo agradable. Los usuarios se han acostumbrado a aplicaciones móviles intuitivas y bellamente diseñadas, y no esperan menos de las aplicaciones que usan para trabajar. Sabíamos que no podíamos crear excelentes soluciones de diseño para computadoras de escritorio y luego tratar de forzarlas a adaptarse a dispositivos móviles. El diseño para todas las plataformas tenía que suceder en tándem.

En el transcurso de la creación de Twist, hemos desarrollado un nuevo flujo de trabajo de diseño para garantizar que todas las funciones estén optimizadas para dispositivos móviles y de escritorio al mismo tiempo. Cada nueva característica obtiene una especificación que enumera por qué lo hacemos, qué hará y los casos de uso y casos límite para ello. Luego, el diseñador incluye el diseño UX / UI propuesto para cada plataforma nativa (web, macOS, iOS y Android) junto con toda la copia para cada uno. Las maquetas y los prototipos se actualizan a medida que se sugieren cambios en el diseño para que todos tengan acceso a la última iteración. Aquí hay un ejemplo:

Usamos Dropbox Paper para nuestra documentación de diseño.

Con nuestro nuevo sistema de especificaciones, todas las plataformas mantienen la paridad de características, mientras que las desviaciones intencionales en el diseño o la copia se realizan para seguir las pautas específicas de la plataforma. Por ejemplo, si bien las aplicaciones de Android e iOS tienen la misma iconografía, su configuración se encuentra detrás de un botón "más" en diferentes ubicaciones. En Android se encuentra en el cajón de navegación, y en iOS se puede encontrar en la barra de pestañas inferior. De esta manera, los usuarios estarán familiarizados con ambas plataformas sin importar qué dispositivo estén usando ese día.

El objetivo siempre es que cada aplicación se sienta como en casa en su plataforma, mientras que la transición del escritorio al móvil y viceversa sea suave e intuitiva.

Futuros retos

La respuesta inicial de los usuarios de Twist ha confirmado nuestras hipótesis de diseño: los hilos aportan una sensación de orden, calma y longevidad a la comunicación del equipo que falta en las aplicaciones de chat grupal. Pero el proceso de desarrollo del producto recién comienza. Todavía hay muchos desafíos y tensiones de diseño clave dentro de la aplicación que debemos resolver. Aquí están los dos más grandes:

Hacer que todos los miembros del equipo experimenten el valor de los hilos.

La incorporación es un problema para cualquier producto, pero el beneficio único a largo plazo de mantener conversaciones en Twist no nos hace ningún favor. Los nuevos usuarios naturalmente gravitan hacia los mensajes, la parte de la aplicación más parecida al chat grupal, porque es el paradigma más fácil de usar.

Por otro lado, los hilos requieren que pienses más profundamente y te comuniques más cuidadosamente sobre un tema en particular. Puede parecer más formal e intimidante, y no siempre está claro para los nuevos usuarios por qué deberían usar hilos en lugar de mensajes. El momento "a-ha" es mucho menos inmediato que con el chat grupal.

Un usuario describió cómo Twist hizo clic para él cuando pudo volver a un hilo y retomar donde lo dejó una semana después. Eso es mucho tiempo entre comenzar a usar una aplicación y poder experimentar realmente su valor. Tenemos que diseñar formas para que los nuevos usuarios entiendan y experimenten el valor de Twist en un marco de tiempo más condensado.

Pero la incorporación es una pequeña parte de un desafío mucho mayor que enfrentamos ...

Cambiando las culturas del equipo.

La mayoría de las empresas de hoy todavía funcionan con comunicación en tiempo real, en reuniones o chat o incluso por correo electrónico. No dejan espacio para que las personas se concentren en el trabajo profundo. Esos equipos nunca entenderán el valor de usar Twist over Slack, o cualquiera de las otras docenas de aplicaciones de chat grupales, si no reconocen cómo desconectarse del trabajo puede hacer que sus empleados sean más saludables y productivos.

Si bien el diseño centrado en hilos de Twist hace que sea mucho más fácil colaborar de forma asincrónica, los equipos aún pueden usar Twist en tiempo real como lo hicieron en el pasado con el correo electrónico. Si su jefe espera que responda de inmediato, no tiene otra opción. No importa cuán cuidadosamente diseñamos la aplicación para que tenga en cuenta la atención de las personas, el cambio también requiere un cambio en la mentalidad tanto de los usuarios como de los líderes de los equipos.

Al construir Twist, nos dimos cuenta de que el diseño en la aplicación debe complementarse con experiencias diseñadas intencionalmente fuera de la aplicación, en nuestro Centro de ayuda, en nuestro blog, en nuestros correos electrónicos, en nuestros canales de redes sociales, en nuestras ilustraciones, que promueven un mayor enfoque consciente y equilibrado del trabajo en equipo. El diseño de contenido y el diseño de la aplicación deben ir de la mano.

Cambiar las culturas del equipo no va a suceder de la noche a la mañana, pero creemos que las empresas que hacen este cambio son las que superarán al resto. En última instancia, estamos midiendo el éxito del diseño de Twist en la cantidad de equipos que ayudamos a lograr.

Hubo mucho más que entró en Twist que no pudimos cubrir aquí. Si todavía tiene preguntas sobre el proceso de diseño detrás de Twist, ¡el equipo de diseño estará encantado de responderlas! Háganos saber en los comentarios a continuación o en Twitter en @twistappteam.

Siga a nuestro equipo de diseño en dribbble.com/twist y dribbble.com/todoist.

Ana es jefa de diseño en Doist, trabajando en Twist y Todoist. Amante de la comida, los viajes y el aprendizaje.Alex es diseñador de productos para Twist & Todoist. En UI / UX, ilustración, fútbol, ​​tecnología y productividad. dribbble.com/alexmuench

Más de nosotros sobre cómo trabajamos: