Diseño de SMAT, Plataforma de inversión – Caso de estudio

PROYECTO PROFESIONAL

Brief

Smat es una plataforma Fintech que conecta inversiones alternativas directas con la primera comunidad digital de gestores de patrimonio. 
El objetivo de Smat es proporcionar un ecosistema las herramientas necesarias para mejorar la inversión en activos alternativos y permitir a los gestores de patrimonio administrar los portfolios de sus clientes de forma consolidada y dinámica.

Proyecto profesional

Agosto 2020 – Mayo 2021

📍 Suiza

Como diseñadora UX/UI in company, tuve el placer de trabajar directamente con los fundadores de Smat. Juntos analizamos ideas y tradujimos conceptos en características que luego tendría el producto.
Colaboraré con los desarrolladores para definir los lineamientos de trabajo y el alcance de la propuesta. Diseñé user journeys, wireframes, prototipos y guías de diseño. También colaboré con los QA testers para mejorar la calidad del front-end.

  • Figma
  • Adobe Photoshop
  • Adobe Illustrator

Trabajar con los fundadores, una experiencia enriquecedora

Tener acceso a los fundadores y comunicarme estrechamente con ellos me permitió involucrarme 100% en el producto. No solo eso, también pude aprender sobre todos los aspectos de la empresa, tener siempre presente su misión y visión, saber cómo consiguen más inversores, co-idear estrategias para involucrar a los usuarios y trabajar en sintonía con todo el equipo.

Cuando trabajas en una startup, la jerarquía es horizontal. Tus ideas son escuchadas y reconocidas. Sos una pieza importante en el gran engranaje.

El problema

¿Qué queremos solucionar?

La app web era difícil de usar porque fue creada sin tener en cuenta la experiencia de usuario.
Me incorporé al equipo en un momento en el que empezaron a surgir problemas de usabilidad, así que la empresa decidió poner en marcha un plan de acción donde pusiéramos a las personas en el centro.

Objetivos

¿Qué queremos lograr?

Objetivo UX:
Mejorar la usabilidad y la fiabilidad de la plataforma para satisfacer las necesidades del usuario.

Objetivo comercial:
Atraer nuevos gestores de patrimonio y promotores inmobiliarios.

Proceso de diseño

Descubrir

Aterrizando ideas

Como era demasiado difícil llegar a los clientes de los asesores de inversión debido a los acuerdos de confidencialidad, nos enfocamos en comprender las necesidades de los gestores de patrimonio y sus clientes.

Los stakeholders nos proporcionaron documentación existente para que pudiéramos conocer mejor a los gestores de patrimonio. A partir de esta información, elaboré una serie de preguntas para entrevistar a los asesores de inversión (principiantes y experimentados) y así poder comprender sus puntos de dolor, motivaciones, necesidades y expectativas.

A pesar de las agendas ocupadas que tenían, pude entrevistarlos de forma remota a través de Microsoft Teams.

Hablar con los usuarios me permitió conocerlos, identificar suposiciones y plantear hipótesis sobre su experiencia con Smat. Luego me reuní con los stakeholders para validarlas.
Estas son las tres ideas más importantes que pudimos extraer:

  1. La plataforma heredada (en ese entonces, la actual) les brindó a los gestores plantillas de micrositios o weblets para que mostraran sus inversiones. Debido a su mala experiencia, la mayoría decidió utilizar sus propios sitios web, dando como resultado una experiencia de usuario incoherente y confusa en toda la plataforma. 
  2. A los gestores experimentados les gustaba tener una plataforma para administrar su portfolio de clientes. Les daba visibilidad, credibilidad y acceso a amplios recursos financieros, sin dejar de tener la flexibilidad para crecer como empresarios.
  3. Los gestores principiantes consideraron que la plataforma era una buena manera de impulsar sus carreras y atraer nuevos clientes. Sin embargo, criticaron que esas ventajas no se hicieran evidentes ni en la interfaz ni en otras comunicaciones de Smat. Además, consideraron que la redacción del contenido era muy técnica.

Comprendiendo el user journey

Un correcto proceso UX necesita una base de investigación para entender el punto de partida, descubrir los problemas a resolver e idear una solución viable que funcione. En consecuencia, quise salir a buscar información cualitativa y cuantitativa que me permitiera tomar decisiones fundamentadas en datos, así que realicé pruebas de usabilidad para medir la experiencia actual (cabe mencionar que contaba con recursos muy limitados).

Insights

  • Desktop first: “Encontré la plataforma web mucho más segura y cómoda que la app para el celular”.
  • Sobrecarga de información visual: “La pantalla de inicio tiene tanta información que no sé dónde debo hacer clic. Al final, pierdo el interés”.
  • Indiador de progreso y mensajes de error: “A veces no puedo pasar a la siguiente pantalla. Supongo que he cometido un error, ¡pero no sé dónde ni por qué!
  • Usabilidad de los formularios: “Es muy difícil y toma mucho tiempo completar tantos campos. Creo que la mayoría de los campos son innecesarios”.

