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.
El disseny
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.
Eina per al retoc fotogràfic.
Editor gràfic utilitzat per a l'aplicació web.
#FFFFFF
#000000
#D60F41
Interacció
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.
Prototip interactiu fet amb Invision.
Plugin per a Sketch integrat amb Invision.
Mobile first
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ó
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.
Optimització
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.
Desenvolupament ambiciós
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.
Framework de PHP per al desenvolupament.
Integració amb el CRM.
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.
CMS
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.
