Overview
Brief
I was asked from H-FARM to design the in-store experience for Diesel in Milan. The experience had to let customers discover, feel inside the brand, be inspired about products and content from the magazine.
What I did
Research
On-site study, Benchmark, Brand analysis
Art Direction
Sketching, Metaphor, Principles, Concept
Design
Usability, Typography, Temporisation, Content
UX Design
User flow, Sitemap, Wireframe & prototyping Templates & guidelines
Results
New experience
Visitors who enter the Milano San Babila store can experience the interactive touchpoints besides the salesperson support.
White label framework
This pilot can work well in all other stores in the world and adapt easily with next campains.
Useful for salesperson
The main use was intended for final customers, but actually it is mostly used by salesperson to know more about the product they have in-store and related content.
Press
We had some mentions about the work done on the main natitional websites and magazine, including Wired.
Research
On-site study
All displays are located inside the store, some of them both in man and woman floors. After a look at the building plant, I studied in-store the customer flow dynamics and the position of every product category.
Benchmark
Languages: From Moma’s digital experience, Netflix ui framework, Google material design we extrapolated a series of language elements: canvas, cards, cycles, call- to-action, stickers, elevation, feedback, components.
Mood: Research of a series of visual languages: material, grunge, black & white, gradient & fluo, glass.
Touchpoint: I did an in-depth online research about applications with related touchpoints in stores.
Brand
Communication Audit: We collected a series of visual artefacts especially from online communication.
Art Direction
Sketching
Together with a graphic designer I lead a brainstorming and sketching session were we came up with different framework ideas. Then I started working with few of them.
Metaphor
We were trying to express metropolitan environment, city night lights, people under flash lights with an electronic music background and fast pace. Keywords: city, night, flash lights.
Principles
According to the brand, location, touchpoint and trends, I collected the pillars for the user interaction and design direction.
Concept
Starting from the metaphor, the basic idea is to attract people interest and to provide the less amount of affordances in order to make the action. So I designed in keynote the first concept based on animated content between flash lights.
Design
Usability
All the content is set on modular units, with a custom size adapted for each touchpoint. Also touchpoint size and user position limit the area of interaction.
Typography
Very simple type hierarchy, following the brand guidelines, with some custom look and feel.
Temporization
From one side the user needs to know when the next content is coming, on the other we don’t have any way to detect people presence. Therefore the content is up to the user interaction. Content is pre-loaded according to this behavior.
Content
According to the location, touchpoints and strategy, we had to prioritize content, timing and their opportunity space over the display.
UX Design
User flow
All the content is set on modular units, with a custom size adapted for each touchpoint. Also touchpoint size and user position limit the area of interaction.
Sitemap
In order to display all website inormation, we had to understand and riorganise all content.
Wireframe & prototyping
We did all the way from low-fidelity to high-fidelity for each touchpoint. We tried to stick on less templates as possible and at the same time to address the user needs.
Templates & guidelines
Once done, we came up with a quick to use document for the graphic designer and developers, who had to arrange the content.