Descubriendo los problemas de usabilidad

Para comprender la interacción entre el usuario y la plataforma era importante abordar los problemas de usabilidad actuales. Para lograrlo, utilicé la técnica de la evaluación heurística porque, dados los recursos y los tiempos limitados, era la metodología capaz de cumplir el objetivo de investigación y ajustarse a nuestras posibilidades.

Ver evaluación heurística

Benchmark: Manteniéndonos al día con la competencia

Analicé las cinco principales aplicaciones de gestión de patrimonio que aparecen en Forbes. Esto me permitiría comprender qué otras opciones disponían los usuarios a la hora de gestionar sus inversiones, comparar las funcionalidades que ofrecían y cómo las mostraban, así como entender mejor la industria y los estándares que manejaba.

Durante este análisis, comparé patrones comunes de UX e IA, identifiqué brechas de usabilidad y accesibilidad y alcancé otros objetivos importantes que nos propusimos.

Estas son algunas de las conclusiones a las que llegué:

  • Confirmé que la usabilidad y el atractivo estético eran efectivamente factores significativos que la plataforma de Smat no estaba capitalizando.
  • Smat estaba atrasada en cuanto a los estándares de accesibilidad debido a la pobre arquitectura de la información y la maquetación en HTML.
  • En comparación a las otras plataformas, Smat no promocionaba adecuadamente los beneficios que los asesores de inversión podían obtener en términos de capacitaciones, desarrollo del producto y demás oportunidades relacionadas al crecimiento y la visibilidad.

Definir

Elegir el enfoque correcto

Basándonos en los datos cuantitativos, cualitativos y en las entrevistas con usuarios, creé un retrato de asesores de inversión principiantes y experimentados. Además de servirme como punto de partida para diseñar en base a patrones de conducta que encontré durante la fase de investigación, la protopersona funcionó como un cierre de esta etapa. 

Protopersona de un gestor de patrimonio principiante

Protopersona de un gestor de patrimonio experimentado

Antes de empezar a diseñar, el equipo y yo necesitábamos sentarnos a definir específicamente el problema que íbamos a resolver y establecer cómo mediríamos el éxito de la propuesta. 

Una vez definido el problema, lo transformamos en una pregunta que nos motivara a pensar en soluciones:

  • ¿Cómo podríamos establecer la aplicación Smat como la plataforma preferida para gestores de patrimonio y sus clientes?

Procesar la información

De las entrevistas aprendí que la mayoría de usuarios preferían anunciar y promover sus productos financieros en sus propios sitios web en lugar de en Smat, debido a que la plataforma ofrecía una experiencia de usuario deficiente y no cumplían sus expectativas de uso.

Prototipar

Mejorar la arquitectura de la información

Me di cuenta, a partir del benchmark, que el diseño de la arquitectura de la información de la plataforma heredada o anterior no era óptimo y además no cumplía con las normas de accesibilidad generales.

Sabiendo todo esto, supe que necesitábamos un mapa de la arquitectura de información heredada o actual para entender cómo estaba organizada la información. Este mapa me permitió:

  • Comprender en profundidad las relaciones entre las diferentes páginas
  • Definir la taxonomía agrupando contenidos relacionados.
  • Identificar dónde se ubicaría el contenido y qué se necesitaría para producirlo.

Con el mapa de la arquitectura actual, trabajé con el equipo para elaborar una nueva teniendo en cuenta todo lo aprendido hasta el momento.

Gracias a las soluciones que esbozamos juntos, pudimos llegar a una estructura básica pero completa del sitio, organizar el contenido de forma tal que tuviera sentido y fuera intuitivo para los usuarios encontrar las funciones que buscaban.

Wireframeando para esbozar las soluciones posibles

Basándome en los hallazgos que descubrí hasta el momento sobre las necesidades del usuarios, de la empresa y los estándares de la industria, facilité talleres internos con el equipo para esbozar soluciones posibles. Estas instancias fueron sumamente enriquecedoras porque nos permitió a todos, incluso a los no-diseñadores, compartir su concepto de solución, construir sobre ideas de los demás y finalmente, obtener un resultado más robusto nutrido de diversos puntos de vista.

Una vez que nos alineamos y definimos el camino que íbamos a seguir, comencé a diseñar prototipos de media fidelidad con la intención de evaluar la usabilidad de las propuestas con los gestores de patrimonio.

Testear

Pruebas de usabilidad remotas

Comencé a trabajar en un prototipo interactivo que nos ayudaría a determinar si estábamos satisfaciendo las necesidades de los usuarios en materia de usabilidad y comprensión del contenido. Fue así como llevé a cabo una jornada de pruebas de usabilidad moderadas y remotas con cinco asesores de gestión de patrimonio. Sin embargo, tener acceso a usuarios reales no fue tan sencillo como cuando realizamos las entrevistas, pero los cambios que propusimos los entusiasmaron.

