Intégrateur web
Introduction
La société
Muiostudio assure la réalisation d’interfaces interactives ou non pour tout type de production cinématographique, notamment les longs métrages, courts-métrages, films documentaires et séries télévisées (‘Demain nous appartient’ en prime). Leur création peut être intégrée dans beaucoup de types de produits numériques différents, que ce soit téléphone, PC, tablette, télévision et même matériel médical.
Contexte
Dans le cadre de mon diplôme de Concepteur designer UX/UI, j'ai collaboré avec le studio afin de créer leur site d'entreprise.
Le but est d’étendre l’empreinte digitale et de consolider la réputation auprès de l’industrie du cinéma, qui les connaissent aujourd’hui essentiellement grâce aux bouches à oreille. L’outil numérique sera conçu pour expliquer clairement l’expertise en interfaces interactives, répondre aux questions 7j/24h via à un chatbot et une FAQ. Accélérer la phase de débouché commercial grâce à une préparation rapide des prédevis. De plus, il ouvrira la possibilité à des locations de produits numériques optionnels.
Avant-projet
Définition du projet
Site vitrine
Avoir un site permettant de mieux présenter l’activité, donc une partie site vitrine et explication de ce qu’ils font et comment ils le font.
Blog
Le site comprendra également une partie Blog permettant de poster les dernières actualités de la société.
Formulaire pré-devisage
Un formulaire de pré-dévisage permettant aux clients de renseigner leurs besoins, que ce soit en création d'interface ou en location de matériel.
Recrutement
Une page de recrutement avec la liste des postes à pourvoir ainsi qu’un formulaire de candidature spontanée.
FAQ
Une FAQ pour répondre à la plupart des clients et éventuels futurs employés.
Analyse concurrentielle
Segment Location d'appareil de jeux
Pour la location de matériel numérique dans le sud de la France, je me suis contenté de faire un mapping pour représenter la situation du marché. On peut remarquer que les sociétés proposant la location de matériel sont soit très généralistes, soit trop éloignées.
De plus, même les sociétés proposant la location de ce type de matériel restent assez aléatoires sur la qualité du produit proposé. Sur le graphique ci-contre, on peut clairement voir qu'il y a une opportunité de développement commercial.
Segment Création d'interfaces
Pour la création de maquette interactive appliquée au métier du cinéma, les principaux concurrents sont Webonset, GTV mobile, Interfaces cinéma, profilmmakerapps. L’analyse sera faite sur Webonset car c’est l’entreprise possédant le site le plus abouti se situant en France.
Parcours de navigation
Le site webonset.fr propose une navigation claire et organisée, permettant aux visiteurs d’accéder facilement aux sections clés : services, tarifs, contact, et blog.
La structure est intuitive, avec des menus accessibles et un cheminement logique entre les sections. Cette organisation facilite la découverte de l’offre et la conversion des visiteurs en prospects.
Choix du nom de domaine et stratégie de branding
Le nom “WebOnSet” est pertinent : il évoque clairement le lien entre le web et le cinéma, est facile à prononcer et à retenir. Il est disponible en .fr et protégé juridiquement, ce qui évite les risques de confusion ou de concurrence déloyale.
Les noms des concurrents sont plus génériques ou techniques (interfaces-cinema.com, profilmmakerapps.com), ce qui peut limiter leur mémorabilité ou leur impact branding.
Ambiance et charte graphique
La charte graphique de WebOnSet est sobre, professionnelle et cohérente. Elle repose sur une palette de couleurs principalement noire, verte et blanche, avec des accents colorés pour les boutons et liens. La typographie est lisible et bien hiérarchisée. Les images utilisées sont de qualité, illustrant bien les réalisations du site.
La cohérence entre les différentes pages et supports est bonne, renforçant l’identité visuelle.
SEO
Le site présente une bonne structure technique SEO :
URL claires
balises meta optimisées
hiérarchie des titres respectée
Présence d’un sitemap et d’un fichier robots.txt.
Cependant, des erreures 404 et liens brisés ont été détectés, ainsi qu’un temps de chargement perfectible.
Persona
Sophie, Persona primaire
Freelance
Personnalité
Organisée
Diplomate
Efficace
Objectifs
Obtenir des infos clairs pour les incrustations numériques.
Comprendre les tarifs et les options disponibles.
Conseiller les productions sur les meilleures solutions techniques et budgétaires.
Impact sur l’UI/UX du site
FAQ avec «Tarifs et Devis»
Section «Conseils»
Chat en direct pour répondre aux questions urgentes.
Design professionnel et rassurant.
Emma, Persona Secondaire
Accessoiriste
Personnalité
Rigoureuse et attentive aux détails
Pragmatique
Objectifs
Trouver des solutions d’incrustation numérique qui s’incluent aux mieux dans le processus de production.
Gagner du temps sur la préparation des accessoires complexes ou coûteux.
Assurer la cohérence visuelle des incrustations numériques pour qu’elles paraissent réalistes et que l’interaction avec les acteurs sur le set se passe au mieux.
Impact sur l’UI/UX du site
Une partie pour connaitre le processus de production.
Design clair et fonctionnel.
Thomas, Persona Secondaire
En recherche d’emploies
Personnalité
Ambitieux
Curieux
Objectifs
Découvrir les opportunités de contrat.
Comprendre les technologies utilisées par l’entreprise pour se former en amont.
Envoyer une candidature spontanée ou répondre à une offre.
Impact sur l’UI/UX du site
Page «Carrières» claire et accessible, avec des Offres d’emplois détaillées (durée, compétences requises, avantages).
FAQ sur les recrutements.
Formulaire de candidature simplifié.
Possibilités de s’abonnées à la newsletter pour suivre l’actualité.
Palette et ambiance
Le site aura un design professionnel, sérieux, technologique. La palette sera de couleur sombre avec un effet néon et futuriste. Dans ce but, 2 couleurs ont été retenues plus une de fond.
Le violet et le bleu de la palette sont déclinables dans un certain nombre de couleurs, avec plus ou moins de saturation en fonction des besoins du site.
Typographie
Header 1
DM sans : Gras taille 64
Header 2
DM sans : Medium taille 32
Header 3
DM sans : Medium taille 22
Pour les titres, la police choisie est DM sans, déclinée en plusieurs tailles et graisse.
Une police sans empattements a été choisie pour garder une esthétique moderne. De plus, les formes des lettres sont globalement avec des angles sans arrondis pour souligner le côté technologique et professionnel.
De plus, un léger dégradé sera présent sur tous les titres de niveau 1 et 2 pour faire un rappel d’autres éléments avec des dégradés.
Pour les paragraphes la police inter sera utilisée.
inter tailles 12 en graisse légère.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat.
Logotype
Version blanc pour fond noir
Le client souhaite garder son logo existant.
Par conséquent le cadrage de certaines règles sur l'utilisation du logo ont été définies.
La lettre µ suivant l'IO pour le nom de domaine avec écrit studio. En dessous, le logo est comme encadré pour signifier le cadre professionnel de la société et les ondulations autour du O du logo sont présentes pour rappeler la flexibilité et l'adaptabilité inhérentes à leur activité.
Une zone d'exclusion sera présente de tous les côtés du logo.
Version en noir pour fond blanc
Création d’élément graphique
Pour embellir le site et pour accentuer l’effet néon, plusieurs éléments graphiques ont été faits.
Ces éléments ont été faits sur Illustrator puis transférés sur Photoshop pour les ombrages.
Arborescence
L'arborescence du site est classique, la page d'accueil permet d'être redirigé vers toutes les autres pages du site.
Méthode de production
Blog
FAQ
Recrutement
Discuter
Demander un devis
En plus de ces éléments, une page 404 sera présente en cas de lien invalide.
Parcours utilisateurs
Scénario N°1 : Sophie, Persona primaire souhaite pré deviser pour l’ensemble des prestations (possibilité de sélectionner plusieurs services).
Scénario n°2 : Emma souhaite se renseigner sur le fonctionnement de l’entreprise.
Scénario n°3 : Thomas, en quête d’opportunités, souhaite candidater à des offres d’emploi.
Prototypage
Pour coller au mieux à la vision et à l'identité du client, plusieurs propositions de maquette ont été réalisées.
Intégration du site
Le site a été fait grâce au CMS WordPress pour que le client puisse modifier facilement des pages, des articles ou changer facilement n'importe quel élément du site.
De plus, le constructeur Divi a été utilisé dans sa version 5, qui n'est plus en bêta depuis peu.
Pour finir, certaines mises en forme du site ne pouvant être faites directement via le constructeur, j'ai appliqué certaines modifications via du CSS personnalisé. Par exemple, afin d'appliquer un dégradé de couleur sur un texte, il est nécessaire de passer par du CSS.
Extensions wordpress
Pour les besoins du site, un certain nombre d’extensions ont été installées.
WP consent API
Gestion cookie
AXEPTIO
Gestion cookie
AI Engine
Chatbot
Yoast duplicate post
post
Updraft plus
sauvegarde
WP forms
Contact
Duplicator
Migration site
Simple job board
Emploie
SEO
Pour optimiser le référencement des textes alt, on a été ajouté à toutes les images. Le site a été pensé pour avoir des liens et des call to action pour faire des références entre les pages. Des méta-textes ont été ajoutés à chaque page également.
Les principaux problèmes du référencement sont le manque de backlinks extérieurs au site et la latence du serveur, car mon serveur n'est pas très puissant. Le rapport des points d'améliorations a été transmis aux clients.
Pagespeed Insight
Rankmath SEO
Communication
Newsletter
Pour tenir informée des nouveaux articles de blog, des nouveautés et de l'actualité générale du studio, une newsletter sera envoyée 1 fois par mois.
Les utilisateurs peuvent s'inscrire à une newsletter sur le site. La liste des utilisateurs inscrits et l'envoi du mail de newsletter ont été faits via Brevo.
Sur la page d'accueil, une section permet de s'inscrire à la newsletter.
Template de newsletter fait sur brevo
Vêtements
Pour permettre une identification facile de la société sur les tournages et événements, un design de vêtements a été proposé pour qu'il soit porté par les employées.
Pour être cohérent avec la direction artistique des tee-shirts et pulls noirs, avec le logo et l'élément graphique dans leur dos.
