Redesign of the entire website. My contribution was very UI weighted.
THE ROLE
Barilla
Website Redesign
Involvement
Lead UI Design
Year
2023
Website Redesign
Involvement
Lead UI Design
Year
2023
THE PROJECT
Barilla, a global leader in the pasta industry, needed a complete redesign of their website to enhance user experience and align with modern design standards. This project required rethinking the entire site structure, including every page and element, to create a cohesive and intuitive user experience that reflected Barilla's brand identity.
I worked on the complete redesign of the Barilla's website as the Lead UI Designer in a cross-functional team. Inside the experience team I worked along with a Junior UI Designer, a Design Director and 2 UX Designers. First we defined the design directions, then we entered a production mode to build up the pages. We followed an agile process with 2 weeks sprints.
As part of the project, I produced UI designs for 4 breakpoints, put together a design system and worked on some animation ideas.
____________________________________
Background
The project involved redesigning all pages and elements of Barilla's website, with a focus on streamlining navigation and improving the overall user experience. The challenge was to modernize the UI while staying true to the brand's established identity.
Here is the full site structure including all the pages to redesign.
RESEARCH & BENCHMARKING
To set the foundation for the redesign, I conducted a comprehensive design research, which included benchmarking against competitors in the food and FMCG sector to identify UI best practices. Additionally, I reviewed Barilla's brand guidelines and existing brand elements.
DESIGN DIRECTIONS
With this in mind, I developed a design direction that integrated Barilla's brand identity with modern UI elements. The aim was to create an interface that was not only visually appealing but also user-friendly, prioritizing intuitive navigation and easy access to content. This design direction was presented to Barilla and received their approval as the foundation for the website redesign.
COLLABORATION
Throughout the project, I worked closely with:
• The UX designer to ensure that the UI effectively complemented the user flows and wireframes. This involved ongoing discussions to align on design decisions and occasionally challenging ideas.
• The Design Director and the Junior Designer who I was talking to almost every day. Initially, I designed for all four breakpoints — mobile, tablet, small tablet, and desktop — to establish a responsive design framework. As we developed the majority of the components for these breakpoints, I focused on designing for mobile and the Junior Designer adapted these designs for the other breakpoints.
• Barilla, as communication with the client was crucial for this project. We met with them once a week to share design progress and ensure that our work was in line with their expectations and branding guidelines.
• The developers to present the designs and clarify any requirements. This ongoing dialogue helped ensure that the design was feasible and clear for them to start building the pages.
____________________________________
The Designs
Some final screens for Mobile
I finalised the UI designs starting from Mobile, then adapted the designs for the other breakpoints.
I added notes for developers to mention any functional or visual comment about the designs.
Below are a few of the many pages I designed for the website.
I added notes for developers to mention any functional or visual comment about the designs.
Below are a few of the many pages I designed for the website.
Product Listing page designs
Homepage designs
Form submission on Mobile
Form submission on Tablet and Desktop
Some final screens for Mobile
____________________________________
Animation & Motion
I worked on some animations and motion elements to bring the new website to life.
Below are a few researches for Desktop and Mobile.
Below are a few researches for Desktop and Mobile.
Faded carrousel on Desktop
Navigation interactions
Motion research for the Homepage (1)
Motion research for the Homepage (2)
____________________________________
Design System
Along the way I worked on a Design System for the new website. I created and added flexible and reusable components such as cards and input fields.
We needed a variety of input fields - simple ones but also bigger ones to add notes, and more sophisticated ones to add barcode or dates. I made sure it covered all of the different states (unfilled, filled, error and disabled fields).
As part of the library, I worked on clarifying some more complex components treatments (header component and some cards). I ensured the layers and colour combinations were detailed for other designers on the project and developers.
____________________________________
Outcomes
The redesign of Barilla's website resulted in a modernized and cohesive UI that stayed true to the brand's identity while significantly enhancing the user experience. The improved navigation and responsive design made the website accessible and user-friendly across all devices. By developing a flexible design system, we created a solid foundation that supports Barilla's evolving digital needs.
