Rediseño de plataforma cloud y arquitectura de información

01Contexto

Una consola que también tiene que vender servidores

Arvan Cloud es un proveedor iraní de nube y CDN. Las empresas usan su consola para comprar y mantener servidores en la nube, guardar archivos y distribuir contenido. Sina trabajó allí a tiempo completo en diseño de producto, en la interfaz de la consola y su arquitectura de la información.

Una consola así tiene dos funciones. Es donde los clientes gestionan lo que ya tienen en marcha, y es donde los clientes nuevos compran su primer servidor. Este caso sigue la segunda, desde la web pública hasta un servidor funcionando, y luego muestra páginas del rediseño de la consola, todas publicadas: el último paso del asistente, la lista de servidores, la página del servidor y el gestor de archivos del almacenamiento de objetos.

02Problema

Dos lugares donde se perdían compradores

La investigación señaló dos problemas. Quienes visitaban la web de Arvan casi nunca llegaban a la consola para comprar. Y quienes empezaban el asistente de creación de servidores lo abandonaban mientras intentaban averiguar qué recursos necesitaban.

Google Analytics mostró el primero. De los eventos del sitio que se seguían para este recorrido, unos 90 de cada 100 eran visitas a la página de inicio y 9 a la página de servidores en la nube. Cerca de 1 era un clic en el botón de esa página desde el inicio, y menos de 1 un clic en «Comprar».

El tablero de la prueba de usabilidad, de septiembre de 2021, muestra por qué. Recoge una sesión con alguien que llevaba dos años de desarrollo full stack y que, en una pantalla de 1366 × 768, quería montar un servidor Windows con un panel de hosting. Sus preguntas principales eran sobre el propio producto: qué diferencia hay entre la nube y el hosting, si un servidor en la nube es lo mismo que una máquina virtual y si convenía comprar un servidor o un plan de hosting. Y luego, sobre la consola: «¿Por qué este panel no explica qué es cada cosa?»

El tablero clasifica cada hallazgo por tipo: problema de texto, de diseño, de producto o técnico.

Ninguna introducción llevaba del inicio de la consola al producto de servidores en la nube, y los demás productos en la nube a su alrededor distraían más de lo que ayudaban.
Los nombres no coincidían: la web decía «servidor en la nube», la consola IaaS y «computación en la nube», y la página del producto introducía «Abrak» sin explicarlo.
Un error saltaba la página de primera visita, así que la persona de la prueba llegó a «No tienes ningún servidor» sin haberla visto nunca.
El botón para crear un servidor y las guías no eran claros.
En el paso del tamaño, los criterios de decisión eran complejos y las pestañas no se leían como partes de una misma elección.

La prueba y la analítica coincidían: la gente se perdía primero en las palabras y después en el paso del tamaño.

Dos gráficos de Google Analytics: la proporción de eventos de la página de inicio, la página de servidores en la nube, su botón en la página de inicio y su botón Comprar; debajo, un embudo desde la página de servidores en la nube hasta el asistente de creación de servidores de la consola, con las cifras difuminadas — Figura 02Google Analytics, de la web a la consola: la mayoría de los eventos seguidos eran visitas a la página de inicio, y pocos llegaban a Comprar en la página de servidores en la nube. Las cifras están difuminadas.

03Investigación

Elegir la herramienta de análisis

Sina escribió para el equipo un documento de requisitos para una herramienta de análisis del comportamiento de los usuarios y lo presentó. La herramienta debía registrar el comportamiento sin tener que definir eventos antes, ser lo bastante sencilla para todos los equipos, convertir los objetivos en métricas compartidas y no ralentizar nunca el producto ni debilitar su seguridad. Se compararon Google Analytics, Mixpanel, Amplitude, FullStory y Heap, y se eligió Heap: registra cada interacción, así que cualquier pregunta nueva puede responderse con comportamiento ya capturado, y llevaba varios meses funcionando sin problemas en la consola.

