year
2021
my role
Lead designer
Web developer
client
La Vita
Animabrands
deliverables
Wireframe
Design
Code
La Vita is a fresh produce company that sells in a D2C model. Today, they are the market leader in fresh convenience in the State of Sao Paulo, Brazil with approximately 400 employees between their agricultural and processing unit.
La Vita is a fresh produce company that sells in a D2C model. Today, they are the market leader in fresh convenience in the State of Sao Paulo, Brazil with approximately 400 employees between their agricultural and processing unit.
year
2021
my role
Lead designer
Web developer
client
La Vita
Animabrands
deliverables
Wireframe
Design
Code
background
La Vita came to me with a big challenge ahead, they were launching a new line of food (ready to go) and wanted a new website that reflects better the new company phase. They also wanted that the new website would be, in the near future, the foundation of their eCommerce store.
my approach
For those who already had an eCommerce store before, or had a chance to experience something about eCommerce, knows that an eCommerce business isn’t only a web store. We need to think about inventory, payment gateway, chargeback, reverse logistics, invoices, digital marketing, etc. So I started the project as a business consultant, together with Animabrands (their agency) helping them design a strategy plan to finally having a full and successful eCommerce store working.
My first action was a discovery phase, to understand the maturity of the company. I did interviews and gathered information about their products, their point of sale, and the production steps from start to finish. The result of this phase was a definition of the website planning and features. I also did a roadmap with three main phases:
– The first phase was having a website with a focus on brand and product awareness. It also uses the local grocery stores that offer La Vita products as the final step of the funnil. On each product page instead of having a “buy button” we had a “Find this product near to you”.
– The second phase was added links to the many delivery apps available on that area, where La Vita would have a profile to send their products directly to customers’ houses. So we changed the button to a modal with different options (Grocery store and delivery apps).
– The third phase, after all the step to test the logistic, would be removing all the external links and enabling the eCommerce features to finally have a full store working.
I did the full process of this website, from wireframe, design and also the code in WordPress.
the development
I decided to develop this project in WordPress using Woocommerce plugin as an eCommerce system. For that, I used the Starter theme by understrap with Bootstrap CSS framework.
To solve one of the main pain points of many companies that have a website, I use Advanced Custom Fields PRO plugin for the dynamic pages like Products and Categories, and for the static pages, like the homepage and institutional pages, I used the Elementor plugin to also deliver an edit feature to admins, so an non-technical person and update the pages without any coding knowledge.


the impact
Less than 1 month after launching the new website, we could see the impact in visits and also in prospect and partnerships.



All the page elements follow the brand identity created by their packing agency (Animabrands)



You can check the Figma file here:
https://www.figma.com/file/dTUHWRLYZkz7X5tzpYsaPx/La-Vita—Layout?node-id=152%3A97
"
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
"
Nome do Cliente
Cargo do cliente