menu
Utopiales
Complices

Aucun(e) complice

Motivations

Projet prospectif

Date de l'exaction

05/04/2018 09:44

Durée estimée

35h (4 semaines)

Spécialité

Design Ux/Ui

Compétences

Sketch, photoshop, illustrator, Audit Ux/Ui

Principe

Le but de ce projet était la refonte totale du site web du festival Les Utopiales. L’objectif du travail proposé se situe à deux niveaux. D’abord dans l’innovation des 3 nouvelles fonctionnalités apportées, mais aussi graphique avec un nouvel univers visuel exploré et une meilleure hiérarchisation des informations.

Contraintes

La refonte s'est faite en une quarantaine d'heures. Les contraintes étaient de rendre ce site, aujourd'hui utilisé plus ou moins 3 mois par an (environ 2 mois avant l’événement pour de l’information et 1 mois après pour des archives) vivant sur l'ensemble une année avec des fonctionnalités plus interactives et fonctionnelles.

Voir le projet

Le festival

"Les Utopiales" est le deuxième festival de science fiction le plus important au monde (derrière le Comics Con de San Diego). Il a lieu au palais des congrés de Nantes sur 5 jours, tous les ans depuis 20 ans.
Les visiteurs viennent voir des films de science fiction, rencontrer des artistes et suivre des conférences animées par des spécialistes de différents domaines sur des thèmes variés et des questions phares posées par les oeuvres de SF telles que le transhumanisme, le monde subatomique, quantique ...

Site web actuel

Actuellement l'interface du site est plutôt sobre, majoritairement noir et blanc. Il supporte de nombreuses catégories dans son menu. Il n'a qu'une visée informative pour l'événement en donnant des informations historiques et pratiques sur celui-ci.

Lien vers le site

Veille et benchmark

Je me suis inspiré de plusieurs artistes pour créer les pages de ce nouveau site web. J’ai notamment étudié le travail des artistes et designers graphique du mouvement minimaliste suisse et en particulier Joseph Müller Brockman.
Je me suis attardé sur la hiérarchisation par la gestion des tailles et les styles de police, ainsi que les éléments graphiques séparant et ou rythmant la composition.
L’inspiration est aussi venue de différents sites web, surtout de science fiction, et l’analyse de la mise en page de ce type de contenu, les styles graphiques existants, les fonctionnalités et sa hiérarchisation.

Direction artistique

Après l’analyse de l’existant, la réflexion s'est portée sur les différentes fonctionnalités ainsi que sur une première version et de leur matérialisation sur les pages, avec des zoning (papier) et des wireframes poussés des futures pages.
Les nouvelles fonctionnalités ajoutées au site pour qu’il vive toute l’année comme le « salon 57 » ou « hier et demain ». Le « salon 57 » étant un lieu de réflexion et « Hier et demain » est un lieu de partage de contenus.

Page d'accueil

Dans la nouvelle version proposée ici, l’utilisateur arrive sur une création intégrant Jules Vernes à un genre de science fiction (SF). Jules Vernes est la source d’inspiration du festival, le symbole culturel de la ville et un précurseur mondial de la SF.
Après le premier scroll, on trouve immédiatement une rapide description du festival, des informations pratiques et la programmation du festival, qui ramènent tout sur des ancres sur la page festival.
Le menu est symbolisé par l’icône circulaire (en haut a gauche). Il se comporte comme un robot assistant qui nous suit et nous assiste dans notre navigation. Il est inspiré par les films Blade Runner pour la fonction et Oblivion pour le design. Il regroupe l'ensemble des rubriques qui viennent se disposer autour de lui. Ce robot est disponible tout le temps sur l’écran en temps normal (de manière similaire à la bulle de discussion Messenger sur Android).

Page Festival

La page du festival est la page identifiée comme la plus importante de tout le site et surtout pour le festival. D'abord, elle doit contenir l'ensemble des informations pratiques sur le festival, c'est la premère raison de venir sur le site pour la majorité des visiteurs. Le site actuel contient les informations nécessaires aux visiteurs, cette partie festival du nouveau site est en réalité la réunion et la réorganisation du contenu du site actuel tout entier. Les informations sont désormais hiérarchisées de manière logique avec en premier, la description de l'événement (avec l'ajout de citations de conférenciers des années précédentes pour rendre cette présentation de l'événement plus vivante). Ensuite on trouve les tarifs organisés dans un tableau. Le programme est désormais consultable directement sur le site est non plus à partir d'un pdf téléchargeable. Enfin, on trouve le plan d'accès avec un plan de la ville et des itinéraires de transports en commun conseillés. Le flow de l'utilisateur est donc le renseignement et l'adhésion au concept, accéder à la programmation, l'achat des tickets, et enfin l'accès à l'événement.

Pages archives et contacts

