Construyendo Naranja X: cómo creamos nuestra identidad desde la Home
Hoy, queremos contarte el camino que recorrimos para repensar la Home. Como una receta, juntamos los ingredientes necesarios para crear una estructura cálida, lúdica y escalable, capaz de adaptar sus componentes y sumar nuevas secciones.
Te invitamos a conocer la cocina del rediseño.
Explorando nuevas recetas: ¿qué nos motivó a pensar el rediseño de la Home?
Nos dimos cuenta que la arquitectura anterior no escalaba. A medida que el producto iba creciendo, los accesos se iban acumulando, y la Home parecía una sábana interminable.
Para encarar la nueva estructura, nos propusimos empoderar a las personas, dándole prioridad a las opciones más relevantes y usadas.
Estábamos muy entusiasmados con la posibilidad de re-pensar la Home y lo primero que hicimos fue traducir nuestros principios de diseño en objetivos:
- Facilitar el descubrimiento de la propuesta de valor en un primer vistazo.
- Pensar en la conveniencia de uso con accesos a las acciones más recurrentes y relevantes.
- Lograr una identidad propia que nos haga únicos y nos diferencie de la competencia.
- Acompañar los objetivos de negocio e incentivar el uso y la adopción, a través del diseño.
Cómo preparamos el plato principal de nuestra carta, la Home
El ingrediente más importante: el equipo
Diseñar, construir y lanzar la nueva Home en tres meses fue, solamente, posible gracias a cómo organizamos el trabajo en equipo.
Primero lo primero, nos juntamos con el equipo de desarrollo y construimos un trazado de checkpoints semanales y entregables mínimos para ir avanzando en paralelo. Pero, atenti acá, siempre con el acuerdo de que las definiciones podrían iterarse y entendiendo que todavía teníamos un largo camino por delante antes de llegar al pixel perfect.
Nuestro papel, como equipo de UX, consistía en alinear las expectativas prematuras de cómo debía ser el producto final, las posibilidades técnicas y los objetivos de negocio. Sin olvidarnos de priorizar las necesidades de personas reales por sobre nuestras opiniones sesgadas.
Así, logramos una estructura que nos permitió trabajar en hilos paralelos para descubrir cómo darle forma al producto.
La clave fue tener un equipo de personas abiertas a aprender y a cuestionar las limitaciones.
Preparando la mise en place: ¿por dónde arrancamos?
Empezamos por analizar la arquitectura que queríamos para la app, teniendo en cuenta todo lo que se venía en el 2020.
Con eso en la cabeza, definimos a la Home como un sistema de navegación secundario que no necesitaba revelar la arquitectura completa, una colección de accesos para facilitar el uso de las acciones más relevantes.
¡Buenísima definición! Pero ahora, ¿cómo priorizamos qué accesos mostrar? Para responder esto, asignamos puntajes a cada funcionalidad, basándonos en:
- Caso de uso al que aplica.
- Frecuencia de uso.
- Relevancia a nivel negocio.
Como resultado de la priorización por puntaje, decidimos lo siguiente:
- Entre 7 y 8 puntos: tiene que estar en la Home.
- 6 puntos: debe ser visible según caso de uso o en base a estados.
- 5 puntos o menos: no tiene que estar en la Home.
Probamos distintas fórmulas y sabores
Llegó el momento de meter las manos en la masa y diseñar lo que sería nuestra nueva Home. Encaramos el abordaje desde una perspectiva técnica pero sin olvidarnos del producto y buscando alinear la interfaz con los modelos mentales preexistentes en cuanto a la administración del dinero.
Iteramos, discutimos propuestas e intercambiamos muchas ideas antes de estar listos para comenzar a dibujar los primeros wireframes. De a poco, y a medida que nos fuimos sintiendo más cómodos, incorporamos diseños en alta. Probamos docenas de versiones de flujos, estados de saldo, distribución de promociones y distintos contenidos.
Fieles al proceso de exploración, nos permitimos volar al principio, omitiendo muchas reglas que ajustamos a medida que nos acercábamos al resultado final.
Recorrimos un largo camino hasta alcanzar un balance entre la arquitectura, las imágenes y los flujos del producto, que no expusiera a las personas usuarias a complejidades innecesarias.
No fue solamente la Home, ¡también fuimos por el postre!
Este rediseño significó mucho más que cambiar una pantalla, generó un gran impacto en toda la app.
Con el avance del proceso, nos dimos cuenta que era necesario también repensar otros flujos y agregar nuevas secciones. Era de vital importancia mirar más allá para generar una experiencia coherente a lo largo de toda la app.
Este primer paso, fue la inspiración y la piedra fundacional de las bases para Equis, nuestro sistema de diseño. Arrancamos de cero y eso nos nos permitió sumar nuevos elementos que ayudan a generar esa cercanía con la persona usuaria que tanto buscamos:
- Ampliamos la carta: incorporamos nuevas secciones como Cuentas y Más, y nuevas vistas, como el detalle de las promociones.
- Agregamos sazón: incluimos micro-interacciones, como la animación del último movimiento en el saldo, para ver la transacción en tiempo real.
- Añadimos un ingrediente secreto: la posibilidad de ocultar el dinero de la cuenta para que las personas usuarias puedan decidir si mostrarlo o no.
- Le dimos el toque “casero”: sumamos ilustraciones y stickers para facilitar la comunicación y lograr una experiencia más cálida.
Diseñar, construir y lanzar la nueva Home en tres meses fue, solamente, posible gracias a cómo organizamos el trabajo en equipo.
Cada paladar es distinto, por eso una Home dinámica adaptada a cada uno fue la solución
Una carta para todos
El resultado de este proceso, se traduce en una Home que se ve y se siente accesible para todas las personas (más o menos digitalizadas, con o sin cuenta bancaria, adultas o adolescentes).
Trabajar con componentes que se adaptan, automáticamente, a cada caso de uso nos ayudó a lograr que Naranja X sea una solución que incluye a todas las personas que quieran usarla.
¿Por qué es importante que los componentes se adapten automáticamente al contexto? Porque nos sirve para:
- Tener una arquitectura más escalable y flexible.
- Personalizar los beneficios según segmento de usuarios.
- Ganar más agilidad a la hora de hacer cambios.
- Jugar con las posiciones de los componentes.
- Agregar highlights a cualquier componente, cuando sea necesario.
- Hacer A/B testing para probar distintas opciones.
¡Plato listo! Ahora, a degustar
Luego de mezclar todos los ingredientes y llegar al plato que más nos convenció, nos propusimos desafiar nuestras suposiciones sobre cómo las personas entienden y usan Naranja X.
Comenzamos con una simple lista de preguntas que fuimos ajustando en el camino: ¿cómo manejan su dinero?, ¿ahorran?, ¿de qué manera?, ¿conocen otras opciones?, ¿qué los atrae o asusta?, entre muchas más.
La clave de este paso, como en cualquier proyecto, fue acordar dentro del equipo lo que cada uno quería validar y definir la herramienta que íbamos a utilizar.
¿Quieren saber más?, en un próximo post les contaremos en detalle lo que descubrimos.
Recorrimos un largo camino, hasta alcanzar un balance entre la arquitectura, las imágenes y los flujos del producto.
Gracias por tomarte un tiempito y leernos 🤗
Si llegaste hasta acá y te quedaste con ganas de ver más, te invitamos a visitar y a darle mucho amor a nuestro proyecto sobre la Home en Behance.
Dejanos un comentario, un aplauso o, por qué no, una crítica constructiva que contribuya al crecimiento de nuestra disciplina. Y seguí nuestras historias, que próximamente estaremos compartiendo más sobre nuestros procesos.
