Santoni

When minimalism met elegance in a Motion System Design

Santoni was founded in 1975, as a high-end footwear laboratory following the intuition of Andrea Santoni. Thanks to his son Giuseppe, the company has evolved into one of the leading companies in the global luxury market, maintaining the authentic artisanal know-how, handed down from generation to generation.

The e-commerce website should be an instrument to convey the brand essence, “handcrafted excellence”, its main value of family - interpreted as respect, tradition, roots, timelessness - and a way to express the high-quality know-how, as handmade, attention to detail, but also innovation and continuous improvement.

  • Year

    Year

    • 2021 - present
  • Design Team

    Design Team

    • 1 Design Director
    • 1 Sr. UX&UI Designer
    • 1 Md. Brand&Visual Designer
  • Activities

    Activities

    • Competitive analysis
    • Creative concept
    • UX/UI design
    • Motion System Design
    • Prototyping
    • Accessibility
    • Development support
    • Evolution roadmap
  • Design Tools

    Design Tools

    • Figma
    • After Effects

    Commerce Platform

    • Salesforce Commerce Cloud
  • Online Website

    Online Website

    santonishoes.com
  • Soundtrack

    Soundtrack

Key Objectives

Design an immersive digital experience with the storytelling of unique and premium products. Communicate the renewed brand’s identity and its highly custom-tailored products.

Experience Principles

We analysed the competitive scenario through 4 main topics:

  • content commerce
  • selling tools
  • search enhancement
  • experience enrichment

This exploration enabled a shared knowledge of all the brand’s points of strength and their importance, such as social sustainability, Innovation lab, product storytelling, personalisation and art of gifting, animation, and micro-interactions.

Concept Shaping

The look & feel of the final product, as the more subconscious and direct expression of the brand’s soul, was a point of focus since the very start of the project.

We conducted an exploration similar to the one based on experience principles, focusing on the main aesthetics and stylistic features within the competitive landscape.

We mapped 4 main stylistic families and the styling cues expressing the Santoni’s soul, to achieve a definition of the creative concept look & feel: minimal elegance.

Palette

Primary Palette

Primary palette colorsPrimary palette colors

Secondary Palette

Secondary palette colorsSecondary palette colors

Typography

Concept Typography - Sofia Pro - Contralto BigConcept Typography - Sofia Pro - Contralto Big

Creative Concept

A seamless and sophisticated experience

As emerged during the discovery phase, micro-interactions, animations and transitions were valued by the brand art direction as a distinctive element to communicate the brand identity.

We designed each component’s and atom’s movement and cooperated with the frontend development team, defining and documenting a set of modular rules: the motion design system.

Easing

Motion Principles

Minimal elegance

To express and highlight the brand visual values, through simple and essential movements, avoiding to overload the user with too many visual inputs.

Focus

To direct the user’s attention toward the most important and meaningful interfaces’ elements, contents, and actions.

Continuity

To smoothen the website navigation experience, pages’ transitions make the user flow from a content to another in a refined and stylish mood.

Movement - Examples

Pop-up

  • Ease in-out
  • Duration: 500 ms
  • Transparency: 0%-100%
  • Positon delta: 24 px
  • Direction: bottom-up

Image mask

  • Ease in-out
  • Duration: 500 ms
  • Transparency: 0%-100%
  • Positon delta: 24 px
  • Direction: bottom-up

On scroll movements

  • Linear
  • Duration: on scroll

Choreography - Examples

Product Carousel + Text Module

  • 1. Editorial text
  • 2. Pop-up (Card prodotto)
  • 3. Pop-up (Card prodotto)
  • 4. Pop-up (Card prodotto)
  • 5. Pop up (Drag to explore)

Categories Highlight Module

  • A. Image Mask/Horizontal
  • 1. Pop-up (Soprattitolo)
  • 2. Pop-up (Categoria 1)
  • 3. Pop-up (Categoria 2)
  • …

Product Carousel + Text Module

  • A. Image Mask/Horizontal Right
  • 1. Pop-up (Breadcrumbs)
  • 2. Pop-up (Title)
  • 3a. Pop-up (Colori)
  • 3b. Underline (Colori)
  • 4a. Pop-up (Taglie)
  • 4b. Underline (Taglie)
  • 5. Pop-up (CTA)
  • 6. Pop-up (Link)
  • 7. Button Fill

Composable Commerce

Since the first release in the middle of 2022, the website continues to evolve. These changes concern different topics, belonging to:

  • visual look & feel;
  • CRO and SEO optimisation;
  • new services introduction.

2022

  • New typography
  • Size finder tool
  • Personalisation tool

2023

  • Pre-order
  • Personalisation optimization
  • Abandoned cart management
  • PDP redesign

2024

  • Express Checkout
  • PDP optimisation
  • PLP redesign
  • Filters optimisation

Discovery

& concept shaping

Motion

System

Evolution

Enhancements & optimizations

Discovery

& concept shaping

Motion

System

Evolution

Enhancements & optimizations

Final Thoughts

This project faced many changes: client management, art direction and team, and the brand’s visual values, image, and priorities. The main part of the first concept was about animations and transitions, and related detailed documentation - an important phase to establish rules and variations within a solid motion system. Since the first release, new needs have started to emerge and I’m currently supporting the client in all website evolutions, new features and optimisations.

final-thougts-image

email address copiedchiara.ricolfi@gmail.com

/in/chiararicolfi

Download Resume (pdf)