Opération Be RayBan®
Application mobile et internet BeRayban®
MEDIA QUIERY ET RWD 01 / / / MEDIA QUIERY ET RWD 02
Le contexte
2010, les opticiens Krys et Atol lancent diverses applications en ligne ou pour la téléphonie afin de proposer des outils de réalité augmentée (Atol) pour essayer des lunettes en temps réel ou des catalogues interactifs (Krys) de personnalisation de monture.
Certaines applications ont été téléchargées plus de 100 000 fois.
Le projet BeRayBan®
L’idée
Déployer l’application / site événementiel BeRayban sur le réseau et proposer une réelle offre promotionnelle de 15 € afin de générer de la fréquentation et de l’envie d’achat.
Créer un studio d’essayage et de personnalisation des lunettes de vue et de soleil pour la marque accessible « multi plateformes » c’est à dire depuis le site internet www.Be-rayban.com via les différents supports fixes ou mobiles.
Cette conception est un mixte des principes de tracking, de réalité augmentée et des règles du Responsive Web Design.
Le principe
Une webcam qui capture une image fixe ou animée selon les capacités à gérer le tracking en temps réel (1) le concept ne prend en charge que la monture.
Sous l’image capturée apparaît l’accès aux lunettes de vue / soleil (boutons)
Défilement horizontal des modèles (slide <—-> )
Drag and Drop des modèles sur l’image (fixe ou animée)
- Fixe : de face ou de trois quarts
- Animée : tracking sur les mouvements de la tête
Menu des couleurs permet de modifier la couleur du modèle en temps réel (alerte si modèle non personnalisable)
Apparition du bouton « commander »
Après validation de la commande un code est généré ( 3 lettres 6 chiffres ex : 33SRB5184)
33 = département, S = soleil, V = vue, RB**** référence article s’il est disponible.
La geolocalisation du mobile ou de la connection (tablette ou ordinateur) ouvre un popup avec les lieux de ventes sur un périmètre accessible à pied ou en vehicule. (choix de la locomotion picto marche ou voiture)
Le code est présente au vendeur pour le retrait de l’article.
La campagne TV de lancement
Elle se veut très enigmatique afin de susciter la curiosité.
Un flashcode apparaît 15 secondes RayBan en signature.
Le flashcode est un lien vers l’application.
Le site : spécificités techniques
Le site présente d’emblée l’interface video de capture (détection webcam ou ulpoad photo)
Et les outils nécéssaires au cadrage.
Les boutons lunettes de vue et de soleil
La galerie en slide horisontale pour les modèles
La palette des couleurs disponibles
Le bouton commander
Le code de retrait
Le popup de disponibilité dans les magazins autour du mobile géolocalisé
Un lien facebook et une galerie si l’on souhaite ulpoader sa photo, formulaire de cession de droit à l’image.
Sous l’application on retrouve l’accès à l’ensemble de la collection RayBan et des nouveautés.
Mobilefirst et les principes de Responsive Web Design
Le site se redimensionne selon la taille de l’écran client.
3 Tailles = 3 déclinaisons de la charte graphique
Web = 960, Tablettes = 800, Téléphones = 320 (chiffres de principe qui évoluent selon les mises à jour des modèles)
La création et l’identité
L’identité graphique de l’application / site événementiel
Le client souhaite un impacte visuel qui réaffirme la marque lancée en 1937
Charte imposée :
Le logo Rayban (2)
La couleur Rayban (3)
Teinte :
Pour l’identité globale, le client a quelques mots clefs pour l’ambiance, cela dis, toute proposition pertinante est bienvenue !
Les states 50′s 60′s, Cadillac et Chevrolet, typographie scripts oldschool, enluminures, sobriété et élégance, simplicité de lecture, pas de photo hormis un modèle de lunettes…
La teinte graphique et l’ambiance seront déterminées par les choix typographiques et colorimétriques, illustrations bienvenues…
Le teaser :
Réalisé à la fin du projet, il se présente sous forme de flyer papier ou d’animation flash.
Le teaset papier ou flash : identité du site déclinée sur papier + flashcode
Wording à déterminer pour l’accroche
Le logo + l’idée de lunettes (vue / soleil)
Le flashcode
Les bannières flash
Trois propositions de format :
Un expand 468 x 60 x 400
Un pavé 250×250
Un skyscrapper 120 x 600
Les livrables
4 déclinaisons :
Ipad3 = 2048 x 1536 portrait / paysage
Iphone5 = 1136 x 640 portrait / paysage
3 formats de bannières skyscrapper, expand, pavé
1 flyer
Outils illustrator / phohoshop
En commentaire
Storyboard / conceptboard
Wireframes / Zonning
Diagramme Gantt / Planning et échéance
Budget / Devis
Liens (*)
(1) http://www.youtube.com/watch?v=WPFHdcusNps
(2) http://www.lalogotheque.com/admin/4images/data/media/18/RAYBAN.zip
(3) http://lunettes-rayban.optique-sergent.com/wp-content/uploads/2011/03/logo-ray-ban-genuine-since-1937.png
En annexe
Ressources et inspirations
http://960.gs/
http://960.gs/demo.html
http://www.fontsquirrel.com/
http://www.google.com/webfonts
http://www.graphic-exchange.com/fexellence.htm
http://www.graphic-exchange.com/03identity.htm
http://trends.levif.be/economie/actualite/high-tech/5-idees-pour-integrer-la-realite-augmentee-a-votre-marketing/article-4000031299923.htm
Benchmark
http://www.la-cremerie.com/benchmark-des-sites-dopticiens/
L’exercice se fait sous Illustrator et le rendu est au format PDF
Seront notés :
Les recherches papier (JPG)
Les mockups ou pré maquette fonctionnelle de l’expérience utilisateur (PDF)
Les planches des écrans (PDF)
Caler les plans de travail (un plan = une page dans PDF) Menu > Fichier > Format du document > Modifier plan de travail (en haut à droite de la fenêtre).
Tout ce qui est hors du plan de travail n’apparaît pas dans les pages du PDF.
Depuis illustrator > Fichier enregistrer sous PDF :
Onglet Général > Paramètre prédéfini = qualité optimale
Onglet compression > Qualité image moyen à faible si il n’y a pas de bitmap dans le composite.
Fichier PDF inférieur à 4000 Ko