Ces deux pages sont du contenu qui était aussi présent sur le site d'origine mais qui ont été retravaillées graphiquement, dans l'UX et dans leur contenu. La page d’archive permet de (re)visionner en streaming (possiblement émuler depuis youtube) les conférences des années précédentes. Elles sont désormais répertoriées par éditions et donc par thématiques abordées. Il y a aussi eu la création d’une section commentaires pour favoriser l’échange entre les utilisateurs, tant sur leurs ressentis à froid, que leurs souvenirs ou leurs réflexions à ces moments.
La page contacts reste classique mais toujours fondamentale surtout dans le cadre d’un événement. Elles permettent aux utilisateurs de joindre le staff de l’événement en cas de propositions comme en cas de questions d’organisation ou d’accessibilité. Un espace de présentation de l’effectif et un espace de rédaction de mail sont présents sur la page.
Il faut garder à l’esprit que le site est la vitrine du festival.

Feature 1: Hier et demain page (yesturday & tommorow)

"Hier et demain" est le nom d'une nouvelle de Jules Verne (comme les deux autres fonctionnalités créées d'ailleurs). C’est un espace où les auteurs de BD, de livres, les réalisateurs de courts et longs métrages peuvent publier leur travail. L'idée est ici de s'appuyer sur l'image de "référence" de la science fiction (en opposition au Comics con plus fun) et renforcer cette image de référence en le propulsant tremplin de futurs talents. Les créateurs de science fiction amateurs peuvent publier leur contenu à un public ayant clairement un intérêt pour ces thématiques ce qui permet aux « artistes » de recevoir des "jugements" de plus grande valeur que des plateformes non spécialisées comme youtube, Vimeo ... L’utilisateur a accès à une bibliothèque de contenu produit par les amateurs de SF. Il peut naviguer dans différentes rubriques grâce à un système de filtres. Il a accès aux oeuvres audiovisuelles en streaming sur le site web. L'utilisateur a toute les informations sur les crédits de production de l'oeuvre, le synopsis, la distribution, la présentation de l’oeuvre et les différents commentaires du créateur.
L’utilisateur peut poster un commentaire, l’idée étant qu’il parle du questionnement de l’oeuvre où qu’il donne son avis, des conseils sur le style, des commentaires sur la narration ou des astuces de réalisation.

Feature 2: Salon 57

Après "Hier et demain" qui avait pour objectif implicite de créer du contenu vivant toute l'année de manière autonome pour les managers du site web des Utopiales. Le salon 57 vient y donner du rythme ! Basée sur l'interaction, cette section permet à l'utilisateur de contribuer et d'interagir avec les différents articles déposés ou projets de thématiques à aborder pour les festivals suivants. En somme, le but est de créer un espace "débat" ordonné qui puisse être intelligible et qui puisse inviter les utilisateurs le souhaitant à prendre pleinement part à la création de contenu en rapport à l’événement. Cette section a aussi été pensée pour les utilisateurs du site qui seraient des novices de SF. La SF est un style qui requiert beaucoup de tolérance et d'énergie à son public, par la simple admission du surnaturel mais aussi par les lectures souvent à plusieurs niveaux qu'elle propose. Cela rend la science fiction enclavée parfois inaccessible ou rebutante pour le public lambda. Cette manière d'aborder l'oeuvre à priori insensée par des questionnements permet peut être d'offrir un prisme plus simple aux novices qu'une oeuvre entière (l'objectif de l'accessibilité est d'ailleurs aussi présent pour la fonctionnalité hier et demain).

Feature 3 : La ville flottante (traduction)

Cette dernière fonctionnalité est très largement inspirée du site iremembre.fr créé contre la maladie d’halzeimer, les utilisateurs y déposent des images accompagnées d'une légende et d'une date. Nous pouvons ensuite naviguer dans une map en 3D composée de souvenirs random. Les souvenirs se dégradent avec le temps jusqu'à disparaître définitivement au bout d’un certain temps. Le site marchera tant que les utilisateurs l’enrichiront de contenus.
D'abord visuellement ce site est marquant car il est particulièrement immersif, l'UX est exemplaire et l'idée est vraiment pertinente. Je me suis réapproprié le concept et le visuel pour créer une dernière fonctionnalité innovante au site : La ville flotante. Ici, les utilisateurs peuvent y déposer des citations souvenirs du festivals, de films cultes, des réflexions, des questionnements, … et se balader dans une galaxie de données random. Ces souvenirs sont cependant trouvables grâce à un système de tags et de recherche intégrés.

Ui : Style graphique

Le style graphique est volontairement épuré sur fond blanc. Plusieurs raisons motivent ce choix : d'abord l'événement est un événement très sérieux dans le contenu et dans sa forme « conférencière », d'où une plateforme très « rangée » et sobre, avec seulement quelques traits et très peu de dégradés. Ensuite l'utilisation de ce genre de mise en page noire sur fond blanc, avec seulement quelques images et des zones de couleurs permet une très bonne lecture ce qui répond bien aux problématiques imposées par les fonctionnalités ajoutées, qui crééent du contenu textuel en grande quantité. Le choix de rendre cette lecture agréable et simple a joué sur cette composition graphique.
Enfin, c'est aussi une manière de donner une identité différente (voire aux antipodes) de ce qui se fait aujourd'hui dans les sites SF qui utilisent souvent l'efficacité du dégradé sombre et les textes blancs.