Project overview
The project has as objective the development of a website and e-commerce for the craft brewery Birra Virgilius (beer Vigilius). The brewery is located in the town of Suzzara, province of Mantova. The city where I lived and worked as a UI/UX designer in northern Italy :
The client uses the concept of fable to narrate the story of a butterfly, which pollinates and interacts with different characters the bee, the little red-cap, the wolf, and the chameleon giving rise to the different flavors of each beer.
It is a UI Design project developed in WordPress. This job required extreme attention to detail in the search for the perfect pixel to align all interface elements with the brand’s symbol and storytelling.
Technically it involved my knowledge in UI Design, Information Architecture, SEO (Search Engine Optimization), photography, photo pre-production, editing, and image manipulation. It also relied on my experience in programming to customize HTML5, CSS3, and PHP plug-ins for WordPress to suit the specific needs of the client.
The challenge
The client wanted a website that showcased the brand’s beers and history. The objective was to establish a presence on the web and increase sales, all with a focus on the fable of the butterfly. He handed me a folder of the products and told me to make something similar to that folder.
My answer was that I could do something much better, with realistic and more seductive images. I said that this website and the e-commerce would be a showcase for him to sell and manage the business allowing him to deliver beer throughout the province. That’s how Birra Virgilius’ job began.
Project scope
The work was designed to be produced in 3 steps
Step 1: Production of images
- Produce and photograph beer bottles.
- Editing images in photoshop.
Step 2: Design the website
- Register the domain birravirgilius and hire the hosting service.
- User flow/ Information Architecture.
- Create a UI that visually converses with the brand.
- Add to the website the same storytelling in which Birra Virgilius narrates the fable of the butterfly.
- Build the website in WordPress and customize the interface.
- Test usability and compatibility between browsers and different screen sizes.
- Apply SEO(Search Engine Optimization) to website pages to help index search engines.
Step 3: E-commerce construction
- Build the virtual store for the sale of products.
- Payment method setup.
- Plugin customization for distance freight calculation.
Step 1: Production of images
These are the images of the mini-studio, where I produced and photographed the bottles, using two points of light, a mirror as a base, some tricks to make the bottles more seductive, my smartphone as a camera, and a little Photoshop to give the final touch.
Step 2: Design the website
TYPOGRAPHY & COLORS
INFORMATION ARCHITETURE Website + E-commerce
Wireframes – ecommerce (checkout)
It is a technique that presents in High Fidelity (Hi-Fi) how the interface will be from the aesthetically and navigation point. It serves to validate ideas/hypotheses of screen flows that are presented to the client.
Final result
Conclusion
Before the construction of the website, all sales of Birra Virgilius’ products were done by analogy, that is, the owner received a list of orders by phone or e-mail and personally delivered the orders to customers and supermarkets. With the spread of the Covid-19 Pandemic in Italy and the North being the epicenter of the disease, all businesses were closed and thanks to the construction of the e-commerce, the brewery managed to remain in full operation, selling directly to end customers.
I am very proud of this project, because my work allowed the client to support his family during this difficult phase that the entire planet is living.
Grazie!
