Luisa Spagnoli

ECOMMERCE - UI Design - 2021

Luisa Spagnoli, from the invention of the Bacio Perugina to the clothing brand

PROJECT GOAL

Luisa Spagnoli is a women's clothing brand, born from the intuition of the founder Luisa Spagnoli who in the early 1900s decided to make clothing with angora wool.

The goal of this project is to create an ecommerce site that lays the foundations for what will be the style of all the digital touchpoints of the Luisa Spagnoli brand.

01

Research

1.  Desk Research
2.  Positioning brand analisys
3.  Competitor analisys
4.  Stakeholders interview

02

Define

1.  Moodboard
2.  Look & feel

03

Ideate

1.  Typography
2.  Color Palette
3.  Icons
4.  Definition boards
5.  Prototype

screen-2
01 . 2 - POSITIONING BRAND ANALYSIS

How Luisa Spagnoli communicates and what are the objectives of this redesign

A project arises from one or more needs. A short interview with the project stakeholders allowed us to collect objectives and expectations. Analyze together what was the current state of digital communication and where to aim. This allowed us to outline some objectives, we kept ourselves open in this phase in order to collect not only visual cues, but also communication and other touchpoints not included in this phase.

02 . 2 - LOOK & FEEL

Two explorations that meet in an amazing result

After having collected the requirements, together with the project team we decided to proceed with an individual exploration phase, collecting images, colors, illustrations and photographic shots, any material that can inspire us to define a stylistic line to be specified, but separately, also doing some applications test. We wanted to understand if in front of the requirement's collection there were more paths to take, without contaminating our idea of the project.

We then faced each other, many applications were made, different from apiece, and it was interesting how each one had worked a stylistic view of this project. Likewise, we noticed that there were some commonalities, and we worked to converge on a single proposal.

screen-3
03 . 4 - DEFINITION BOARDS

Bringing our boards to life

I like to try to keep informed about the tools. While they resemble each other, each has positive aspects that could make a difference depending on what you're doing. I am proud to have been able to convert a working method that was managed locally (with separate Sketch files) into a remote and cooperative method with Figma. Why am I talking about it here? Because this project represents the starting point from which there has been no turning back, we have found a better way to manage it even in the face of the pandemic that required remote work. The result was a success on all fronts!

Macbook
screen-4

BIGHERO IN HOMEPAGE

screen-5

CATEGORY WIDGET IN HOMEPAGE

screen-6

EDITORIAL WIDGET IN HOMEPAGE

screen-7

FASHION SHOW IMAGE SLIDER

03 . 4 - DEFINITION BOARDS

An editorial style that changes pace with colors

In the competitors' collection, noticed how everyone chose a minimalism of black and white that made the sites impersonal and unrecognizable from each other. He did not want to fall into this trap, we decided to create a chromatic rhythm by sampling the colors taken from Luisa Spagnoli clothes and creating a scroll game that had to change the background color with a fading effect.

screen-8

PRODUCT PAGE VIEWPORT

screen-9

PRODUCT PAGE SCROLLED

screen12

PRODUCT LISTING PAGE

screen10@2x

PRODUCT PAGE VIEWPORT

screen11@2x

PRODUCT PAGE SCROLLED