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.
The design
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.
Tool for photo touch-ups.
Graphic editor used for the web application.
#FFFFFF
#000000
#D60F41
Interaction
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.
Interactive protoptype made with Invision.
Plugin for Sketch integrate with Invision.
Mobile first
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
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.
Optimization
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
Ambitious development
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.
PHP framework for the development.
Integration with CRM.
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.
CMS
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.
