Vessel

Vessel | Streaming de Computadoras | UX & Branding

Vessel es un servicio basado en membresías, enfocado en llevar la potencia de computadoras ultra potentes a hogares y negocios por un bajo precio, a través de un servicio completo de streaming y venta de equipos optimizados. El objetivo es que los usuarios no tengan que preocuparse por el hardware, el costo, y el mantenimiento que hay detrás de un equipo de cómputo de alta gama. En este caso, el proyecto se trata del sitio web del negocio, el cual será el medio por el cual los potenciales clientes contratarán el servicio de Vessel.

 

El reto fue diseñar un sitio web que funcione para que los usuarios conozcan la propuesta de valor e información importante del negocio, así como para que se den de alta con alguno de los planes que maneja Vessel.​​​​​​​

Objetivos

– Diseñar un sitio web claro.
– Hacer este sitio web responsivo para distintos tamaños.
– Desarrollar la identidad visual de Vessel.

 

 

Responsabilidades

Conducir entrevistas, wireframes digitales, wireframes en papel, prototipado de baja fidelidad, prototipado de alta fidelidad, estudios de usabilidad e iteración.

Insights de Entrevistas

Para este proyecto entrevisté a 5 personas, las cuales utilizan computadoras y estaciones de trabajo potentes, o quienes tienen en mente comprar; algunos para su hogar y otros para sus oficinas. 4 de estas personas viven en Guadalajara, México, y la otra persona reside en Mérida, México. El objetivo de estas entrevistas fue el de entender cuáles son los retos principales que enfrenta una persona que quiere comprar alguno de estos equipos. También me interesaba conocer cuál ha sido la experiencia en el tema de mantenimiento y actualización de componentes para quienes ya cuentan con computadoras muy potentes.

Los Principales Puntos de Dolor

 -Comprar una computadora potente y que cumpla las necesidades es intimidante.
 -No es muy claro el proceso a seguir para darle mantenimiento a estos equipos.
 -Tienen miedo a que se vuelvan obsoletos rápidamente.
 -Tienen miedo de que dejen de funcionar.
 -Sienten que hay un riesgo de perder mucho dinero.
 -Incertidumbre por el tema de la compatibilidad con distinto software.
 -Tienen miedo de dañar un equipo tan costoso.

User Personas

Antes de iniciar con la parte del diseño, me adentré en entender mejor el comportamiento y el contexto que rodea a los potenciales usuarios de Vessel. Combiné los insights de las entrevistas para poder definir 2 arquetipos de personas.

Mapas de Empatía

Los resultados de las entrevistas iniciales se traducieron en 2 mapas de empatía, los cuales me permitieron aterrizar mejor a los usuarios y sus necesidades.

User Journey

How Might We

Antes del diseño de los wireframes, y en base a la información de los potenciales usuarios, me encargué de realizar un ejercicio de HMW (how might we), abriendo las posibilidades de posibles características y elementos de diseño que se añadirían al sitio web.

Wireframes de Papel

Antes de comenzar con los wireframes digitales y los mockups, inicié con los wireframes en papel. De esta manera fue más fácil realizar cambios y darle mayor claridad al flujo de la experiencia web.

Wireframes Digitales

Uno de los objetivos de la experiencia de Vessel fue el de potenciar el mensaje que el negocio busca transmitir a través de su marca. Un servicio impecable donde se emplea alta tecnología necesita tener una experiencia agradable, profesional y responsiva. Evitar el ruido visual fue muy importante.

Comencé con el diseño del sitio en pantallas móviles, pero estuve trabajando casi al mismo tiempo la versión del sitio para escritorio; ya que era muy importante que las experiencias se sintieran parte de un mismo sistema y no como sitios separados.
 