Un tablero en persa titulado «Requisitos de una herramienta de análisis del comportamiento de los usuarios», presentado por Sina Oshaghi: lo que necesita el equipo, las cinco herramientas estudiadas y los motivos para elegir Heap — Figura 03Dos de los tableros de investigación de Sina, en persa: los requisitos que llevaron a Heap y las métricas con las que se juzgaría la consola.

Un tablero en persa titulado «Métricas del lado de la consola»: conversión desde el inicio de la consola a la lista de servidores, de la lista a un servidor nuevo y de la elección del centro de datos al final del asistente, y una puntuación de lo difícil que fue crear un servidor — Figura 03Dos de los tableros de investigación de Sina, en persa: los requisitos que llevaron a Heap y las métricas con las que se juzgaría la consola.

04Plan de seguimiento

Medido por la conversión del flujo de usuario

Todo el flujo se midió por conversión: de quienes llegan a una pantalla, la proporción que llega a la siguiente. Las métricas del lado de la consola fijaron las tres conversiones con las que se juzgaría la consola: del inicio de la consola a la lista de servidores, de la lista a un servidor nuevo y del centro de datos al final del asistente. Una puntuación al final del asistente añadiría lo difícil que resultaba crear un servidor.

Después, un plan de seguimiento recorrió el flujo pantalla por pantalla, con un tablero para cada una, fechados en septiembre y octubre de 2021. Cada tablero numera los elementos de la pantalla y dice, para cada uno, qué registrar, con qué herramienta y por qué: Heap para clics, tiempo y abandonos, el BI de Arvan para los sistemas operativos e imágenes del marketplace instalados, y Hotjar o Hantana para los mapas de calor. En conjunto eso significaba: clics y tiempo hasta encontrar el botón de crear servidor, abandonos en cada paso, qué centros de datos y sistemas operativos se eligen, cuánto se desplazan las tablas de tamaños, cuánto tiempo se pasa en el tamaño personalizado, si se añaden redes privadas o cortafuegos, si se crean varios servidores a la vez o se les cambia el nombre, y si en la última página se copian los datos del servidor.

Heap convirtió el asistente en un embudo de siete pasos: la lista de servidores, la página de centros de datos, después la elección del sistema operativo, el tamaño, el método de acceso y el nombre, y por último los detalles del servidor. Cada paso de una etapa a la siguiente se midió de cuatro formas: cuántas personas lo superaron, cuántas interacciones hicieron falta, cuánto tiempo llevó y cuántas salieron del producto y volvieron.

Un paso destacaba en todas las medidas. Tras elegir el tamaño solo continuó el 73,09 %, frente al 89-99 % de los demás pasos. Ese avance llevó una mediana de 5 interacciones y 23 segundos, el doble aproximado que los otros, y el 3,8 % salió del producto y volvió antes de seguir, más que en cualquier otro paso. Elegir el sistema operativo también hacía perder gente, sobre todo a quienes buscaban algo distinto de los sistemas más usados o en el marketplace. En total, el 52,19 % de quienes empezaron el asistente lo terminó.

Elegir el tamaño es el único paso que pide prever lo que necesitará el proyecto. Fue el que costó más clics, más tiempo y más compradores.

Un tablero en persa del plan de seguimiento para el inicio de la consola: la pantalla con los productos de Arvan y la tarjeta de servidores en la nube numerada, y debajo las medidas: el camino hacia el producto, el tiempo hasta encontrar el botón, los abandonos y un mapa de calor de clics

Un tablero en persa del plan de seguimiento para la página de servidores en la nube en una primera visita: una página vacía que explica qué es un Abrak, con un botón de nuevo servidor, y medidas para encontrar el botón y la guía, los abandonos, el éxito tras leer la guía y un mapa de calor

Cómo se hizo el trabajo

01
EscucharUna prueba de usabilidad moderada, encuestas y cada mensaje a la empresa en Twitter e Instagram
02
ElegirRequisitos de una herramienta de análisis, cinco herramientas comparadas, Heap elegida y presentada

Un embudo de Heap con los siete pasos para crear un servidor, de la lista de servidores a los detalles del servidor, con la conversión entre cada par de pasos; la mayor caída llega tras elegir el tamaño, y el 52,19 % termina — Figura 05El embudo de Heap del asistente de creación de servidores: la mayor caída llega tras el paso del tamaño (continúa el 73,09 %), y termina el 52,19 %.

