Après plusieurs mois de dure labeur dans mon groupe de 6 personnes (le même que pour le projet en A.Sc.2, Loop, avec une petite variante dans l’équipe), le projet académique de la B.Sc. est terminé ; et sa soutenance avec ! L’idée du projet assigné était simple : réaliser un réseau social inspiré de Facebook et Twitter. C’est ce qui était demandé dans le cahier des charges… Bref, comme l’année dernière, j’ai été assigné à ma tâche de prédilection : le design et l’expérience utilisateur (et de l’infrastructure également, un peu par défaut à cause de mon expérience en stage les années précédentes).
Quelques mots sur l’infrastructure
Côté infrastructure, je ne vais pas m’attarder dessus, j’en ferai un article séparément si vous le souhaitez ; mais il s’agit ici de deux datacenters hautement disponibles, avec deux hyperviseurs dans chaque. Pour cela nous nous sommes reposés sur la suite vSphere de VMware. Dans un même datacenter, les deux hyperviseurs balancent trois instances Windows Server 2012 R2 qui hébergent l’application web sous la forme d’une architecture trois-tiers (front-end, back-end et la base de données) grâce à la fonctionnalité de haute disponibilité et entre deux datacenters par un déploiement de vSphere Replication. Pour administrer ces quatre hyperviseurs VMware ESXi, nous avons une installation de vCenter Server déployée sur une machine dédiée tournant sous Windows Server. La haute disponibilité du stockage se fait avec deux paires de SAN iSCSI, ces machines tournant sous la distribution Debian avec DRBD et Keepalived pour assurer la haute disponibilité en toute légèreté, chaque paire étant dédiée à un datacenter.
Cette partie technique était très interessante, beaucoup de recherches et de tests ! La difficulté ? L’impossibilité de faire rentrer les deux datacenters dans un seul ordinateur ; mon Mac était en pleine souffrance avec un seul datacenter…
À la fin, on avait décidé de réaliser deux infrastructures, la première étant l’usine à gaz imposée par le sujet (décrit ci-dessus) et la seconde étant déployée sur Microsoft Azure !
Si jamais vous souhaitez avoir un article dédié à l’infrastructure de ce projet, n’hésitez pas à m’en faire part. En attendant, je pense que mon Apple Care va bien me servir…
Une philosophie, un nom
Revenons au sujet initial, la partie visible du projet. À l’image du projet de l’an passé, il a fallu trouver un nom facile à retenir, efficace et ayant un sens avec la philosophie du projet. Une seule syllabe et tout un vocabulaire qui va avec. Aucun impact sur la partie technique, mais important pour la partie marketing et la soutenance.
Parlons philosophie justement… Il a fallu près de deux mois pour trouver un nom ayant un sens ! (on a fait des progrès ! L’année dernière c’était trois mois…)
D’ailleurs le cahier des charges nous donnait déjà un nom, Gabbler, mais c’était trop moche, je n’ai jamais pu faire un joli logo… Donc stratégie pour survivre à la soutenance lorsqu’on zappe le nom initial du produit : dire que c’est un nom de code interne. Ainsi, ce projet est désormais officiellement appelé Project Gabbler.
Ce projet est un réseau social, gravitant autour des messages likeable de 255 caractères et la possibilité de se suivre entre utilisateurs (en somme un joli remix de Twitter). Après un long brainstorming, nous sommes arrivés à ce vocabulaire :
- Message d’une longueur de 255 caractères : Story, ou une Histoire, en français. Nous sommes partis sur l’idée de la publication de courtes histoires !
- Fil d’actualité (timeline) : Storyboard, la table des histoires publiées. Un peu comme une bande dessinée, c’est un alignement de vignettes, plutôt de cards dans le monde du web.
- Utilisateur : Storyteller, ou Conteur en français. Comme son titre l’implique, c’est une personne qui va raconter son histoire.
- Profil personnel : My Story, ou Mon Histoire en français. C’est la page personnelle, à l’image du conteur et son histoire.
C’est en partant de ce champ lexical (on va l’appeler ainsi, tant pis pour les cours de français) que nous en avons déduit le nom.
Sur quel support retrouvons-nous des histoires ? — Un livre ! Bien évidemment. Et pour faire un peu swaggy-swag, il faut utiliser la langue de Shakespeare. C’est ainsi que Project Gabbler devint Book.
Le design
C’est bien connu, le client est roi ! Dans le cas d’une application, l’utilisateur ne restera si, et seulement si l’interface est jolie, mais également au-délà : l’expérience utilisateur doit-être exceptionnelle ! Cela se résume donc à la simplicité d’utilisation, une clarté de l’affichage sans pour autant compromettre le cahier des charges. D’ailleurs, une phrase de Steve Jobs le résume parfaitement.
« Design is not just what it looks like and feels like. Design is how it works. » — Steve Jobs
Avant de parler du look & feel, parlons du logo. Le branding est l’une des parties les plus importantes du projet. Dans tous les livres imprimés, ce sont des polices dites sérif qui sont utilisés. Nous reprenons donc cette convention pour le nom « Book » et pour le « b » de l’icône.
Concernant l’icône, deux tons de rouges ont été utilisés. Même si les livres anciens ont une couverture en cuir, donc généralement marron et une seconde couleur pour la reliure. Nous avons choisi le rouge « velours » car cette couleur inspire un petit côté cosy, mais également parce que c’est une couleur qui est généralement utilisée pour les marque-pages. Mais alors, pourquoi deux couleurs, pourquoi l’une est plus fine que l’autre ? Si vous regardez bien les vieux livres, certains ont une reliure formée par un second morceau. Nous avons ensuite apposé un petit « b » en blanc en bas à droite, dans le même style que la pagination.
Dans l’optique de donner du caractère à l’aspect général de l’application web, un cap a été fixé sous la forme d’une phrase : Slick is Bold. Concrètement, cela mène à la différenciation des titres et du contenu en utilisant deux polices différentes (uniquement du sans-serif) et deux épaisseurs différentes.
Pour les titres et les éléments s’apparentant à des boutons, la police Montserrat Bold a été utilisée, uniquement avec des lettres capitalisées et un espacement entre les lettres équivalent à 2px. Pour le contenu, la police Lato Light a été utilisée.
Le choix du code couleur est crucial car elle s’associe à la charte graphique de la marque. Pour la palette de couleurs, le ton reste pastel, moins agressif visuellement mais dynamique, cependant les couleurs sont mieux répartis par rapport au projet de l’année dernière, en A.Sc.2, Loop. On notera juste que le gris est directement inspiré des nouvelles livrées Carmillon des trains de la SNCF 😉
Ces différentes couleurs sont répartis sur le site pour le logo, les textes, les liens, le fond, etc… Toutes les couleurs utilisées ne sont pas dans la palette, surtout pour le gris car des variantes ont été utilisées pour créer des effets visuels.
Le site est bien évidemment responsive grâce à Bootstrap et les différents éléments graphiques du site reposent sur des SVG. Vive le Retina !
« Design is how it works »
Nous parlions d’expérience utilisateur, primordial pour qu’un produit soit viable et utilisable. Tout doit-être logique et ergonomique. Un utilisateur lambda a déjà ses habitudes d’utilisation sur d’autres réseaux sociaux comme Twitter et Facebook. Il ne faut absolument pas bouleverser les habitudes, mais il faut également proposer quelque chose de frais !
Un avis se forgeant définitivement lors de la première visite, dès les premières secondes, une attention particulière a été apporté à la première page du site, la page de connexion et d’inscription. Cette première page affiche tout simplement un petit bonjour, une vidéo en fond (nous sommes fiers de venir de la région parisienne !) et un bouton permettant de s’identifier ou de s’inscrire.
Pour ne pas saccager le design, nous utilisons un seul bouton pour l’identification et l’inscription permet d’afficher une pop-up qui s’affiche par dessus la page principale ; le Storyteller s’identifie ou s’inscrit en basculant entre les deux onglets.
Une fois le Storyteller connecté, le point convergeant du site est la barre de menu. Il existe deux apparences de la barre de menu, la principale, utilisée à travers le site, est blanche et opaque ; la seconde est réservée aux pages des Storytellers, grise et transparente, permet de mieux s’intégrer avec n’importe quelle photo de couverture.
Le menu est extrêmement simpliste avec un accès au Storyboard, aux Top Stories, à son profil Storyteller, des boutons de rédaction d’une Story, de recherche de Stories et de Storyreller, ainsi que l’accès aux réglages du compte.
Troisième chose que l’utilisateur voit de façon régulière sur le site : la Storyboard (et les autres éléments liés comme les Top Stories ou les recherches de Stories). L’affichage des Stories dans la Storyboard se fait à l’aide de cards. Chacune de ces cartes sont dédiées à une seule Story ; on y retrouve la Story, une photo s’il y en a une, un bouton pour aimer la publication, ainsi que les méta-données liées à la Story publiée qui s’affiche dans même style que les citations à l’anglaise : « — Nom, Date ».
Sur la page d’un Storyteller, la photo de couverture est au ratio 16/6. Y figure également la photo de profil dans un cadre rond, le nom d’affichage et le nom d’utilisateur, la biographie, un bouton permettant de suivre et d’arrêter de suivre, ainsi que quelques statistiques.
Dernier élément clé dans l’application web, le panneau de configuration qui s’ouvre sous forme de pop-up. Ce dernier permet de changer tout ce qui est lié au compte : le nom d’affichage, les photos de couverture et de profil, la biographie, le mot de passe et l’adresse email lié au compte, et surtout se déconnecter.
On me pose souvent la question : pourquoi avoir mis le bouton de déconnexion dans panneau de configuration ? Ce bouton était difficilement intégrable dans la charte graphique. De plus, sur Windows, Mac OS X, Facebook et Twitter, la même action nécessite le petit clic supplémentaire. Il y a donc pas plus de clics à faire sur Book 😉
Par mesure de sécurité, toutes modifications du compte nécessite la saisie du mot de passe actuel ! Eh oui, la sécurité avant tout !
Encore plus !
Malheureusement le front-end du projet Book se résume à ces grands points. Il y a bien sûr d’autres détails qui n’ont pas été traités, mais ce sont des détails…
Une dernière chose ! Comme pour le projet de l’an passé, nous avons réalisé une vidéo promotionnelle pour promouvoir le produit !
L’idée de la vidéo promotionnelle est simple : une timelapse le long d’une journée. L’idée c’est de montrer à quel point le réseau social Book fait partie intégrante de la vie, en déplacement, en pause au travail, au salon de café, avec la possibilité de partager et d’aimer des histoires.
Et on peut l’essayer ?
Dans les quelques mots sur l’infrastructure du projet, j’avais évoqué un déploiement sur Microsoft Azure. Ce déploiement d’instances en trois-tiers fonctionne parfaitement !
Le projet n’est évidemment par parfait, il y a des bogues par-ci et par-là, par exemple, les images doivent-être au format JPG, le mail d’activation du compte risque de finir dans les spams, etc… C’est également très lent, je n’ai pas provisionné de grosses instances ; mais c’est également la faute d’ElasticSearch (base de données) qui est extrêmement lent à l’écriture.
Ne cliquez pas deux fois si jamais l’application web ne répond pas, il prend tout son temps, soyez patients !
Pour essayer Book, rendez-vous sur book.kyvan.co ! N’oubliez pas de partager votre identifiant dans les commentaires 🙂
Merci à mon équipe !
Depuis deux ans, je suis toujours très heureux de travailler dans cette équipe motivée et dynamique ! L’union fait la force ! Dans quelques mois, une nouvelle aventure commence avec la nouvelle année académique !
L’équipe de gauche à droite : Ky Van (moi-même), Sophie, Étienne, Anja, Benjamin (la nouvelle recrue) et Réda
Si jamais vous avez des retours à faire sur ce projet, n’hésitez pas ! Tout avis est bon à prendre, on en apprend toujours plus dans le but de faire un meilleur projet l’année prochaine ! 😀