Role - UI Designer
Fratelli Carli is a company founded in 1911, leader in the production of Ligurian EVO oil.
A brand that on a visual and communication level does not find between the physical identity (product packaging, shopping experience in emporiums) and the digital one (social, ecommerce site).
The goal of this project is to carry out the restyling of the ecommerce site while maintaining the strategy and structure of the contents in place. Rationalizing the visual, layout styles and recalling the current identity of packaging and emporiums.
1. Desk Research
2. UI Audit
3. Competitor analysis
4. Stakeholders interview
1. Site analysis and mapping
2. Look & feel
2. Color Palette
4. Definition boards
Analyzing and mapping the various modules of the entire site, we encountered problems of various kinds. First layout, as there was often the need to insert contents that unfortunately were not designed for the specifics structures, often creating issues in the various breakpoints.
Another recurring problem was due to the poor contrast of some titles on photographic backgrounds, making the site inaccessible for some users.
Given the needs of the site, we thought to adopt a new method for redesign. Instead of starting from wireframes, we decided to map all the modules of the whole site by grouping and categorizing them by type and content. In order to understand what all the needs and to have at a glance all those elements that seemed different, but which in reality shared the same style and communication needs.
By solving that heterogeneity problem and making pages more consistent and easier to use.
We were lucky enough to have access to all the archive material that Fratelli Carli had collected over the years, all the photographs and all the advertising and campaign material, from the 1930s to today.
Precious material that has allowed us to trace the points of recognition of the brand and find new applications to digitize and scale it in the various applications.
BIGHERO IN HOMEPAGE
We also proposed to review navigation on the basis of the information architecture, leaving the shop items immediately accessible and hiding the various editorial and history sections within a hamburger. To create two distinct navigation channels and make the shop cleaner and more immediate.
PRODUCT PAGE VIEWPORT
STICKY ADD TO CART