Web y Diseño Movil

Flax&Kale

Pioneros y referentes en productos flexitarianos. Necesitaban unificar su presencia online a través de una web completa con ecommerce y, para ello, confiaron en Omatech para llevar a cabo el diseño, desarrollo y puesta en marcha.

Imágen de cabecera Flax&Kale

El reto

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.

Proyecto Flax&Kale

El diseño

El producto
como centro

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.

Más información

Diseño Flax&Kale Diseño Flax&Kale
  • Invision

    Photoshop

    Herramienta para retoque fotográfico.

  • Invision

    Sketch

    Editor gráfico utilizado para la aplicación web.

Tipografía

Neutra Text Demi

Neutra Text Demi sample

Open Sans

Open Sans sample

Colores

Primarios

  • #FFFFFF

    Imagen Cocaína
  • #000000

    Imagen chocolate negro
  • #D60F41

    Imagen fresas rojas

Componentes

Componentes de Flax&Kale

Iconos

  • Icona: Texto
  • Icona: Natural
  • Icona: Sin Gluten
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX
  • Icona: XX

Interacción

Interacciones
y prototipado

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.

Más información

DESCRIPCIO DE LA IMATGE
  • Invision

    Invision

    Prototipado interactivo hecho en Invision.

  • Invision

    Plugin Craft

    Plugin para Sketch integrado con Invision.

  • Página Inicio de Flax&Kale
  • Página producto Flax&Kale
  • Restaurante Flax&Kale
  • Landing Flax&Kale
  • Página producto Flax&Kale
  • Restaurante Flax&Kale

Mobile first

Teléfono móvil, el dispositivo preferido del target de la marca.

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

Un traje a medida

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.

Más información

Grid de Maquetación Código de ejemplo
DESCRIPCIO DE LA IMATGE

Optimización

Máxima eficiencia en cada dispositivo

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.

Página Inicio vista desde desktop Página Inicio vista desde móvil

Desarrollo ambicioso

Escalabilidad e integraciones

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.

Más información

Página de reserva Logos de servicios para llevar a casa
  • Laravel

    Laravel

    Framework de PHP para el desarollo.

  • Hubspot

    Hubspot

    Integración con el CRM.

Backoffice avanzado

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.

Prototipo de producto Recurso gráfico Recurso gráfico

CMS

Gestor de contenidos intuitivo

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.

Página de CMS
¿Tienes un proyecto digital en mente y no sabes por dónde empezar? Te echamos una mano! ?