Background

Farmacity venía de una apuesta muy fuerte en el lanzamiento de su primer eCommerce. La idea presentaba una serie de innovaciones que, combinadas entre sí, dificultaban el proceso de compra. Estas eran: diseño skeuomorphism, según los inicios de las aplicaciones IOS cuando las interfaces respondían a otras necesidades, un drag and drop para agregar al carrito desde la Pagina de Grilla, infinite scroll y grilla responsiva.

imagen_backgroung

Esta apuesta se focalizó para que la decisión de compra del usuario fuera en la Página de grilla, emulando la compra offline. Esta grilla representaba la góndola de las farmacias físicas. Los productos debían mantener la lógica de la góndola y, por lo tanto, su proporción real. Se demandó mucho esfuerzo en poder generar un proceso de trabajo en el cual ésto no se perdiera. No obstante, fue imposible sostenerlo con 8 mil productos en su catalogación. El resultado fue una notable incoherencia en el diseño e imágenes en png que tardaban en cargar, afectando la performance del sitio, disminuyendo el porcentaje de compra y dificultando la actualización de las mismas por backend.

Objetivo

Aumentar el ticket promedio, facilitando el proceso de compra por medio de una interface más moderna e intuitiva, aumentando la performance del sitio y las tareas internas del cliente en la administración del mismo.

compu_screen-farmacity
farmacity_cards-gris

Nacen las cards

La solución fue un rediseño completo de la interface del sitio, estandarizando el proceso de compra. Se elimina la góndola y los productos quedan “empaquetados” en cards individuales. Cada card mantiene los elementos en el mismo lugar y la interrelación entre ellos, facilitando la experiencia del usuario, en cada uno de los dispositivos. Agiliza el proceso y disminuye las sorpresas. El usuario no tiene que “buscar” donde clickear.

Se elimina el skeumorphismo y se adapta el contenido a un diseño flat, sin sombras ni relieves molestos y sin por ello generar cambios radicales de colores y tipografías. or lo tanto, el rediseño de la interface tiene como protagonismo el desarrollo de las cards. De este modo , el producto se vuelve central en cada una de las instancias del sitio (grilla, relacionados, crossells, destacados, etc.).

pantallas_nuevas

Se elimina el skeumorfismo y se adapta el contenido a un diseño flat, sin sombras ni relieves molestos y, sin por ello, generar cambios radicales de colores y tipografías. Por lo tanto, el rediseño de la interface tiene como protagonismo el desarrollo de las cards. De este modo, el producto se vuelve central en cada una de las instancias del sitio (grilla, relacionados, cross-sells, destacados, etc.).

Se unifica el UI kit en una jerarquía más simple y estandarizada.

pantallas_farmacity2

El sitio cobra más aire y luz. El contenido funcional e informativo se destaca en los espacios y facilita la navegación. El blanco reemplaza al gris, se mejora la performance del sitio y la carga de imágenes cambiando los pngs por jpgs. Se unifican las cucardas de ofertas y descuentos. Se mantiene y modifica el drag and drop, pero como funcionalidad secundaria de compra. Se incorpora el call to action de Comprar.

ipad_Farmacity

Se agranda el buscador y hay cambios importantes en la estructura principal de navegación. Se rediseña el autocomplete del buscador y el resultado de búsqueda, que comparten el núcleo de la navegación con el nuevo desplegable de Categorías, dentro del cual se despliegan los diferentes niveles por columna, llegando a la profundidad justa de jerarquías navegables. Se suma un destacado especial (Cyber Monday, etc.) en el header y las categorías destacadas (hasta 5).