La selección de planes es el elemento central de la página de inicio, pero para llegar a esta, el usuario pasa por la propuesta de valor del negocio y los beneficios principales.
La página del plan elegido conserva la identidad visual de Vessel y se enfoca en los beneficios de este; ya que el mercado objetivo está dividido entre dueños de negocio, freelancers y apasionados por los videojuegos. Tanto la versión móvil como la de escritorio siguen la misma estructura de la página inicial.
La página de confirmación representa el final del camino principal del usuario. Se es claro con el tema del precio y la duración del plan, evitando patrones oscuros de diseño.

 

Se agregó un mapa en la sección de contacto. Así mismo, al dashboard del usuario sólo pueden acceder las personas que estén bajo alguno de los 3 planes y funciona exactamente igual para cualquiera de estos. Los diferentes equipos virtuales estás divididos en módulos configurables, brindando un orden muy claro dentro de cada oficina. El tamaño del módulo corresponde al tamaño del disco duro. Cuando el usuario hace click en “nuevo equipo”, tiene la opción para agregarlo de forma virtual o encargar la entrega de una computadora optimizada a su domicilio.
Se pueden registrar distintas oficinas bajo una misma cuenta de forma fácil y clara. Y a través de los módulos de equipos se puede agregar un nuevo equipo para alguna de las oficinas del usuario, eligiendo una fecha y hora de entrega.

 

Diseñé una pantalla de seguimiento del equipo en tiempo real y la pantalla de membresía está hecha para hacer ajustes de la cuenta y el método de pago por default. Es muy simple y clara.

Estudio de Usabilidad

na vez convertidos los wireframes digitales a prototipo, realicé un estudio de usabilidad con las 5 personas que entrevisté al inicio del proyecto. La información se aterrizó en un diagrama de afinidad, el cual fue muy importante para entender las áreas de oportunidad del prototipo de Vessel, ya que este nos arrojó los siguientes insights:
 -Los participantes no tenían clara la diferencia entre los 3 planes.
 -Los participantes no sabían cuál plan elegir.
 -Los participantes quieren saber cómo pueden ajustar sus propiedades y equipos.
 -Los participantes quisieran un plan personalizado.
 -Los participantes sienten que la información se queda corta para una compra tan fuerte.
 -Los participantes quieren dejar todo en default.
 -Los participantes quieren saber cuánto espacio de disco duro tienen disponible.
 -Los participantes quieren saber cuál será el costo extra de los equipos nuevos que estén agregando.

 

Kit UI

Además del diseño de la app, me encargué del diseño de la identidad visual de Vessel, especialmente del Kit UI que servirá como base de los mockups.

 

Mockups Iniciales

Los insights del estudio de afinidad me ayudaron a entender los problemas que tenían los usuarios usando los wireframes iniciales, dándome un panorama mucho más claro de hacia dónde llevar el diseño del sitio web.

 

Definí una estructura de jerarquías tipográficas consistente a través de todas las pantallas, aplicando de la mejor forma la identidad visual de la marca. También me enfoqué a darle protagonismo a las imágenes, las cuales sirven para resaltar la propuesta de valor del negocio.

 

El tono de gris oscuro contrasta con los colores principales y resalta el enfoque del negocio hacia un servicio premium. En esta ocasión se diferenciaron de mejor forma los distintos planes.

 

El azul de la marca ayuda a resaltar la pantalla de “Mi Equipo” de forma interesante, siendo combinado con el blanco y generando contraste en los elementos de fondo gris oscuro.

 

En el caso de la versión móvil, el menú se despliega desde la izquierda y cubre casi toda la pantalla. Además se representó mejor la experiencia de la entrega de equipos Vessel en tiempo real.

 

La versión de escritorio fue diseñada casi a la par de la versión móvil, conservando exactamente las mismas características de una forma más completa. Sobre todo porque era importante que el sitio de Vessel se sintiera homogéneo en cualquiera de sus versiones.

 

Toda la aplicación mantiente consistencia con la identidad visual de la marca.

 

Durante el proceso aprendí lo poderoso que es Figma y Adobe XD para construir una experiencia digital impecable pensada en el futuro. Entiendiendo que el producto está en constante crecimiento y nunca será fijo.

 

Whatsapp