DISCUTO

Una plataforma de debate e ideación con más de 20,000 usuarios.

 
discuto_spacing.png

diseño visual / ux

top_spacing.png
 
discuto_top.jpg
 
 

EL RETO

Discuto, una plataforma que tiene como objetivo principal la discusión, debate y consenso de documentos e ideas, tenía el objetivo de renovarse y crecer con el fin de convertirse en la herramienta de referencia para las discusiones grupales. Para lograrlo, era necesario un rediseño de la plataforma, así como un nuevo sitio web, una nueva página de inicio y nuevos elementos visuales.

 

EL TRABAJO

Como miembro de Proudsugar, mi trabajo en este proyecto para Discuto se focalizó en tres áreas clave:

-Todo el diseño visual, incluyendo el trabajo en ilustración, "look & feel", iconografía, vídeo y productos físicos (carteles y "banners")

-Trabajo en UX y UI, incluyendo el análisis del UX existente; creación y desarrollo del nuevo UX, y la posterior creación de los prototipos de la misma.

-Investigación y análisis de competidores y clientes, "costumer journeys", casos de uso, "flows".

 

EL PROCESO Y EL RESULTADO

Plataforma de Discusión e Ideación

El objetivo fundamental era mejorar la usabilidad de la plataforma para que de esta manera los usuarios pudieran discutir y comentar los documentos e ideas de una manera más efectiva y sencilla, pero a su vez de manera más completa. Este nuevo y atractivo marco permitiría a los usuarios una mejor utilización de la plataforma y la obtención de mejores resultados.

El proceso comenzó con la definición de los objetivos. Seguidamente, se abordaron diferentes fases tales como el análisis de los competidores, "customer journeys" o los "customer personas". A continuación, en la fase "Structure" se realizó el trabajo de análisis y desarrollo para llegar a las nuevas soluciones en términos de UX.
(visite mi página "Sobre mi trabajo" para saber más acerca de la metodología y el proceso que sigo)

 Análisis de UX, "customer journeys", "story boarding", desarrollo de la nueva UX.

Análisis de UX, "customer journeys", "story boarding", desarrollo de la nueva UX.

En esta fase llegamos a la solución de crear dos pestañas separadas que albergasen cada una la descripción y discusión, rompiendo así la estructura de la anterior plataforma. En la versión anterior (ver abajo), una página única contiene ambos elementos, con la consiguiente congestion de información. Además, no se mostraba información potencialmente útil, y además de esta manera se evitaba una exagerada longitud de la página, haciendo que el usuario encontrase la discusión demasiado abajo.

Por lo tanto, la pestaña de la "descripción" incluiría la información general, el tiempo, la descripción principal de la discusión, la actividad más reciente de los usuarios, entre otros elementos. La segunda pestaña, "discusión", lleva al usuario a la discusión en sí, y está 100% centrado en el documento, en los párrafos, los comentarios, "likes", etc. Por supuesto, las pestañas están siempre visibles y de este modo el usuario puede ir de una a otra fácilmente.

 
 
 
old_new_dis.jpg

 

La idea fue ofrecer al usuario la información apropiada y necesaria relevante para la discusión y la mejor manera posible de interactuar con ella; ello implica una forma fácil y rápida de acceder a la discusión en sí misma para participar a través de una navegación adecuada, teniendo acceso a toda la información relativa en todo momento. Una vez que el usuario estaba en la discusión, tenía que ser capaz de realizar fácilmente todas las acciones comúnmente requeridas (como ver y comentar los párrafos), pero también las acciones no requeridas comúnmente (como para ver "más información").  

Lógicamente, la interfaz, a su vez, debía ser clara y adaptada al uso que los usuarios harían de la plataforma (uso continuo, necesidad de rapidez de lectura y realización de acciones, etc) pero, a su vez, que fuera estéticamente atractiva. 

El siguiente video muestra cómo funciona la plataforma (para discusiones):

 

Por supuesto, se tuvieron en cuenta las diferentes resoluciones de pantalla así como los diferentes tipos de dispositivos para asegurar un uso apropiado independientemente del cómo accediese el usuario a la plataforma.

discuto_devices.jpg

 

Junto con la plataforma, también se rediseñó la interfaz de administración, en la que el usuario puede consultar sus discusiones creadas, en las que participa, en las que ha sido invitado, así como toda la información relativa a ellas, para permitirle compartir, gestionar y administrar todas las discusiones y las ideas de la mejor manera posible y tener todo bajo orden.

Además de la mejora de la plataforma a través de las áreas previamente comentadas, se creó un nuevo sistema de "gamification" con el fin de aumentar el compromiso el "engagement" y la fidelidad de uso dentro de la plataforma.

onboarding_discuto_web.png

 

Website

En relación a la web, los objetivos fueron, por un lado, explicar las características fundamentales de Discuto, para permitir a los potenciales clientes comprender el producto en toda su dimensión y darles suficientes razones para elegirlo frente a otras opciones existentes en el mercado; por el otro, mostrar la alta calidad del producto. La clave para alcanzar estos objetivos fueron el atractivo visual, una usabilidad y una arquitectura de la información adecuadas y una redacción clara y directa.

 
 
 

Ilustraciones/Iconografía/Elementos visuales

En relación al estilo de las ilustraciones, la idea fue crear algo emocionante, divertido, a la par que elegante; fácilmente adaptable en cualquier tipo de resolución y muy comunicativo. Los colores fueron elegidos de acuerdo con el estilo de la identidad visual de Discuto, pero añadiendo diferenciación y dinamismo. La intención de mostrar el atractivo de la ilustración fue, una vez más, para mostrar la calidad y para conectar la buena calidad con el funcionamiento interno de la plataforma.

En relación con los iconos, la claridad era el objetivo principal, pero también lo era mantener el estilo del sitio web / producto y crear así una experiencia coherente y homogénea.

illustra.jpg

Finalmente, se trabajó también en diferentes áreas tales como plataformas sociales, en la adaptación de elementos ya existentes, o por ejemplo en la creación de banners y carteles para su uso en convenciones y otras reuniones de ventas.

twitter.jpg
facebook.jpg
banner_2.jpg
top_spacing.png