El análisis de esfuerzo de Heap sobre los mismos siete pasos: conversión, interacciones, tiempo de uso y tasa de regreso entre cada par de pasos, todo en su peor punto después de elegir el tamaño — Figura 06El análisis de esfuerzo de Heap: salir del paso del tamaño exige más interacciones, más tiempo y más regresos que ningún otro.

05Solución

Dos formas de elegir un tamaño

Sina diseñó el paso del tamaño de dos formas. Las dos mantienen el mismo marco: el título «Elegir el tamaño del servidor», cuatro pestañas para servidores generales, optimizados para memoria, optimizados para cómputo y personalizados, y los botones Volver y Confirmar. Se diferencian en cómo se elige el tamaño.

La opción 1 enumera tamaños listos en una tabla, agrupados por escala y empezando por los pequeños. Cada fila indica la CPU, la memoria, el SSD, el paquete base y el precio mensual, y una nota sobre la tabla explica las dos generaciones de hardware. Hay una fila ya seleccionada, para que quien no sepa qué elegir pueda seguir igualmente.

La opción 2, la pestaña personalizada, ajusta los núcleos del procesador, la memoria y el disco con tres deslizadores. Una tarjeta al lado actualiza el precio mensual y por hora con cada movimiento. Un tamaño montado con los deslizadores cuesta lo mismo que la fila equivalente de la tabla.

Dos versiones del paso de elegir tamaño, en persa: la opción 1, una tabla de tamaños listos con CPU, memoria, disco y precio mensual; la opción 2, deslizadores de CPU, memoria y disco junto al precio mensual y por hora — Figura 07El paso del tamaño de dos formas, ambas publicadas: tamaños listos en una tabla (1), o núcleos, memoria y disco ajustados con deslizadores y con precio a cada movimiento (2).

06Prueba A/B

Qué mostró la prueba A/B

Sina hizo una prueba A/B de los dos diseños, con la conversión como medida. El informe de Heap agrupó a las personas según el control que usaron en el paso del tamaño: de todos los que empezaron el asistente, el 44 % ajustó el tamaño con los deslizadores y cerca del 1 % eligió una fila de la tabla. El resto no tocó ninguno de los dos.

Todo el grupo de los deslizadores llegó al paso del tamaño, frente al 87,74 % del resto. En la presentación de Heap, Sina planteó esa diferencia como punto de partida de una hipótesis, no como un veredicto: el paso del tamaño ofrece demasiadas opciones en una interfaz complicada, así que menos opciones y un control más sencillo deberían hacer pasar a más gente.

Esa cautela era acertada. El grupo de los deslizadores llegaba al paso del tamaño por definición, porque los deslizadores solo existen ahí. Al final del asistente, los dos grupos grandes estaban igualados: terminó el 52,04 % de quienes usaron los deslizadores, frente al 52,30 % del resto.

La gente prefirió claramente ajustar el tamaño por su cuenta a leer una tabla. Esa preferencia no se tradujo en más servidores creados, y los dos diseños se publicaron como pestañas del mismo paso.

Preferencia y conversión son resultados distintos: los deslizadores ganaron la primera y dejaron la segunda donde estaba.

El análisis de grupos de Heap sobre el asistente: los usuarios separados según ajustaran el tamaño con los deslizadores o lo eligieran en la tabla, con la proporción que llega a cada paso; el número de usuarios está difuminado — Figura 08El informe de Heap sobre la prueba A/B: usuarios agrupados según ajustaran el tamaño con los deslizadores o eligieran una fila de la tabla. El número de usuarios está difuminado; los porcentajes son de Heap.

07Siguientes pasos

Un último paso que pone en marcha la configuración

El plan de seguimiento observaba lo que la gente hacía en la última página del asistente: si cambiaba el nombre del servidor y si copiaba sus datos. En el rediseño, esa página se convierte en un punto de partida.

