Desde que lanzamos Soapbox en junio pasado, nuestro objetivo era simplemente lanzar un producto al mundo lo más rápido posible para ver si realmente había algo en todo este negocio de video 1: 1, ¡y resulta que lo hay! Aprendimos mucho durante el año pasado, como quiénes son los usuarios principales, cómo están haciendo videos y qué podemos hacer para que sea más fácil para ellos. Mientras nuestro equipo reflexionaba sobre todas estas lecciones y pensaba hacia dónde queríamos llevar el producto en el futuro, decidimos que era hora de darle a Soapbox una nueva capa de pintura y tal vez incluso hacer algunos ajustes debajo del capó, y ahí es donde ¡Entré!
Ese soy yo, columpiándome de un árbol en New Hampshire.
Como diseñador del equipo, comencé a pensar en lo que no funcionaba para nosotros y cómo podíamos mejorar el producto. Para empezar, quería asegurarme de que todo se viera reluciente y limpio (después de todo, nuestro producto tiene la palabra “jabón” en su nombre). También identifiqué algunas formas en las que podríamos mejorar la adopción de funciones, al mismo tiempo que redujimos la carga cognitiva en el proceso de edición.
En esta publicación, le daré un vistazo detrás de la cortina de mi proceso de diseño y hablaré un poco sobre por qué estos cambios fueron tan importantes para nosotros y, en última instancia, ¡cómo lo beneficiarán! Vamos a profundizar en.
Si no lo ha escuchado, Soapbox es nuestra cámara web gratuita y herramienta de grabación de pantalla que lo ayuda a crear videos de aspecto profesional directamente desde su computadora portátil.
La marca Soapbox, que incluye el logotipo, los colores y las grandes gotas burbujeantes que cariñosamente llamamos “espuma”, fue creada por Eric y Joe, otros dos diseñadores del equipo aquí en Wistia. Mirando el tablero de la aplicación, me di cuenta de que el uso del color no estaba en el espíritu de la marca que habían creado. La paleta de colores fluctuó entre helado, con texto azul oscuro sobre un fondo azul claro, y oriental, con amarillos brillantes junto a campos apagados de verde azulado.
Para crear una experiencia más unificada y acercar todo al espíritu pastel-pop de Soapbox, claramente necesitábamos hacer algunos cambios.
El mayor de estos fue deshacerse de los colores de fondo y cambiar el color del texto principal a un gris tinta. Quitar el color para que las cosas sean más agradables visualmente puede parecer contradictorio, pero como es común en el diseño, menos es más. Con una base monocromática, me liberé para usar el color de una manera más impactante y significativa. El momento “a-ha” realmente ocurrió para mí cuando miraba la página de rendimiento. Estaba luchando por encontrar una forma convincente de resaltar nuestros números de marquesina: videos vistos, participación promedio y tasa de conversión.
“Puede parecer contradictorio eliminar el color para que las cosas sean más agradables a la vista, pero como es común en el diseño, menos es más”.
Inicialmente, traté de poner estos números dentro de cuadros de colores para que “saltaran”. Pensé que usar estos colores para resaltar información sería una excelente manera de llamar la atención del usuario sobre lo que era importante y reforzar nuestra marca. Desafortunadamente, como puede ver a continuación, el resultado terminó sintiéndose fangoso, pesado y, en última instancia, bastante soso.
Sin embargo, cuando comencé a simplificar la forma en que se usaban los colores, las cosas comenzaron a encajar. Tener esa base monocromática significaba que no había tintes de color en todas partes, lo que significaba que cualquier destello de color más pequeño era más significativo y esencial. Entonces, en lugar de cajas, decidimos usar líneas.
En este caso, un diseño más simple en realidad ayuda a poner más énfasis en lo importante: los números y las miniaturas. Si es un gerente de ventas ocupado que desea verificar sus métricas semanales, quiere que la experiencia sea lo más rápida y fácil posible, sin causar un aumento en la carga cognitiva.
Esta filosofía de diseño, la simplicidad salpicada de toques de color pastel, ahora se lleva a cabo en toda la aplicación. La “alfombra mágica” en la barra de navegación principal (la línea que te permite saber en qué parte de la aplicación te encuentras) ahora cambia de color según la sección en la que te encuentres. Los botones en el flujo de creación de video ahora tienen un tema de color. para reforzar un sentido de lugar y orientación. El objetivo es que la aplicación exprese la naturaleza divertida y jovial que lleva Soapbox en toda su marca, y también que sea increíblemente simple y fácil de usar.
Recientemente también hicimos algunos cambios importantes en la forma en que editas, personalizas y compartes tus videos. Cuando estábamos desarrollando Soapbox por primera vez, nuestro enfoque principal estaba en la velocidad. El diseño dependía de asegurarse de que toda la funcionalidad del producto estuviera disponible por adelantado para que pudieras editar directamente la página que verían tus espectadores. En este sentido, fue genial.
Sin embargo, a medida que el producto creció, recibimos una gran cantidad de comentarios útiles de nuestros usuarios y nos hemos concentrado en cuáles son nuestros principales casos de uso. Esto nos permitió evolucionar el producto con más claridad y producir un nuevo flujo de creación más enfocado, organizado y expandible.
El quid de este cambio es que las tres fases de creación de su video se han dividido. Editar, Personalizar y Compartir se han separado en sus propias secciones. Ahora, cuando haya terminado de grabar un video, aterrizará en la página Editar.
Esta página contiene la misma barra de edición y la misma funcionalidad de edición que antes, pero todas las demás funciones se encuentran en su propia sección única. Al mantener esta página enfocada en la edición, hay un sentido de propósito mucho más claro: piense en ello como cerrar todas las pestañas en su navegador para que pueda concentrarse en la tarea en cuestión. Esta separación también nos permite asegurarnos de que su video se cargue por completo antes de que se realicen otros cambios, lo que reduce la cantidad de errores que pueden surgir en la aplicación. Al igual que con la actualización de la interfaz de usuario, una vez más aprendimos que menos es más.
“Al mantener esta página enfocada en la edición, hay un sentido de propósito mucho más claro: piense en ello como cerrar todas las pestañas en su navegador para que pueda concentrarse en la tarea en cuestión”.
Una vez que su video esté cargado y editado, ahora es el momento de pasar al flujo de personalización. El aspecto de esta página es una gran desviación de lo que teníamos antes, pero aún debería resultar familiar para los usuarios de larga data de la aplicación de video marketing de Wistia.
Cambiar el título y la miniatura, elegir el color de un jugador y agregar un llamado a la acción todavía están en la página, pero ahora están perfectamente organizados en un panel lateral. Hacer clic en una sección revelará los mismos controles que tenía antes y le permitirá realizar las mismas personalizaciones. Al igual que con los cambios en la página de edición, el objetivo es mantener una experiencia enfocada, pero un beneficio secundario es la preparación para la expansión en el futuro. La creación de un sistema más estructurado para estas opciones hace que sea mucho más fácil incluir nuevas características sin tener que preocuparse por cómo encajarán en la interfaz.
Otra faceta de este nuevo diseño que realmente nos encanta es la nueva ventana de vista previa. Había algo de tensión en la interfaz anterior donde las personas no estaban seguras de qué verían exactamente sus espectadores cuando compartían su video. Agregamos este navegador dentro de un navegador para infundir la confianza de que sus espectadores no verían nada que usted no quisiera que vieran.
Ahora que su video está bellamente editado con el color de reproductor perfecto y el llamado a la acción que lo acompaña que mantendrá la conversación, ¡es hora de compartirlo! La interfaz de la página Compartir refleja la nueva interfaz de la página Personalizar, con los mismos beneficios de enfoque y capacidad de expansión.
“La interfaz de la página Compartir refleja la nueva interfaz de la página Personalizar, con los mismos beneficios de enfoque y capacidad de expansión”.
Un detalle que realmente me encanta, y que nuestra ingeniera senior Kim trabajó arduamente para perfeccionar, es la transición de Personalizar a Compartir. Cuando hace clic en el enlace Compartir en la parte superior de la página, todo se desplaza hacia la izquierda y muestra sus opciones para compartir a la derecha.
Queríamos crear una sensación de progresión, manteniendo todo en tierra. Aquí, la ventana de vista previa actúa como un ancla, asegurándole que todavía está en el mismo contexto, mientras que la dirección del movimiento indica que está al final del proceso. El efecto general es una sensación de espacio físico significativo, así como la sensación de concreción.
El equipo de Soapbox aquí en Wistia está muy emocionado de tener estos cambios en manos de las personas que usan nuestro producto: es la culminación de meses de trabajo de diseño e ingeniería. Con estos nuevos cambios, el producto realmente se siente como una manifestación de los valores de Soapbox con una experiencia más enfocada para nuestros usuarios. Estamos estableciendo una base sólida sobre la cual seguir creando funciones que harán que tus videos sean más profesionales, hermosos y exitosos.
