Construyendo la fábrica de sueños
Dream Factory es uno de los proyectos más complejos en los que he participado. Este caso muestra la transformación de una app de recomendaciones en una plataforma para digitalizar procesos de cualquier tipo de negocio; Donde mi capacidad de adaptación y de resolución de problemas ayudó a definir el rumbo de su evolución.
Entendiendo el Reto
Desde el inicio noté que este proyecto era un esfuerzo ambicioso: una app de recomendaciones impulsada por IA y altamente personalizable, que buscaba trascender su alcance inicial centrado en el turismo. Para definir el problema fue necesario navegar entre el potencial sin explotar y las aspiraciones complejas de lo que esta app quería ser.
El software proponía funciones interesantes del lado del administrador: una herramienta de para estructurar visualmente bases de datos y un editor de menú de aplicaciones altamente personalizable. Sin embargo, el desafío residía en que los objetivos de la empresa eran cambiantes. El equipo de ventas, impulsado por la visión de diversificar el alcance a nuevas industrias, sugería direcciones nuevas para el producto constantemente. Revisar prioridades, centrarnos en la escalabilidad de nuestras ideas y navegar por la delgada línea entre la coherencia visual y la flexibilidad de la interfaz de usuario se convirtió en parte de nuestra rutina diaria.
Estudiando la estructura de la app
Visualizando la Complejidad
La primera tarea en la que me enfoqué fue entender a la perfección software de administración que respalda la funcionalidad de la aplicación. Para ello necesitaba visualizar el panorama de las funciones actuales y futuras, el rol que juega el producto para nuestros usuarios, y la lista de deseos de los equipos de producto y ventas.
En este punto la aplicación quería ser un poco de todo y su interfaz de usuario empezaba a parecerse a una venta de garaje digital.
Revisiones del flujo
Algunos de los pain points que identificamos en la primera revisión del administrador
Como ejercicio para mapear los diferentes aspectos que influenciarían la dirección del producto empecé analizando el flujo actual y recolectando la información disponible sobre nuestra base de usuarios.
Al no tener un equipo de UX establecido en ese momento trabajé con el equipo de customer support para levantar feedback de nuestros clientes y conduje algunas entrevistas down-the-hall con compañeros que utilizaban el producto para ayudarle a los clientes a configurar su plataforma o su app.
A partir de esta información nos dimos cuenta que una pregunta que como diseñadora necesitaría resolver en conjunto con stakeholders: ¿Cuál es nuestro papel como proveedores de servicio en la personalización de la plataforma para el cliente?. Era necesario considerar si queríamos permitirle al cliente tener más control sobre su experiencia, ya que esto dictaría la necesidad de invertir recursos en mejorar la usabilidad del administrador.
También surgió una reflexión que informó la estrategia de diseño en adelante: Si nuestro producto ofrece una plataforma personalizada para cada cliente los menus para navegarla deben obedecer la lógica de los procesos del cliente. Si el usuario tiene acceso a partes genéricas del administrador que no tienen que ver con su proceso, se confunde y desvía de sus tareas. Podemos organizar visualmente la información del administrador de manera que las tareas y acciones que son comunes en los procesos de la mayoría de nuestros clientes tengan un patrón predecible.
Navegando entre lo urgente y lo importante
En el sprint inicial, el equipo de ventas nos solicitó priorizar el objetivo de tener un producto atractivo y funcional listo para el mercado en poco tiempo; Esto impulsó nuestro primer enfoque de diseño.
Para cumplir este objetivo colaboré estrechamente con el equipo de desarrollo para crear un editor de sitios web que utilizara las estructuras de datos existentes (que los usuarios ya habían creado para sus apps). Este editor nos permitió ofrecer a nuestros clientes la posibilidad de crear landing pages para promocionar sus apps, e incluso proporcionar el servicio de recomendaciones dentro de su misma web.
Mockups de elementos a incluir en las primeras páginas web, que servirían de base para crear el editor
La segunda tarea fue un rediseño rápido de la aplicación existente que centrara imágenes cargadas por los usuarios. Esto no solo mejoró las posibilidades de nuestros clientes para fortalecer la imagen de su marca en la app, también destacó nuestra habilidad de mostrar colecciones multimedia, una de las funciones más importantes de la app en este momento.
Mockups del primer rediseño de la app
Este proceso también nos obligó a dividir el diseño del producto en dos partes, para obedecer a los perfiles de usuario a los que estamos tratando de llegar: el backend (administrador), al que únicamente tenemos acceso nosotros, el cliente y su personal capacitado, y el front-end (app, web y otras aplicaciones futuras), al que tiene acceso el usuario final, o el cliente del cliente.
Entendiendo mejor esta división y la importancia de tener una jerarquía más clara de información trabajé en una primera iteración del diseño de la interfaz del software de administración. Para esta versión prioricé un lenguaje visual más cohesivo con mayor contraste tipográfico, fuertemente inspirado por Material Design, así como la creación de un menú de acciones que fuera consistente en la mayoría de las pantallas. De esta forma aspirábamos a volver más intuitivo el proceso de carga y manejo de datos. También colaboré en el desarrollo front-end del mismo para agilizar procesos y tener nuestro MVP en el menor tiempo posible.
First_admin_redesign_1_after
First_admin_redesign_1_before
Antes y después de pantalla para mostrar entradas
First_app_2_after
First_admin_2_before
Antes y después de pantalla para configurar una instancia
Construyendo una base sólida para crecer:
Gracias al éxito de nuestro primer lanzamiento nuestra cartera de clientes creció, y con ello la cantidad de funciones nuevas empezó a aumentar exponencialmente. En este momento mi papel se centró en lograr una correcta integración de toda la nueva funcionalidad a nuestra interfaz de usuario existente. Desde la implementación de carritos de compras y reservaciones pagadas de eventos hasta el aumento de opciones permitidas en la base de datos, mi atención se centró en mantener un lenguaje visual consistente.
Visualmente el administrador y la web siguieron recibiendo actualizaciones, tomando prestadas las metáforas visuales y recursos gráficos del Material Design System de Google, pero agregando nuestro estilo único. De esta forma los desarrolladores tendrían un sistema de diseño base bien documentado en el cual basarse para solicitar menos revisiones de diseño al probar nuevas funciones.
Funcionalidad de carrito de compra para compras y reservaciones, adaptada al diseño de la plataforma
La funcionalidad del editor web, una de nuestras herramientas clave, se amplió significativamente. El equipo de desarrolladores y yo agilizamos el proceso de adaptación de los sitios a la marca del cliente creando un sistema de plantillas en CSS. Además de crear los estilos para las plantillas solicité que se implementaran clases de utilidad de librerías CSS, y variables personalizables dentro de las plantillas que se pudieran cambiar para cada sitio web dentro del editor web. Esto permitió a los clientes modificar la apariencia y el contenido de su sitio sin necesidad de solicitar constantemente soporte de nuestra parte. Este sistema de plantillas no solo facilitó la autonomía del cliente sino que también simplificó el mantenimiento de las hojas de estilo de todos los sitios en nuestra cartera.
Wireframes para visualizar el funcionamiento de las variables del sistema de templates
Sitios web sencillos, que pudieron pasarse de mockup a web en un par de días gracias a este sistema.
Visualizando el futuro
A partir de todo este crecimiento surgió una pregunta crítica: "¿Quiénes son los usuarios de nuestro software de administración a medida que nuestro producto madura?" Una encuesta rápida de nuestra base de usuarios en ese momento reveló que el perfil había cambiado. Nuestros usuarios principales ya no eran personas que querían crear una aplicación personalizada y que tocan el contenido lo menos posible, sino propietarios de negocios y especialistas en contenido, dispuestos a invertir tiempo en dominar tareas complejas para automatizar procesos de su negocio.
Esta revelación nos obligó a pensar en qué funciones son más valiosas para una base de usuarios más expertos, aliviando la presión de simplificar demasiado nuestra interfaz de usuario para usuarios menos técnicos. A partir de este momento las nuevas iteraciones de la interfaz de usuario del administrador se enfocaron en optimizar la navegación para realizar tareas más complejas.
Planeando cómo organizar la navegación agrupando acciones
Propuesta de menú izquierdo para mejorar la navegación del Administrador
Al mismo tiempo, el editor web y de aplicaciones pasaron por varias propuestas de rediseño. Si bien una de nuestras ambiciones era incorporar capacidades de edición visual, opté por descartar soluciones drag-and-drop para priorizar el mostrar correctamente la jerarquía de información y las relaciones con la base de datos de la aplicación. En su lugar propuse acompañar el editor con una representación gráfica de la app o el sitio web que de feedback visual y facilite a los usuarios entender el impacto de sus acciones.
Propuesta de editor visual para App y Web
Cómo el usuario da forma al diseño
Durante todo el proceso de diseño me mantuve en contacto con nuestros clientes y usuarios, no solo para brindar soporte, sino como colaboradora de diseño en sus proyectos. Las interacciones diarias con nuestra aplicación y plataforma y las consultas de los usuarios no solo quedaron como notas; fueron un cofre del tesoro lleno de inspiración e ideas, que nos ayudó a dar forma al roadmap de nuestro producto. Necesité ser precavida y no decir que sí a cada solicitud, sino ir identificando oportunidades de crecimiento y funciones deseadas.
El soporte para descargar datos en PDF, la carga de imágenes por lotes, pantallas de formularios personalizables, clases CSS para campos de formulario y visualización con gráficas son algunas de las funciones más valiosas de la plataforma que fueron creadas gracias al crowd sourcing de comentarios de nuestros usuarios y solicitudes de clientes. Estar atentos y escuchar nos ayudó a convertir sugerencias casuales en la columna vertebral de la evolución del producto.
Proceso de los equipos de Diseño y Producto para integrar nuevas features solicitadas por clientes a la plataforma.
Definiendo nuestro valor
Con la transformación de la plataforma de una simple app de recomendaciones en una herramienta para que los negocios digitalicen su información y sus procesos, la relación con nuestros usuarios y clientes se volvió crucial: Su éxito era tan vital para nosotros como lo era para ellos. Esta interdependencia impulsó la misión de mi equipo: infundir valor, a través del diseño, en el producto que estamos ofreciendo.
Bocetos rechazados en diferentes iteraciones
A medida que crecía nuestra apuesta por hacer las cosas bien para los clientes quisimos definir nuestra marca en esta misma dirección. Visualmente también queríamos posicionarnos como colaboradores confiables que priorizan los mejores intereses de sus clientes. Para definir la marca y hacer realidad esta visión trabajé de cerca con nuestra gerente de producto, una especialista en marketing muy experimentada.
Al igual que el proceso de nuestro producto, la marca sufrió iteraciones e incluso un cambio de nombre, testimonio de la dedicación puesta para transmitir el mensaje correctamente.
Iteraciones del logotipo con el nombre anterior
Desde el principio, identificamos una faceta clave de nuestra imagen de marca: el uso de una biblioteca de íconos, ilustraciones y otros elementos gráficos que mantuviera una consistencia fuerte sin ser rígida. Los elementos debían adaptarse a diversas formas, colores y estilos, reflejando la esencia de la flexibilidad de nuestro producto.
Estilo visual de los elementos gráficos de la marca
En iteraciones posteriores, elegí poner el foco del mensaje de la marca en estos elementos y una paleta de colores principal en lugar de nuestro logotipo. Este se simplificó y se centró en tener una identidad tipográfica sólida: ser a la vez una imagen reconocible y un lienzo en blanco, que simboliza nuestra adaptabilidad.
Brand_light
Brand_dark
Logotipo y paleta de colores de Dream Factory
Aceptar el cambio
Al revisar este caso me ha costado trabajo definir en pocas palabras cuál fue mi papel como diseñadora. Considero que, más que sólo realizar tareas de diseño y resolver problemas, quise involucrarme como parte de una narrativa transformadora. Desde el inicio decidí creer en las ambiciones del proyecto, abrazar los desafíos de modelar prioridades, visualizar la escalabilidad de cada componente diseñado, equilibrar la consistencia visual con la flexibilidad, simplificar sin sacrificar la versatilidad y ayudar a adaptarnos a un mercado que cambia rápidamente.
El éxito de nuestro proceso de diseño se basó en nuestra capacidad como equipo para adaptarnos. Las iteraciones, giros y evoluciones no fueron solo respuesta a la urgencia de crear un producto para vender o a los comentarios de los usuarios, sino reflejos de nuestro compromiso de adelantarnos a los cambios del mercado. El diseño UI/UX, la columna vertebral de nuestro producto buscó ajustarse constantemente a las necesidades cambiantes de tomadores de decisiones, clientes y usuarios.
Aunque es el fin de este capítulo para mi el proceso del diseño de la fábrica de sueños no termina: se sigue transformando. Aún con todas las consideraciones para anticipar demandas futuras ningun proceso de diseño puede ser un punto final; pero confío en que nuestro trabajo representa la base sólida pero flexible que este proyecto necesita para seguir creciendo.
