Se analizaron las webs de la competencia y las soluciones de la marca en las webs internacionales.

Y a su vez, pensando en la manera de educar al consumidor en el uso de la marca, se analizaron distintas webs de recetas de cocina. Lo cual nos sirvió para estructurar los filtros de búsqueda y el tipo de recetas y la manera de mostrarlas.

Se pensó en una web que de soporte a los distintos productos de la marca, donde el consumidor pueda conocer información nutricional, notas de sabor, alérgenos y enlaces directos a las distintas tiendas online donde se venden, así como las tiendas físicas.

Y a su vez crear una escuela de cocina que permita al usuario buscar recetas donde incorporar la mostaza, mas allá del fast food, aprovechando el auge foodie actual y el mundo de la gastronomía.

Se definió una primera estructura donde se definieron los apartados de la web y la interrelación entre recetas y productos. El punto donde nos queríamos centrar era la escuela de cocina y su conexión con los productos de la marca.

Tras ver la primera estructura con la marca, se incluyeron dos sub-secciones nuevas en Descubre más: Maestría en la Elaboración e Ingredientes y se decidió eliminar la sub-sección Más Maille. Además a la sección Historia se la renombró como La Maison Maille desde 1747.

Se diseñó un primer wireframe en base a la arquitectura de la información definida y las interacciones entre las distintas pantallas, sin definir aún la parte visual.

Se prototipó y se presentó al equipo de desarrollo para recibir su feedback y poder ir definiendo los componentes que se necesitarían para el desarrollo de la web. Tras el ok de desarrollo se presentó a la marca.

Tras el ok de la marca se comenzó con el diseño de la parte visual. En este punto se definieron además dos sesiones de fotografías, marcando la dirección de arte de las mismas.

Tras la primera sesión, en la que estuvo presente la marca, se introdujeron dos nuevos elementos; por un lado el cliente quería que las recetas restantes fueran en vídeo y en segundo lugar, la marca preparaba para el 2019 el lanzamiento de un nuevo formato de plástico para dos de sus variedades, que debían aparecer en los nuevos vídeos.

La dirección de arte de las fotografías estaba enfocada en la realización de un tipo de fotografía cercano (huir de lo artificial), con imágenes con una luz cálida y con mucho contraste, escenas donde se vea producto, trabajo, maderas y texturas.

Se busca la misma estética que las fotos, prestando mayor interés en los primeros planos de la elaboración a cámara lenta y más presencia del chef.

Las guidelines de la marca tienen dos colores principales, negro y dorado. El histórico de la marca en sus comunicaciones on/off tenía una fuerte presencia el negro. Pero finalmente, se decidió una mayor presencia del blanco y un color intermedio al dorado, que resaltaba las fotografías.

La marca en sus guidelines para online tiene dos tipografías Mrs Eaves para encabezados y Gotham para cuerpos de texto, labels y otros componentes.

Para el trabajo con desarrollo, se utilizó la plataforma InVisión, tanto para la documentación y css, como para los assets, el flujo de trabajo, planificación del proyecto, revisiones y control del mismo.

Para los cambios de la fase final se utilizó la aplicación Slack, por medio de listados de revisión.

Puedes visitarla en: