Vistazo hacia el interior: el rediseño del editor y la actualización organizacional

Tiempo de lectura: 5 Minutos Producto & Diseño

Actualmente, nuestra empresa se encuentra en una nueva etapa, pues estamos cambiando para renovarnos. En consecuencia, nuestros servicios han ido creciendo a pasos agigantados. Así mismo, sabemos que hemos cometido errores y que nos hemos enfrentado a muchos desafíos pero, de lo que sí estamos seguros es que hemos aprendido a realizar pasos firmes hacia mejoras continuas. Por esto mismo, no nos queda más que agradecerles por unirse a este viaje con nosotros. A continuación, les mostramos un pequeño vistazo a lo que ha sido nuestro lanzamiento del rediseño y la actualización organizacional del editor “arrastrar y soltar”.

¿Por qué hicimos esto?

Nuestro equipo de edición está compuesto por dos diseñadores, un desarrollador de front-end, un desarrollador de back-end y nuestro CEO. Así, la misión principal de dicho equipo es centrarse en los tres editores de correo electrónico: arrastrar y soltar, texto sin formato y el editor de código. Cuando nos encontrábamos en juntas platicando a cerca de lo que teníamos que hacer para seguir avanzando, identificamos una problemática recurrente que se necesitaba resolver: una interfaz de usuario inconsistente en nuestras herramientas más recientes.

En los últimos años, Benchmark ha lanzado algunas herramientas nuevas entre las que se encuentran tres editores de correo electrónico, dos formularios de suscripción, automatización para lograr compromiso a través de emails y, la más reciente, Automatizaciones Pro (Beta). Sin embargo, encontramos que una de las debilidades principales que tienen dichas herramientas es que cada una de ellas tenía variaciones de estilo, las cuáles pudieron haber sido el resultado de una serie de posibilidades, tales como el que trabajaran en ellas múltiples diseñadores y desarrolladores, la falta de una guía de estilo, transferencias pobres, problemas con códigos heredados y así sucesivamente. Algunas de estas variaciones eran visualmente obvias y algunas no tanto, pues tenían que ver con variaciones de código.

Style variations in Benchmark tools

Con tantas inconsistencias, resultaba una verdadera pesadilla realizar cualquier actualización de características para nuestros equipos de producto. Eso, sin mencionar que aparte de todo estaba dañando la experiencia de nuestros usuarios y lo que en consecuencia, crea confusión en cuanto a los comportamientos y señales visuales. ¿Cómo puede aprender un usuario a confiar en tu aplicación si el resultado de la acción es un juego de adivinanzas?

Tiempo después, nos dimos cuenta que necesitábamos organizarnos y avanzar hacia la unificación de nuestra plataforma para que nuestros usuarios pudieran pasar menos tiempo pensando en cómo usar nuestra herramienta y más tiempo enfocándose en su tarea. Debido a esto, nuestro equipo identificó dos objetivos:

  1. Limpiar nuestros estilos de diseño y nuestro código
  2. Crear una experiencia de usuario más fluida a través de nuestras herramientas actualizadas

Había múltiples áreas de oportunidad, sin embargo, para este lanzamiento en específico, decidimos limitarlo únicamente a las actualizaciones de estilo y organización de la interfaz de usuario en la navegación superior, los paneles de bloque activos y la barra de herramientas de edición de texto. Siendo honestos, cada área presentó sus propios desafíos, así que a continuación les platicamos algunas de nuestras experiencias.

Simplifica la navegación dentro del editor

La primera oportunidad la encontramos dentro de la navegación principal en nuestro editor. Dicho editor estaba conformado por cuatro iconos que dividían cada área de edición. El cuarto ícono (un lápiz) indicaba cuando se seleccionaba un bloque, sin embargo, no contenía opciones en su panel cuando no se estaba editando ningún bloque. Esto se comía mucho espacio valioso y únicamente resultaba ser más confuso que útil para nuestros usuarios, por lo que decidimos eliminarlo. Además, reemplazamos los íconos con texto para mejorar la claridad en todos los idiomas. De esta manera, los íconos ocupaban menos espacio y dejamos de manera más clara el etiquetado.

