Rediseño: borrón y tinta nueva
Cómo rediseñar nuestras apps cambió la forma de pensar y concebir el diseño dentro de Mercado Libre.
Como ocurre en las empresas más importante de software, trabajar en Mercado Libre requiere estar pensando nuevas soluciones constantemente. Y en esta búsqueda de nuevas ideas, el equipo de UX cumple un rol fundamental.
En ese contexto, durante bastante tiempo en el equipo de diseño estuvimos produciendo soluciones sobre una base que no era sólida y como consecuencia estábamos llegando a un diseño que no nos hacía sentir para nada orgullosos.
Diseño en el ojo de la tormenta
Después de mucho pensar, descubrimos que teníamos un problema de base: nuestro lenguaje visual estaba desactualizado a nivel estético, y no nos permitía reposicionarnos como marca.
Por otro lado, Mercado Libre había crecido exponencialmente en el último año, pasamos de ser 50 a 100 personas en el equipo de UX. A esto se le sumaba el desafío de trabajar con equipos distribuidos en diferentes centros de desarrollo, con un sistema de diseño deficitario, que había escalado de forma irregular. Esto se hacía cada vez más evidente con síntomas como experiencias dispares, inconsistencias y situaciones de caos visual.
Definiendo un norte
Al reconocer el problema que teníamos, nos sentamos a pensar nuestro nuevo desafío: mejorar la métrica de “User engagement” en todas nuestras plataformas, web y app.
Un usuario con un mayor nivel de engagement pasará más tiempo interactuando con el producto y será más propenso a convertir.
Existían muchas maneras de abordar esta problemática, como mejorar el onboarding de los usuarios a nuestros productos, usar push notifications con información relevante, personalizar el contenido, etc. Todas estas técnicas son combinables y pueden potenciarse entre sí como una solución holística. Pero en aquel momento nos pareció pertinente enfocarnos en nuestras interfaces, que era lo que nos tenía realmente incómodos.
Una interfaz más interesante, “linda” y cohesiva a lo largo de toda la experiencia podía mejorar significativamente los niveles de engagement, y nos daría una base mucho más sólida para poder continuar con otras mejoras. Para empezar, teníamos que poner el foco en el aspecto estético del producto.
Había llegado el momento de patear el tablero…
Las aplicaciones nativas como punta de lanza
Si bien nuestra idea era definir un sistema de diseño que se aplicara a todas las plataformas de Mercado Libre, nos enfocamos en el rediseño de las aplicaciones nativas (Android y IOS), que era donde sentíamos que teníamos el mayor déficit.
Foja cero
Paramos todo lo que habíamos planificado y armamos un grupo reducido de diseñadores. Los aislamos de los proyectos en los que venían trabajando, para que pudiesen enfocarse sólo en esta problemática. Y, como sabíamos que no teníamos todas las respuestas, pedimos ayuda a consultores externos que nos aportarían una mirada fresca y diferente…
Le dedicamos muchas horas, muchas reuniones y le pusimos mucho foco.
Tuvimos que cambiar la manera de pensar el producto. Desarrollo, Producto, UX, todos teníamos que entender que el diseño, desde su aspecto más amplio, es tan importante como la performance, la escalabilidad, la arquitectura, la seguridad, y demás aspectos del desarrollo de software.
Y acordamos algunos principios a los que debía responder cada decisión que tomáramos desde aquel momento:
- Poner todo en duda: Era común hasta ese momento mantener decisiones heredadas sin ponerlas en discusión con la excusa de que “ya funcionaban así”. Eso se acabó. En este punto todo aquel elemento que no podía justificarse, se descartaba.
- Pensar fuera de la caja: Este punto se relacionaba bastante con el anterior y se trataba de mirar cada elemento de la manera más objetiva posible, para evaluar si esa era la mejor manera.
- Poder justificar cada pixel: Buscamos promover la simplicidad de elementos y variables dentro de nuestro sistema de diseño. Poder resolver problemáticas complejas utilizando la menor cantidad de recursos posibles.
Sentando las bases
Previo a comenzar con la definición de las pantallas propiamente dichas, delineamos la base de lo que más adelante sería nuestra guía de estilos o “Librería UI”, como la llamamos internamente.
Allí definimos de manera preliminar algunas características del diseño que serían la base para empezar a construir de forma homogénea nuestro nuevo lenguaje visual. De este modo, estaríamos todos alineados y avanzando en una misma dirección.
Algunas de las decisiones más importantes que tomamos fueron:
- Renovamos la paleta cromática: Buscamos colores más brillantes y atrevidos, que le dieran frescura al diseño.
- Unificamos la tipografía: Dejamos de usar las fuentes de sistema en pos de unificar nuestras interfaces y reforzar la identidad de marca. Otro factor clave de esta elección fue que esta tipografía debía verse bien en todas las plataformas.
- Definimos un sistema de grillas: Estandarizamos cada espacio de nuestra interfaz. De esa manera aseguramos la consistencia en las relaciones entre elementos a lo largo de toda la experiencia.
Nacimiento de patrones
Al final de cada día nos juntábamos para revisar los avances, y asegurarnos de que el sistema estuviese creciendo de la forma esperada. Las decisiones aisladas que íbamos tomando, poco a poco se fueron convirtiendo en patrones. Esto nos permitió agilizar el proceso de diseño, y avanzar más rápido hacia una etapa de componentización de elementos de la UI.
Un patrón de diseño es una solución efectiva y reusable a un problema común o frecuente en el desarrollo de software.
Hora de componentizar
A medida que fuimos avanzando tuvimos una idea más clara de lo que sería la foto final del ecosistema, y pudimos empezar a trabajar cada parte de la UI como un componente reusable. Cada componente de la UI tenía una serie de propiedades y una razón de ser dentro del ecosistema. No obstante, estos podían evolucionar o sufrir modificaciones a medida que fuesen surgiendo nuevas necesidades.
Nuestra experiencia nos enseñó que un lenguaje visual unificado no se lograba con reglas estáticas y elementos aislados del contexto. El mejor camino era pensar cada componente como parte de un organismo que evoluciona y cambia constantemente.
Librería UI
Compilamos todos los componentes en un archivo centralizado de Sketch para que todos los equipos de diseño pudieran conocerlo, utilizarlo y hacerlo crecer según sus necesidades.
Sumado a esto empezamos a trabajar codo a codo con los equipos de desarrollo para que cada uno de estos componentes estáticos (modales, listados, cards, etc.) se conviertan en elementos 100% funcionales, accesibles e implementables.
Conclusión
A pesar de haber sido un proceso muy intenso y por momentos estresante, creemos que valió la pena hacer el esfuerzo.
El entusiasmo se expandió de forma exponencial dentro de los equipos de IT. Todos estaban ansiosos de poder empezar a trabajar con el nuevo sistema de diseño y aportar su granito de arena, para que al final del día pudiésemos estar orgullosos del producto en el que trabajamos.
Tener un entendimiento compartido de nuestro estilo visual nos permitió empezar a enfocarnos más en la experiencia de nuestros usuarios, dejando de lado discusiones meramente estéticas. Además, nos facilitó el proceso de prototipado, dándonos la posibilidad de trabajar en alta resolución e iterar rápidamente.
Somos conscientes de que avanzamos muchísimo, pero no nos quedamos con eso. Estamos convencidos de que este camino recién empieza y queda mucho por recorrer…
