Website

Re-Generation: the project of Tod’s Academy in collaboration with Marangoni Institute

Tod's Academy '22 Marche

Re-Generation is the initiative promoted by Tod's Academy to support the creativity of young talents and promote sustainability.

The second edition of this ambitious project focuses on enhancing the ideas and skills of students, their modern and innovative point of view.

Re-Generation is the outcome of the prestigious collaboration between Tod's Academy, the lab of ideas located in Tod's headquarters in the Marche region, and the Marangoni Institute.

Twenty students of this high-profile school were called upon to work on this project. These young designers had the opportunity to get to the heart of the business through an immersive experience. They worked on rethinking Tod's DNA from a green perspective and on the design of a capsule collection dedicated to sustainable fashion.

Usability and accessibility: the two key elements of the new website

Briefing

The client asked us to create an impactful and engaging website, with soft effects to make the browsing experience simple, direct and emotional, the goals were well-defined.

The concept of regeneration and our creative proposal

Design

Our aim was to create a user-friendly website with a clean and modern look, with smooth animations.

Our creative proposal focused on the concept of continuous change and sustainability. We worked on 2D shapes that are present in different ways throughout the website and change their appearance to evoke the idea of "regeneration".

At the same time, these shapes are an abstraction of the leather cutouts used in the making of Tod's iconic products.

The outlines of shoe soles, as those of the raw materials used to create the accessories, come to life and populate the pages of this website.

A mix of traditional knowledge and creative innovation

Students’ Projects

The creative proposals of these students are the protagonists of this new website. They are introduced on the homepage in an interactive section that looks like a worktable where you can move the different elements with drag-and-drop features. A Call To Action invites users to delve into all projects.

Students' project detail page
In order to meet the layout requirements of individual projects, we worked on a modular content design system. So we can manage the different elements of the page as desired.

From the page 'All projects' we enter a kind of digital gallery.

Digital gallery

We wanted to recreate an environment where the students' projects are hung on the walls, as if they were pieces of art in a virtual exhibition.

To suggest the idea of change, to improve the website's usability and customer experience, we added to the slider view with horizontal scroll also the grid one, a bit faster, where the color of Tod’s, orange, comes back with the hover effect.

Finally, the third option: the list of students in alphabetical order, with the colored hover effect and the preview of the project.

About
Students of Istituto Marangoni could grow professionally and develop their skills, thanks to the support of the Brand’s craftsmen and internationally renowned Mentors from the publishing industry and the fashion system, such as Sara Sozzani Maino, Simone Marchetti and Tonne Goodman.