Una barra de pasos muestra seis pasos completados y el séptimo, la creación, en curso: centro de datos, sistema operativo, tamaño, disco, ajustes avanzados, y nombre y cantidad. Cada servidor nuevo tiene una tarjeta con su progreso, su nombre de usuario y una contraseña oculta, ambos con botón de copiar. Un servidor que falló se vuelve rojo, con un enlace a los detalles.

Debajo de los servidores, cuatro tarjetas ofrecen lo que la mayoría de los servidores necesita después, para configurarlo mientras se crean: añadir un disco, configurar un cortafuegos, activar copias de seguridad y crear una red privada. Cada una tiene una línea que explica el porqué, una guía y un botón. Dos listas cierran la página: artículos para empezar, como configurar el cortafuegos o proteger el servidor, y otros para resolver problemas, como los de SSH.

Es una respuesta a la pregunta de la prueba de usabilidad: la página explica qué hacer a continuación, donde la persona de la prueba no había encontrado ninguna explicación.

Una versión anterior de esta página, dibujada de dos maneras, era un mensaje de éxito para un servidor: su nombre de usuario, la dirección IP y la contraseña, con botón de copiar en las dos últimas, y una línea que decía que esos mismos datos también se habían enviado por correo. Debajo había dos avisos: uno decía que, si SSH no conecta, hay que revisar primero los ajustes del cortafuegos, y el otro que, una vez cerrada la ventana, la consola ya no da acceso a las credenciales. Los dos dibujos solo se distinguen en los avisos, que van como dos tarjetas una junto a otra o como dos líneas finas, una debajo de la otra.

El último paso del asistente de creación de servidores, en persa: seis pasos completados y el séptimo en curso, tres servidores creándose con nombre de usuario y contraseña oculta, uno de ellos fallido; después, tarjetas para añadir un disco, configurar un cortafuegos, activar copias de seguridad o crear una red privada, y artículos para empezar y para resolver problemas — Figura 09El último paso del asistente: el progreso y las credenciales de cada servidor, un servidor fallido con sus detalles, y cuatro pasos siguientes con sus guías.

Una versión anterior del último paso del asistente de creación de servidores, en persa: una marca de verificación grande y un mensaje de que el servidor se creó; una tarjeta con el nombre de usuario, la dirección IP con un botón de copiar y una contraseña oculta marcada como copiada; una línea que dice que los datos también se enviaron por correo; dos avisos uno junto a otro, uno rojo y otro turquesa; y un botón Entendido

La misma página con los dos avisos dibujados como dos líneas finas, una turquesa sobre una roja, entre la línea del correo y el botón Entendido

08Consola

La lista de servidores, la página del servidor y el gestor de archivos

El rediseño abarcó también las páginas que se usan una vez que se es cliente. La lista de servidores se abre con una pestaña por centro de datos, en Irán y uno en Ámsterdam, con una búsqueda limitada al centro abierto, acciones en bloque, un filtro de etiquetas y un botón de servidor nuevo. Cada fila muestra el estado, el nombre y el tamaño de un servidor, su usuario de acceso, sus etiquetas y sus acciones; un servidor que aún se está creando muestra su progreso. Otra versión de la lista añade la dirección IP de cada servidor y una acción para trasladarlo a otro centro de datos.

La lista es también la página más visitada. Sina ordenó las once páginas principales de la consola por sus visualizaciones en Google Analytics entre el 1 de mayo de 2019 y el 14 de marzo de 2020, antes del rediseño: la lista de servidores se llevó unas 72 de cada 100 y la página de creación unas 10. El asistente empieza en el botón de servidor nuevo de esa lista.

La página del servidor, que aparece al principio de este caso, responde a una historia de usuario, con palabras de Sina: «Como usuario, quiero ver el estado y los detalles de mi servidor para comprobar que todo va bien, con algunas operaciones para usar mi servidor». Primero va lo necesario para llegar al servidor: su nombre y si está encendido, el comando SSH y las direcciones IP pública y privada con botones de copiar, y una guía de Escritorio remoto. Al lado están los datos del plan y una fila de acciones: encendido, eliminar, ajustes, rescate, cambiar tamaño, reconstruir, consola e instantánea. Debajo, unas pestañas agrupan ajustes, red, uso, instantáneas, consola, reconstrucción y eventos; la pestaña de uso representa la CPU y la memoria de la última hora.