Editor navigation comparison

Dedicarnos a nueve idiomas no es fácil. Esto se traduce en que todas nuestras decisiones vienen con desafíos adicionales, por lo que tratamos de diseñar con los peores escenarios en mente. Uno de los desafíos más importantes que tuvimos fue el recuento de caracteres. La mayoría de las veces, el texto en inglés usa mucho menos caracteres que algunos otros idiomas como el alemán y portugués. En un área tan limitada, ¿qué sucede cuando se hace demasiado largo? ¿Lo haces en dos líneas? ¿Truncas? ¿Expandes el área?

Language comparison

En este caso, elegimos resolver el problema a través del tamaño del texto y los comportamientos de repliegue de inserción. Este es un escenario más pequeño, pero en otras ocasiones se convierte en un reto mayor cuando hay más factores en juego.

Barra de edición de texto

Dado que este es uno de los componentes más utilizados por el usuario, nos dimos cuenta que la actualización y la división de nuestros íconos podría tomar bastante tiempo para poder mejorar la experiencia del usuario.

Icon update to text editing toolbar

También decidimos cambiar el comportamiento de la barra para que fuera más adaptable en múltiples tamaños de pantalla y dispositivos. La barra completa se muestra hasta que el usuario cambia el tamaño del navegador. En ese momento, cada opción se colapsa en un menú al que se puede acceder haciendo un clic en la pestaña “más”. De no modificar esta situación, el diseño antiguo seguiría invadiendo el espacio de trabajo de nuestro usuario, empujando su trabajo hacia abajo, mientras que el diseño no se actualizaba.

Behavior update to text editing toolbar

Activación de paneles de bloqueo

Esta es el área a la que enfocamos casi todos nuestros esfuerzos. Cuando comenzamos a implementar elementos a la interfaz de usuario de nuestros nuevos formularios de registro y creamos los que faltaban, ayudó con la consistencia del estilo y dio a los paneles más espacio para respirar. Así mismo, bajo la superficie, el código fue mejorado, limpiado y estructurado para ser más modular y correr más rápido (por cierto, ¡gracias a nuestro desarrollador de front-end!).

Old-Overview

After Update

El segundo problema que encontramos fue la desorganización y la inconsistencia entre los bloques. Si colocábamos todas las opciones de bloque lado a lado, la organización era diferente, de manera que nuestros usuarios tenían que re ajustar cada bloque individual, por lo que decidimos  estandarizar la organización entre todos ellos.

Block organization overview

Consistent block organization

Nuestro mayor cambio abordó problemas que tenían que ver con la cantidad de opciones mostradas en un momento dado y que, en consecuencia, resultaba en impactos negativos en el flujo de trabajo del usuario. Algunos de estos bloques estaban realmente hinchados y no eran más opción para el futuro. Así que para esos bloques, decidimos separar sus opciones en dos pestañas basadas, primero, en la función y luego en el nivel de uso dentro de la pestaña. La primera pestaña contenía opciones relacionadas con el bloque general y la segunda pestaña trataba con opciones relacionadas con los elementos dentro de ese bloque.

Tab organization animated image

Entonces, ¿qué sigue?

De hecho, ¡mucho! Nuestro equipo ha ido avanzando a pasos pequeños para obtener una visión más profunda de los usuarios a través de la metodología “trabajos por hacer”. Si aún no lo has hecho, te recomiendo que consultes el ebook de Intercom.

De una manera muy agradable lo describen así:

La gente compra productos y servicios para conseguir un ‘trabajo’ hecho. La clave del éxito es entender para qué trabajo están utilizando tu producto los clientes. Estamos muy emocionados, ya que este año está preparado para estar lleno de nuevos y emocionantes lanzamientos.

Con suerte, ¡estaremos charlando sobre ellos a lo largo del camino! Hasta que nos encontremos de nuevo …

La manera más inteligente de conectar con tus suscriptores

Motivamos a los marketers con soluciones de email engagement intuitivas, respaldadas con estrategias prácticas y soporte dedicado. Incrementa tus ventas y trabaja para hacer a tus clientes felices.