Web and Mobile Design

Flax&Kale

Pioneers and leaders in flexitarian products. They needed to unify their online presence through a complete website with ecommerce and, for this, they trusted Omatech to carry out the design, development and implementation.

Header image Flax&Kale

The challenge

Flax&Kale already had a strong online presence distributed in several specific websites for each of its services. At Omatech, we took care of unifying and centralizing all that content into a single corporate website with ecommerce.

In addition, they were in the process of renewing their corporate image, so we created a digital style guide that would bring consistency and be in line with their new look.

Proyecto Flax&Kale

The design

The product
as a central point

A minimalist design helped us to highlight the real protagonists of the website, the products. The visual appeal of these products, colorful and full of life, makes them stand out throughout the navigation.

For the interface design, following the same style, we opted for a sober palette, based on black and white. All this accompanied by a system of unique icons, 100% designed for F&K.

More information

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

    Photoshop

    Tool for photo touch-ups.

  • Invision

    Sketch

    Graphic editor used for the web application.

Typography

Neutra Text Demi

Neutra Text Demi sample

Open Sans

Open Sans sample

Colors

Primary

  • #FFFFFF

    Imagen Cocaína
  • #000000

    Imagen chocolate negro
  • #D60F41

    Imagen fresas rojas

Components

Componentes de Flax&Kale

Icons

  • 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

Interaction

Interaction
and prototyping

Prototyping is a very important part of the project. It allows us to check that all the navigation works correctly, perform user tests and obtain the first conclusions before moving on to the layout phase. In this way, we can make the necessary corrections hand in hand with the client.

For Flax&Kale, we made high fidelity interactive prototypes for desktop, tablet and mobile versions. This allowed us to check that the consistency between the different devices was maintained.

More information

DESCRIPCIO DE LA IMATGE
  • Invision

    Invision

    Interactive protoptype made with Invision.

  • Invision

    Plugin Craft

    Plugin for Sketch integrate with 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

Moible telephone, the device preferred by the brand's target market.

All navigation, interface and interactions were designed with the mobile version as a reference, because the source of Flax&Kale's traffic comes mainly from this type of devices.

Layout

A tailored suit

Each project is unique and, as such, the layout for Flax&Kale was "Tailor-made", based on a modular and scalable design. In order to improve the loading speed, we used CSS preprocessor language, which allows us to shorten and optimize the code while facilitating the maintenance of the style sheets.

Without losing sight of accessibility and usability, this layout phase implemented small animations when scrolling, which give the navigation that attractive and dynamic touch to improve the user experience.

More information

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

Optimization

Maximum efficiency for each device

This website has many stunning images with the aim of visually enamoring users. So that the loading speed is not a problem, we work with next-gen image formats, which offer great compression and, at the same time, higher quality. In addition, the site manager uses our own Imaginator, tool, which optimizes by calling on the most appropriate format at all times.

Videos are also essential in the user experience, so by using JavaScript, we give them high performance always showing the visitor the most appropriate option depending on the device they are using to view: mobile or desktop

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

Ambitious development

Scalability and integrations

The development phase was a major challenge. Not only did a corporate website have to be programmed, but also a complex ecommerce system with all its functionalities: individual products, packs, an advanced filter system, an internal user area to manage purchases and resolve incidents and a virtual POS customized in the brand's own style to make payments for purchases.

To carry out the construction of all this, we relied on a repository architecture and used Laravel, an open source framework that provides quality code and facilitates maintenance and scalability. In addition, we integrated with HubSpot to provide a solution for both commercial and customer needs.

More information

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

    Laravel

    PHP framework for the development.

  • Hubspot

    Hubspot

    Integration with CRM.

Advanced backoffice

As a backend, a backoffice was integrated into the content management system to facilitate sales control and manage the discount codes that customers can add to the shopping cart. In addition, a modular system was developed that allows Flax&Kale to create advanced product pages whenever needed. This allows for better communication and, at the same time, better internal organization.

Prototipo de producto Recurso gráfico Recurso gráfico

CMS

Intuitive content manager

The entire Flax&Kale website is managed from Omatech's own editor A system based on an MVC (Modelo-Vista-Controlador). programming pattern. This means that the company can easily and intuitively perform any editing action on the web in the front end.

In this way, it can create new pages, modify or plan contents in a totally independent way, since it will always maintain the approved aesthetics and styles. This allows modification the website and the content, but still maintains the brand image, personality and consistency set at the beginning of the project.

In Omatech, we are experts in creating self-manageable pages.

Página de CMS
Do you have a digital project in mind but don't know where to start? We'll give you a hand! ?