Estos fueron los resultados:

  • El 72% de los participantes pudo completar los pasos de manera exitosa
  • Tiempo promedio en cada tarea: 3 minutos con 16 segundos.

Cantidad promedio de clics: 7

Versión heredada de Smat vs la nueva propuesta

Antes

Después

❌ El primer contacto de los usuarios con el producto era una pantalla vacía, lo que generaba desconfianza e incertidumbre. Había solo una alternativa de autenticación: el correo electrónico, que suponía el esfuerzo de rellenar un formulario de registro. Esto provocaba que los usuarios se frustraran y abandonaran la tarea.

✅ Reformulé el flujo de información y pantallas, ordenándolo de manera clara, cambiando palabras y frases para crear una experiencia intuitiva y positiva desde el comienzo. También agregué varias alternativas de autenticación con redes sociales, ya que los usuarios suelen preferir confiarles el proceso de inicio de sesión.

Antes

Después

❌ Era difícil entender qué campos eran obligatorios para completar. El formulario era muy largo y generaba que los usuarios se frustraran, ya que no sabían cuánto tiempo les llevaría completarlo. Esto a menudo los llevaría a abandonar el proceso por completo.

✅ Estructuré la disposición del formulario en una sola columna, agrupando los campos para ayudar al usuario a comprender el significado de la información que debía completar. Luego agregué una barra de progreso para comunicar los pasos actuales y restantes. Complementé cada campo con un mensaje explicativo al desplazar el cursor por encima (tooltip). También trabajé en los mensajes de error, para que no solo informaran el error, sino que también indicaran cómo solucionarlo. Por último, marqué campos opcionales en lugar de campos obligatorios para facilitar la tarea.

En retrospectiva…

El desafío más grande que enfrenté fue manejar las iteraciones de los diseños, ya que pasamos demasiado tiempo cambiando el contenido y las imágenes. Sin embargo, la agilidad del trabajo con el área de Desarrollo también fue un desafío, porque los desarrolladores no participaron en el proceso de diseño, así que cuando les presentamos el prototipo, se dieron cuenta de que no iban a lograr terminar todas las funciones a la vez. Nos vimos en la necesidad de replantear los tiempos y hacer cambios que inicialmente no estaban planificados.

Luego de iterar y aplicar mejoras gracias al feedback de los stakeholders, llegamos a proponer el diseño definitivo para toda la plataforma. Finalmente, publiqué los documentos Figma en Zeplin para guiar a los desarrolladores en su proceso de implementación.

Lo que se mide, se puede mejorar

Tras meses de diseño y desarrollo, lanzamos nuestra primera versión. Por fin habíamos creado el producto mínimo viable para nuestros usuarios y era tiempo de obtener conocimientos, aprender e iterar sobre nuestro producto.

Recopilé los conocimientos de los stakeholders y luego los traduje en indicadores clave de rendimiento (KPIs) de diseño utilizando el método HEART.

  • “Necesita ser simple y usable” = eficiencia
  • “Gran experiencia del cliente” = satisfacción del cliente
  • “Fácil e intuitivo” = satisfacción del cliente

Para medir el éxito de la propuesta, establecimos campañas con UX CAM, Google Analytics y Confluence para analizar cómo interactúan los usuarios con la aplicación.

Resultados

  1. Plataforma de Inversión robusta: Lanzamos una sólida plataforma web, lo que resultó en un aumento del 20% en las transacciones de inversión.

  2. Comunidad de usuarios activa: Hemos hecho crecer la comunidad de usuarios a 1,000 miembros activos, fomentando la participación e interacción.

  3. Colaboración integrada entre Diseño y Desarrollo: Logramos una reducción del 30% en el tiempo de desarrollo gracias a una colaboración exitosa entre los equipos de diseño y desarrollo.

  4. Expansión de la base de usuarios: Ampliamos la base de usuarios, lo que resultó en un aumento del 25% en la rentabilidad.

Conclusiones finales

Este fue mi primer gran proyecto y realmente disfruté del desafío que supuso. Fue, por lejos, experiencia de mayor aprendizaje que tuve porque me ayudó a desarrollar varias habilidades y mindsets de trabajo:

  • Darle suma importancia al proceso: Sin la implementación de un proceso de diseño adecuado, nunca habríamos encontrado las soluciones necesarias para mejorar el producto y volverlo más intuitivo y usable.
  • Tomar decisiones basadas en datos: Entendí que no podemos darnos el lujo de ignorar los hechos reales a la hora de tomar decisiones, por lo que llevé a cabo una exhaustiva investigación de usuario que me ayudara a guiar y fundamentar mi trabajo.
  • Mejorar mis habilidades sociales: Los continuos debates y conversaciones con otras personas usuarias y del equipo me permitieron comprender sus opiniones, lo que fue muy significativo para mí, ya que me ayudaron a fortalecer las habilidades sociales que son necesarias en un diseñador.
VOLVER AL PORTFOLIO