URBANMASALA
Présentation du projet ~ ~ CHARPOY CRPL Gobelins, 29 Avril 2014
~ ~ CHARPOY
CHEF DE PROJET Virginie Bazot
UX DESIGN
Pauline Prévot
DIRECTION TECHNIQUE Baptise Miseray
DIRECTION ARTISTIQUE Charles Duchesne
Présentation du projet web Urbanmasala
2
SOMMAIRE ~ ~ Présentation des Charpoy
1.LE CONTEXTE C’est quoi Urban masala ? Les objectifs à tenir Qui sont les futurs clients du site Urbanmasala ?
2.NOTRE RÉPONSE Les grands principes : Navigation sur le site
3.NOS CHOIX ARTISTIQUES Le côté obscur de la force Nos inspirations Notre parti-pris graphique La charte : Navigation sur le site
4. DEUX PARCOURS UTILISATEURS Navigation sur le site
5.NOS CHOIX TECHNIQUES Wordpress : Navigation sur le site
6.CONCLUSION
Présentation du projet web Urbanmasala
~ ~ CHARPOY
3
Le contexte
III. DIRECTION ARTISTIQUE
C’EST QUOI URBANMASALA ?
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Une boutique dans un quartier branché
↓
↓ Une clientèle «bobo» Présentation du projet web Urbanmasala
~ ~ CHARPOY
6
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
4 amis passionnés par l’Inde
↓
Présentation du projet web Urbanmasala
~ ~ CHARPOY
7
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Des produits de qualité
↓ ISSUS DU DESIGN INDIEN CONTEMPORAIN
↓ Une éthique proche du «fair trade» Présentation du projet web Urbanmasala
~ ~ CHARPOY
8
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
UNE BONNE REVUE DE PRESSE + UNE PAGE FACEBOOK + UN FICHIER CLIENT CONSÉQUENT
Présentation du projet web Urbanmasala
~ ~ CHARPOY
9
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Un blog sur l’Inde et la décoration
↓ PAR LEQUEL TRANSITENT DE PLUS EN PLUS DE COMMANDES
↓ Problème à résoudre Présentation du projet web Urbanmasala
~ ~ CHARPOY
10
LA SOLUTION : UNE E-BOUTIQUE !
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Objectifs
↓ CRÉER UNE E-BOUTIQUE À L’IMAGE DE LA BOUTIQUE RÉELLE QUI INTÈGRE LE BLOG EXISTANT INTERFACE FACILE D’UTILISATION Présentation du projet web Urbanmasala
~ ~ CHARPOY
12
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Contraintes
↓ PAS DE BASE PHOTOGRAPHIQUE TRÈS PEU DE DONNÉES CONCERNANT LA FRÉQUENTATION DU BLOG
Présentation du projet web Urbanmasala
~ ~ CHARPOY
13
LE CONTEXTE
NOTRE RÉPONSE
Présentation du projet web Urbanmasala
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
~ ~ CHARPOY
NOS CHOIX TECHNIQUES
CONCLUSION
14
ENQUÊTE : QUI SONT LES FUTURS CLIENTS DE LA E-BOUTIQUE ?
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
L’ÉTUDE DES CIBLES
↓ Interview de l’équipe Observation in situ Étude du fichier clients et statistiques Facebook Une enquête menée en boutique Présentation du projet web Urbanmasala
~ ~ CHARPOY
16
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
L’enquête en boutique : une vingtaine d’interviews CONCLUSIONS DE L’ENQUÊTE
↓
Un public majoritairement féminin + de 40/50 ans Majoritairement des cadres Habitent le quartier et connaissent peu le blog Attirés par le qualitatif et l’exotisme Présentation du projet web Urbanmasala
~ ~ CHARPOY
17
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
LES PERSONAE : les habituées de la boutique La CSP ++ : Catherine, 50 ans, exigeante et peu technophile, elle recherche l’originalité
Présentation du projet web Urbanmasala
↓
~ ~ CHARPOY
L’amoureuse de l’Inde : Claire, 45 ans, amoureuse de l’Inde, elle recherche l’ambiance
18
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
LES PERSONAE : les professionnels La journaliste : Sandrine, 40 ans, elle recherche des produits précis et a peu de temps
Présentation du projet web Urbanmasala
↓
~ ~ CHARPOY
Le revendeur : Eric, recherche des produits phares pour ses clients, achète en gros
19
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
LES PERSONAE : la cible à conquérir
↓ La cible à conquérir : Émilie, 31 ans, elle s’installe pour la première fois et recherche des meubles originaux et peu chers
Présentation du projet web Urbanmasala
~ ~ CHARPOY
20
Notre réponse III. DIRECTION ARTISTIQUE
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
LES GRANDS PRINCIPES
↓ Une double entrée : la boutique et le blog Une page d’accueil centrée sur les produits et qui propose toutes les informations importantes (adresse, accès presse et revendeurs)
Présentation du projet web Urbanmasala
~ ~ CHARPOY
22
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Un site qui reproduit l’ambiance de la boutique (play-list, conseils, histoire des produits) Une forte réassurance (conditions de vente, provenance des produits) Un concours photo pour créer du trafic et fidéliser les clients Présentation du projet web Urbanmasala
~ ~ CHARPOY
23
En ligne !
III. DIRECTION ARTISTIQUE
Nos choix artistiques
LE CÔTÉ OBSCUR DE LA FORCE
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Les e-boutiques de décoration et design indien en quelques mots
↓
SURCHAGÉES ARCHÉTYPÉES VIEILLISANTES
↓
Des exemples ? Présentation du projet web Urbanmasala
~ ~ CHARPOY
27
(Attention les yeux...)
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
www.india-import.fr Présentation du projet web Urbanmasala
~ ~ CHARPOY
29
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
www.artisanatsindien.com Présentation du projet web Urbanmasala
~ ~ CHARPOY
30
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
www.lesinterieursdailleurs.com Présentation du projet web Urbanmasala
~ ~ CHARPOY
31
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Quelques e-boutiques de décoration et design «généralistes»
↓ ÉPURÉES ESTHÉTIQUES CLAIRES
↓ Elles nous ont servi de référence Présentation du projet web Urbanmasala
~ ~ CHARPOY
32
NOS INSPIRATIONS
Présentation du projet web Urbanmasala
~ ~ CHARPOY
33
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
www.boldandnoble.com Présentation du projet web Urbanmasala
~ ~ CHARPOY
34
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
www.lafabrika.be Présentation du projet web Urbanmasala
~ ~ CHARPOY
35
NOTRE PARTI-PRIS GRAPHIQUE
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Valoriser la singularité des produits vendus et refléter l’ambiance conviviale de la boutique
↓ APPROCHE ILLUSTRATIVE DIALOGUE PHOTOS-ILLUSTRATIONS TONALITÉ DÉCALÉE Présentation du projet web Urbanmasala
~ ~ CHARPOY
37
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
SERGE BLOCH
Présentation du projet web Urbanmasala
~ ~ CHARPOY
38
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
SERGE BLOCH
Présentation du projet web Urbanmasala
~ ~ CHARPOY
39
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
SAUL STEINBERG
Présentation du projet web Urbanmasala
~ ~ CHARPOY
40
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
www.hermes.com Présentation du projet web Urbanmasala
~ ~ CHARPOY
41
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
www.hermes.com Présentation du projet web Urbanmasala
~ ~ CHARPOY
42
NOTRE CHARTE GRAPHIQUE
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Lifting du logo existant
↓ ÉPURÉ LISIBILITÉ ACCRUE
Présentation du projet web Urbanmasala
~ ~ CHARPOY
44
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
↓
LE CONTEXTE
Présentation du projet web Urbanmasala
~ ~ CHARPOY
45
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Nous avons préconnisé un jeu de deux typographies
↓
ROBOTO + narziss
↓ Google webfont Sans empattement Textes courants Intitulés de menus Confort de lecture Présentation du projet web Urbanmasala
↓ Fiches produits Sérifs très ronds Avec corps important Orientale et Moderne Cohérence illustration ~ ~ CHARPOY
46
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Une seule couleur : orange
↓ LUMINEUX CHALEUREUX HARMONIE AVEC LE N&B
↓ Mon vrai nom est #f48e42 Présentation du projet web Urbanmasala
~ ~ CHARPOY
47
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Le recours à l’illustration
↓ UNE AMBIANCE VALORISATION DES PRODUITS AUTHENTICITÉ SPONTANÉITÉ / FAITS-MAINS
Présentation du projet web Urbanmasala
~ ~ CHARPOY
48
Navigation
III. DIRECTION ARTISTIQUE
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
2 PARCOURS UTILISATEURS
Présentation du projet web Urbanmasala
~ ~ CHARPOY
50
Nos choix III. DIRECTION ARTISTIQUE techniques
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Pourquoi Wordpress ?
↓
ERGONOMIE CUSTOMISATION SOURCES D’INFORMATIONS
Présentation du projet web Urbanmasala
~ ~ CHARPOY
52
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
HÉBERGEMENT & DOMAINE
↓
Serveur mutualisé Synchronisation des noms de domaines Sauvegarde automatique
Présentation du projet web Urbanmasala
~ ~ CHARPOY
53
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
CHOIX DU THÈME
↓
Site responsive Support Yith
Présentation du projet web Urbanmasala
~ ~ CHARPOY
54
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
GOOGLE ANALYTICS
↓ Suivi global du trafic
Présentation du projet web Urbanmasala
~ ~ CHARPOY
55
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
Visite du back-office 8 tutoriaux vidéo
Présentation du projet web Urbanmasala
~ ~ CHARPOY
56
Conclusion
III. DIRECTION ARTISTIQUE
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
URBANMASALA.FR c’est :
↓
133 fiches produits 300 photos 2500 heures de travail 4 paires de cernes 8 paquets de Fisherman’s friend
Présentation du projet web Urbanmasala
~ ~ CHARPOY
58
LE CONTEXTE
NOTRE RÉPONSE
NOS CHOIX ARTISTIQUES
DEUX PARCOURS UTILISATEURS
NOS CHOIX TECHNIQUES
CONCLUSION
BREF
↓ une e-boutique prête à l’emploi et un bel outil d’apprentissage !
Présentation du projet web Urbanmasala
~ ~ CHARPOY
59
MERCI DE VOTRE ATTENTION