El gestor de archivos del almacenamiento de objetos lista las carpetas y los archivos de un bucket con su tamaño, su fecha de creación y un interruptor que hace público un archivo. Las subidas ocurren en la propia lista: una fila se llena mientras se sube su archivo, y una subida fallida se vuelve roja con un botón de reintentar. Una ruta de navegación al pie muestra el camino desde el bucket hasta la carpeta abierta.

Todas estas páginas comparten un marco: una barra con los productos de Arvan (CDN, IaaS, VoD, Live, Ads y PaaS) y un menú para el producto abierto.

La lista de servidores de la consola de Arvan Cloud, en persa: arriba una pestaña por centro de datos, una búsqueda, acciones en bloque y un botón de servidor nuevo, y después filas con el estado, el nombre, el tamaño, el usuario, las etiquetas y las acciones de cada servidor, dos de ellos aún creándose — Figura 11La lista de servidores: una pestaña por centro de datos, búsqueda, acciones en bloque y etiquetas, y dos servidores aún creándose.

Una versión anterior de la lista de servidores de la consola de Arvan Cloud, en persa: arriba una pestaña por centro de datos, con la abierta destacada, una búsqueda, acciones en bloque, un filtro de etiquetas y un botón de servidor nuevo, y después filas con un icono de estado, el nombre y el tamaño, el usuario, la dirección IP, las etiquetas y las acciones; en la barra superior, una fila de iconos redondos, el saldo y una campana — Figura 12Una versión anterior de la lista de servidores. Ya tiene las pestañas de los centros de datos, la búsqueda, las acciones en bloque, un filtro de etiquetas y el botón de servidor nuevo. La versión posterior añade una barra de progreso para un servidor que aún se está creando y la ciudad bajo cada pestaña, y pasa los iconos de auricular, calculadora y libro de la barra superior a la barra de productos.

El gestor de archivos del almacenamiento de objetos en la consola de Arvan Cloud, en persa: los archivos de una carpeta en filas con tamaño, fecha y un interruptor de enlace público, una fila subiéndose al 60 %, otra fallida con un botón de reintentar, y arriba botones para subir un archivo y crear una carpeta — Figura 13Almacenamiento de objetos: los archivos de una carpeta, una subida en curso, una subida fallida con botón de reintentar y un interruptor de enlace público en cada archivo.

09Decisiones clave

Seis decisiones

Cada una se ve en las imágenes, en el archivo o en los datos que hay detrás.

01
Elegir una herramienta de análisis que lo registre todo
Heap captura cada interacción sin definir eventos de antemano, así que cualquier pregunta nueva sobre el asistente puede responderse con comportamiento ya registrado, también por personas ajenas al diseño y al análisis.
Compromiso
Una segunda herramienta junto a Google Analytics supone dos juegos de cifras que no siempre coincidirán.
02
Medir cada paso antes de rediseñar ninguno
El embudo y el análisis de esfuerzo situaron el problema en un solo lugar, el paso del tamaño, en vez de repartir la culpa por todo el asistente.
Compromiso
Hubo que seguir eventos en la web y en la consola antes de obtener ninguna respuesta.
03
Mantener tamaños listos, con una elección ya hecha
La tabla agrupa los tamaños por escala, muestra los recursos y el precio mensual de cada uno y empieza con una fila seleccionada, para que quien no sepa qué elegir pueda seguir.

10Mi rol

La parte de Sina

Tomado de las imágenes publicadas por Sina, de las páginas de investigación del archivo de Figma, de los diseños que allí llevan el nombre de Sina y de dos diseños anteriores de páginas que Sina aportó. Otro diseñador trabajó en la consola junto a Sina; sus pantallas no se muestran aquí.

Responsable

