Adobe Experience design chez Overblog

Chez Overblog le design d'interface et l'expérience utilisateur font parti des éléments essentiels de la conception de la plateforme.

À l'instar de l'équipe technique, qui a terminé en octobre 2016 la refonte de l'administration d'Overblog avec des technologies tels que : React, Relay et GraphQL, l'équipe produit elle aussi travaille avec des outils de pointe.

Cela fait désormais plus d'un an que l'équipe produit d'Overblog utilise un nouvel outil de design d'interface, j'ai nommé : Adobe Experience Design.

Cet outil est venu compléter dans un premier temps les logiciels que nous utilisions à savoir Sketch, Photoshop & Illustrator, pour au final finir par les remplacer totalement.

Prototype d'une page du reader Overblog, conçue avec XD

XD, un outil tout en un : Design + Prototypage

Comme je l'indiquais dans mon article sur la sortie d'Adobe XD, la possibilité de relier les différents écrans d'une interface entre eux, et d'en faire un prototype, permet très rapidement de mettre en évidence certaines faiblesses ou certaines informations mal agencées et donc mal comprise par les utilisateurs d'Overblog.

Bilan après un an d'utilisation d'adobe XD

Après plus d'un an d'utilisation depuis la première version (projet Comet) Nous pouvons affirmer que cette application nous a grandement facilité notre travail.

Voici les principaux avantages que nous retirons de l'utilisation d'XD :

1. Sur la partie design : la conception d'écrans avec des formes vectorielles est pratique, réactive et s'avère très adaptée à une application web, tel qu'Overblog. Des outils tels que la grille de répétition ou les symboles imbriqués sont un vrai plaisir à utiliser au quotidien.
2. Sur la partie prototype : Les interactions entre les écrans sont facile à mettre en place, et le partage avec les équipes technique ou des utilisateurs s'avère très pratique. Elles permettent vraiment de se projeter dans ce que sera le rendu final de l'interface avant qu'elle ne soit développé. Concrètement les prototypes sont hébergés sur le cloud d'Adobe et se partagent en un clic.
3. La pré-visualisation en direct sur les terminaux mobile est très pratique et surtout très stable.
4. La réduction du temps de conception grâce à la combinaison de l'outil de design et de prototypage.

Prototype de la personnalisation du thème, conçu avec XD

Ce qu'il manque encore à Adobe XD..

• Autoriser le fait de pouvoir fixer une zone non scrollable dans un document, par exemple un menu au bas d'une interface mobile qui reste collée au bas de l'écran
• Des styles de polices ré-utilisable facilement, afin d'éviter de devoir changer sur chaque écrans de l'interface en cas de changement.
• Des animations plus poussées, pour le moment seul des animations basiques sont disponibles
• Des Symboles imbriqués cliquable, ce qui n'est pas le cas à ce jour.

Le bon outil pour concevoir une meilleur expérience sur Mobile

Au delà de l'amélioration continue des pages de l'interface d'administration ou des pages du portail Overblog, nous avons en ligne de mire la possibilité de vous offrir la possibilité d'accéder à la gestion de vos blogs directement depuis un terminal mobile (Iphone, Ipad, tablettes & smartphones Android). Vous êtes de plus en plus nombreux à vouloir gérer vos blogs depuis votre mobile, sans forcement passer par notre application dédiée. 

Dans cette optique notre travail avec Experience Design, nous permet de créer de manière efficace l'interface avec laquelle vous interagissez chaque jour.

En conclusion 

Je suis très satisfait des possibilités que nous offre Adobe Experience design chez Overblog, il est clair que grâce cette application nous avons gagné en rapidité de création et en cohérence concernant la conception de l'interface d'Overblog.

Testez Adobe XD ici.

Comments

[Bernieshoot]

Un retour d'expérience très intéressant, quel pourcentage de cette application utilisez-vous en moyenne ?