Web i Disseny Mòbil

Flax&Kale

Pioners i referents en productes flexitarians. Necessitaven unificar la seva presència online a través d'una web completa amb ecommerce i, per a això, van confiar en Omatech per a dur a terme el disseny, desenvolupament i posada en marxa.

Imatge de capçalera Flax&Kale

El repte

Flax&Kale ja comptava amb una forta presència online distribuida en diverses webs específiques per a cada un dels seus serveis. A Omatech ens vam ocupar d'unificar i de centralitzar tot aquest contingut en una única web corporativa amb ecommerce.

A més, es trobaven en un procés de renovació de la seva imatge corporativa, per la qual cosa vam crear una guia d'estil digital que ens ajudés a aportar consistència al projecte i que estigués aliniada amb la nova aparença.

Proyecto Flax&Kale

El disseny

El producte
com a centre

Un disseny minimalista ens va ajudar a destacar els veritables protagonistes de la web, els productes. L'atractiu visual d'aquests, plens de color i de vida, permet que destaquin durant tota la navegació.

Per al disseny de la interfície, seguint el mateix estil, es va optar per una paleta sobria, basada en blancs i negres. I tot això acompanyat per un sistema d'icones úniques, 100% pensades per a F&K.

Més informació

Diseño Flax&Kale Diseño Flax&Kale
  • Photoshop

    Photoshop

    Eina per al retoc fotogràfic.

  • Sketch

    Sketch

    Editor gràfic utilitzat per a l'aplicació web.

Tipografia

Neutra Text Demi

Neutra Text Demi sample

Open Sans

Open Sans sample

Colors

Primaris

  • #FFFFFF

    Imagen Cocaína
  • #000000

    Imagen chocolate negro
  • #D60F41

    Imagen fresas rojas

Components

Componentes de Flax&Kale

Icones

  • 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ó

Interaccions
i prototipat

El prototipat és una part molt important del projecte. Ens permet comprovar que tota la navegació funciona correctament, realitzar tests d'usuari i així obtenir les primeres conclusions abans de passar a la fase de maquetació. Així, podem realitzar les correccions mecessàries amb el client.

Per a Flax&Kale varem realitzar prototips interactius d'alta fidelitat per a les versiones d'escritptori, tablet i mòbil. Això ens va permetre comprovar que es mantenia la concordància entre els diferents dispositius.

Més informació

DESCRIPCIO DE LA IMATGE
  • Invision

    Invision

    Prototip interactiu fet amb Invision.

  • Plugin Craft

    Plugin Craft

    Plugin per a Sketch integrat amb 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èfon mòbil, el dispositiu preferit del target de la marca.

Tota la navegació, interfície i interaccions es van plantejar tenint com a referència la versió per a dispositius mòbils, ja que la font de tràfic de Flax&Kale eren principalment aquests dispositius.

Maquetació

Un vestit fet a mida.

Cada projecte és únic i, com a tal, la maquetació de Flax&Kale va ser "Tailor made", basant-nos en un disseny modular i escalable. Amb la intenció de millorar la velocitat de càrrega, vam utilitzar un llenguatge de preprocessador CSS, el qual permet fer més curt i optimitzar el codi alhora que facilita el manteniment dels fulls d'estil.

Sense perdre de vista l'accessibilitat i la usabilitat, en aquesta fase de maquetació es van implementar petites animacions al fer l'scroll, que otorguen a la navegació aquest punt atractiu i dinàmic que ens ajudarà a millorar l'experiència d'usuari.

Més informació

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

Optimització

Màxima eficiència en cada dispositiu

Aquest web compta amb moltes imatges impactants amb l'objectiu d'enamorar visualment els usuaris. Per tal que la velocitat de càrrega no sigui un problema, vam treballar amb formats next-ge image, els quals ofereixen una gran comprensió i, alhora, més qualitat en les imatges. A més, el gestor del site compta amb la nostra eina pròpia Imaginator, la qual optimitza per invocacció el format més adequat en cada moment.

Els vídeos també són fonamentals en l'experiència d'usuari, per la qual cosa, mitjançant Javascript vam aconseguir que aquests tinguin un alt rendiment mostrant sempre al visitant l'opció més adequada depenent del dispositiu que estigui utilitzant per visualitzar: mòbil o desktop.

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

Desenvolupament ambiciós

Escalabilitat i integracions

La fase de desenvolupament va suposar un repte important. No només s'havia de programar una web corporativa, també un sistema molt complexe d'ecommerce amb totes les seves funcionalitats: productes individuals, packs, un avançat sistema de filtres, una zona interna d'usuari per a gestionar compres i solucionar incidències i una TPV virtual personalitzada amb l'estil propi de la marca per a realitzar els pagaments de les diferents compres.

Per dur a terme la construcció de tot això, ens vam basar en una arquitectura de repositoris i vam fer servir Laravel, un framework de codi obert que proporciona un codi de qualitat i facilita el manteniment i l'escalabilitat. A més, vam realitzar una integració amb Hubspot per resoldre tant les necessitats comercials com les dels clients.

Més informació

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

    Laravel

    Framework de PHP per al desenvolupament.

  • Hubspot

    Hubspot

    Integració amb el CRM.

Backoffice avançat

A mode de backend, es va integrar un backoffice al gestor de continguts per a facilitar el control de vendes i gestionar els codis de descompte que els clients poden afegir a la cistella de la compra. A més, es va desenvolupar un sistema modular que permet a Flax&Kale crear pàgines avançades de productes cada cop que fos necessari. Això propicia una millor comunicació i, alhora, una millor organització interna.

Prototipo de producto Recurso gráfico Recurso gráfico

CMS

Gestor de continguts intuïtiu

Tot el web de Flax&Kale s'administra des de l'editora pròpia d'Omatech. Un sistema basat en un patró de programació MVC (Model-Vista-Controlador). Això vol dir que l'empresa pot realitzar qualssevol acció d'edició al web en front end de forma fàcil i intuïtiva.

Així, es poden crear pàgines noves, modificar o planificar continguts de forma totalment independent, ja que sempre mantindrà l'estètica i estils aprovats. Això permet modificar el web i el contingut, però seguir mantenint la imatge de marca, la personalitat i la consistència marcades a l'inici del projecte.

A Omatech som experts en crear pàgines autogestionables.

Página de CMS
Tens un projecte digital al cap i no saps per on començar? Et donem un cop de mà! ?