La investigación del flujo de compra: una prueba de usabilidad moderada, encuestas y mensajes de redes sociales
Los requisitos de una herramienta de análisis y los argumentos a favor de Heap
Un plan de seguimiento para cada paso del asistente, y los análisis de embudo y de esfuerzo
Los dos diseños del paso del tamaño, y su prueba A/B
El último paso del asistente, la lista de servidores, la página del servidor y el gestor de archivos del almacenamiento de objetos

Corresponsable

Colaboración

Otro diseñador, en otras pantallas de la consola
Los equipos de ingeniería de Arvan, sobre el rendimiento de los servidores
Los equipos de producto de Arvan, para llevar los hallazgos a la consola

Estos diseños se publicaron en la consola de Arvan. Las demás pantallas del archivo que llevan el nombre del otro diseñador, o ningún nombre, se han dejado fuera.

11Resultados

Qué produjo el trabajo

Los diseños se publicaron, pero los datos no muestran un resultado de negocio: ninguna cifra de satisfacción ni de ingresos, y en la prueba A/B la finalización se quedó en torno al 52 % con cualquiera de los dos controles.

herramientas de análisis comparadas: 5; Google Analytics, Mixpanel, Amplitude, FullStory y Heap; Entregable
pasos del asistente medidos: 7; Cada uno con su conversión, interacciones, tiempo de uso y tasa de regreso; Entregable
diseños del paso del tamaño: 2; Tamaños listos en una tabla, y deslizadores personalizados con precio en directo; ambos pasaron por una prueba A/B y se publicaron; Entregable
páginas de la consola rediseñadas: 4; El último paso del asistente, la lista de servidores, la página del servidor y el gestor de archivos, todos publicados; Entregable

Qué se entregó

Una prueba de usabilidad del flujo de compra, con los hallazgos clasificados por tipo
Un documento de requisitos y los argumentos a favor de Heap
Un plan de seguimiento, y un análisis de embudo y de esfuerzo del asistente de creación de servidores

12Lo que aprendí

Lo que cambiaría

01
Juzgar un cambio al final del embudo
El grupo de los deslizadores llegaba siempre al paso del tamaño, porque los deslizadores solo existen en ese paso. La cifra que podía mostrar una diferencia era la proporción de quienes terminaban, y era la misma en los dos grupos. Es la cifra que presentaría primero.
02
Presentar los grupos que forma la prueba
La prueba A/B repartió a los compradores al azar, pero el informe los agrupó según el control que tocaron, y eso mezcla el diseño con quienes lo eligen. La cifra que muestra si los deslizadores retienen a más compradores es la finalización en cada mitad aleatoria.
03
Registrar cada sesión tan a fondo como la primera
El tablero de la prueba documenta por completo a una sola persona, y su hoja de tiempos tiene sitio para cinco. Completar las cinco sesiones habría mostrado qué problemas son frecuentes y cuáles eran de una sola persona.
04
Poner palabras a las acciones que no se pueden deshacer
La página del servidor alinea ocho acciones como iconos, entre ellas eliminar y encender o apagar. Una etiqueta en esas dos costaría poco espacio y podría evitar un error caro.

Idioma

Rediseño de plataforma cloud y arquitectura de información

Una consola que también tiene que vender servidores

Dos lugares donde se perdían compradores

Elegir la herramienta de análisis

Medido por la conversión del flujo de usuario

Cómo se hizo el trabajo

Dos formas de elegir un tamaño

Qué mostró la prueba A/B

Un último paso que pone en marcha la configuración

La lista de servidores, la página del servidor y el gestor de archivos

Seis decisiones

Elegir una herramienta de análisis que lo registre todo

Medir cada paso antes de rediseñar ninguno

Mantener tamaños listos, con una elección ya hecha

La parte de Sina

Responsable

Corresponsable

Colaboración

Qué produjo el trabajo

Qué se entregó

Lo que cambiaría

Juzgar un cambio al final del embudo

Presentar los grupos que forma la prueba

Registrar cada sesión tan a fondo como la primera

Poner palabras a las acciones que no se pueden deshacer

Dejar que cada comprador ajuste núcleos, memoria y disco

Terminar el asistente con lo que viene después

Explicar una licencia de evaluación antes de que el servidor dependa de ella