In 2022 I had the opportunity to work with the Dexa agency team to develop a new portal for Minerva Foods. Together with three other designers, guidance from the Minerva Foods team and a team of WordPress developers, we redesigned the entire portal using the original website structure.
The entire interface design process was done in Figma, with the addition of some assets edited in software such as Illustrator or Photoshop.
Sitemap
Initially, I structured the page hierarchy and classified them within a sitemap. This allowed us to have a very clear vision of the route to be taken for the production of the website as well as measuring the volume of work.
I designed it in Figma Jam, using the flowchart feature to define the access order on each page following links pre-determined by the client.
Tokens
In order to standardize the development of the pages, we started the design process by defining basic tokens following the guidelines in the brand manual sent by the client.
The colors were defined according to some categories and the typography was the same as in the manual, with a distinction being made between hierarchies for application in different contexts across the pages and favoring the SEO.
Although many assets used were sent by the client, some needed to be custom-made for new situations.
The icons were made following size, line thickness and style standards.
Components
In addition to tokens, we divided the project components into Base Components and Components. Elements were defined for the modular creation of pages, reducing the team's effort when designing each layout.
Layout
The layouts were designed together by the design team, going through an approval stage in meetings with the client. As they were approved, the handoff was also made to the developers, exporting assets such as icons, photos and other items for building the page.
Thanks to the modular component construction process, some page designs were created in a matter of minutes. The list of categories, as well as content, had already been defined by the client, leaving our team to decide the hierarchy and componentization of the page.
For product pages, tests were carried out in order to decide the best way to present the chosen product to the user. At the client's request, instructions were defined with icons for how to use each product, as well as the “Cut Map” to indicate where the meat is cut.
Just below the main product description, the “More Products” slide section and links to recipes were inserted, in order to retain the user within the website.
A blog was developed with a repertoire of publications to be created by the managed services team. Within the design, we projected a structure that favors easy navigation, guiding the user through sections. Whenever a publication is accessed, the user is also directed to articles and other publications related to the recipe in question.
Mobile
The mobile design version was designed in conjunction with the desktop version, in order to facilitate the adaptation of components and speed up the evaluation of the screens by the client.
Thanks for watching!
