Flax&Kale ya contaba con una fuerte presencia online distribuida en varias webs específicas para cada uno de sus servicios. En Omatech nos ocupamos de unificar y centralizar todo ese contenido en una única web corporativa con ecommerce.
Además, se encontraban en un proceso de renovación de su imagen corporativa, por lo que creamos una guía de estilo digital que aportara consistencia y que fuera acorde a su nueva apariencia.
El diseño
Un diseño minimalista nos ayudó a destacar los verdaderos protagonistas de la web, los productos. El atractivo visual de éstos, coloridos y llenos de vida, consigue que destaquen durante toda la navegación.
Para el diseño de la interfaz, siguiendo el mismo estilo, se optó por una paleta sobria, basada en blancos y negros. Todo ello acompañado de un sistema de iconos únicos, 100% pensados para F&K.
Herramienta para retoque fotográfico.
Editor gráfico utilizado para la aplicación web.
#FFFFFF
#000000
#D60F41
Interacción
El prototipado es una parte muy importante del proyecto. Nos permite comprobar que toda la navegación funciona correctamente, realizar tests de usuario y así obtener las primeras conclusiones antes de pasar a la fase de maquetación. De esta forma, podemos realizar las correcciones necesarias mano a mano con el cliente.
Para Flax&Kale realizamos prototipos interactivos de alta fidelidad para las versiones de escritorio, tablet y móvil. Esto nos permitió comprobar que se mantuviera la concordancia entre los distintos dispositivos.
Prototipado interactivo hecho en Invision.
Plugin para Sketch integrado con Invision.
Mobile first
Toda la navegación, interfaz e interacciones se plantearon teniendo como referencia la versión para dispositivos móviles, ya que la fuente del tráfico de Flax&Kale venía principalmente de este tipo de dispositivos.
Maquetación
Cada proyecto es único y, como tal, la maquetación para Flax&Kale fue “Tailor-made”, basándonos en un diseño modular y escalable. Con la intención de mejorar la velocidad de carga utilizamos lenguaje de preprocesador CSS, el cual permite acortar y optimizar el código a la vez que facilita el mantenimiento de las hojas de estilo.
Sin perder de vista la accesibilidad y la usabilidad, en esta fase de maquetación se implementaron pequeñas animaciones al realizar scroll, que otorgan a la navegación ese toque atractivo y dinámico para mejorar la experiencia de usuario.
Optimización
Esta web cuenta con muchas imágenes impactantes con el objetivo de enamorar visualmente a los usuarios. Para que la velocidad de carga no sea un problema, trabajamos con formatos next-gen image, los cuales ofrecen gran compresión y, a la vez, mayor calidad en las imágenes. Además, el gestor del site cuenta con nuestra herramienta propia Imaginator, la cual optimiza por invocación el formato más adecuado en cada momento.
Los vídeos también son fundamentales en la experiencia de usuario, por lo que, mediante JavaScript, conseguimos que éstos cuenten con un alto rendimiento mostrando siempre al visitante la opción más adecuada dependiendo del dispositivo que esté utilizando para visualizar: móvil o desktop.
Desarrollo ambicioso
La fase de desarrollo supuso un importante reto. No solo se debía programar una web corporativa, también un complejo sistema de ecommerce con todas sus funcionalidades: productos individuales, packs, un avanzado sistema de filtros, una zona interna de usuario para gestionar compras y solucionar incidencias y una TPV virtual personalizada al estilo propio de la marca para realizar los pagos de las compras.
Para llevar a cabo la construcción de todo esto, nos basamos en una arquitectura de repositorios y empleamos Laravel, un framework de código abierto que proporciona un código de calidad y facilita el mantenimiento y la escalabilidad. Además, realizamos una integración con HubSpot para dar solución tanto a las necesidades comerciales como a las de los clientes.
Framework de PHP para el desarollo.
Integración con el CRM.
A modo backend, se integró un backoffice en el gestor de contenidos para facilitar el control de ventas y gestionar los códigos de descuento que los clientes pueden añadir a la cesta de compra. Además, se desarrolló un sistema modular que permite a Flax&Kale crear páginas avanzadas de productos cada vez que lo necesiten. Esto propicia una mejor comunicación y, a la vez, una mejor organización interna.
CMS
Toda la web de Flax&Kale se administra desde la editora propia de Omatech. Un sistema basado en un patrón de programación MVC (Modelo-Vista-Controlador). Lo que significa que la empresa puede realizar cualquier acción de edición en la web en frond end de forma fácil e intuitiva.
De esta forma, puede crear nuevas páginas, modificar o planificar contenidos de manera totalmente independiente, ya que siempre mantendrá la estética y estilos aprobados. Esto permite modificar la web y el contenido, pero seguir manteniendo la imagen de marca, la personalidad y la consistencia marcadas al inicio del proyecto.
En Omatech somos expertos en crear páginas autogestionables.
