One of the first clients I managed since my arrival to Guadalajara in 2016, Te core of the website had very defined sections but it needed an urgent refesh. This was one of my very first complete wordpress websites i had on my charge.
In general, the whole site involved some Ux research in order to accomplish the objective to reach for the target audience into knowing the product in a simple and aesthetic performance.
The main sections for the project were defined by the client because it wa sintended to just give a "refresh" on the visual part of the interface. The colour pallete and usage of typography remained the same as the brand had already developed.
The final wireframing evolved directly from the original sitemap. Mobile first is the approach to develop the sketching.
REWIND
A study back in 2018, consisting on several polls and interviews conducted by our research team, the people recognized some "categories" for the products though the brand itself wasnt using labels for the whole catalog of products. So, we planned some interviews with the direct sales department to reach the knowledge about what were the general "flavours" or sections the costumers know the products by. Sections consisted in the following:
8 products
3 products
8 products
4 products
3 products
3 products
5 products
4 products
6 products
4 products
In order to transmit a complete experience for the digital costumer, it was decided to bring a color code for each section according to the main concept of the section. The product appear with both a cenit and slice-sided-view, the name, prices (full piece and by kilogram) and a description.
Plus, it was arranged in an "accordion" fashion for each section to appear one-by-one into the screen.
For the Desktop version it was decided for a more tradicional focus and it displays a screen with all the products on a single screen fashion.
As part of the social compromise Petit has with society, "Bienestar Animal" or "Animal Wellness" comes due to the caring about how the animal-procedence of the goods (egg, specially) employed along the line of production comes from cage free suppliers. This asset is placed in the footer of the site, displaying the information on cursor hover action.
