Nous avons récemment participé à un workshop du nom de Reboot factory qui a pour objectif de mettre en avant le design mobile et la manière d’aborder la réalisation d’interfaces sur de tels devices.

Au cours de ces 2 semaines nous avons été amenés à devoir penser un projet qui soit utile et pertinent et qui corresponde à cette approche. Notre choix s’est porté sur une webapp traitant des bières belges, qui porte le nom de : .BEbeer.

BEbeer pour la contraction de Belgique/Belgium + Beer (bière) — aucun rapport avec ce qui semblerait être un chanteur…

Nous avons été amenés à itérer encore et toujours des idées, des fonctionnalités, du contenu ainsi que la conception de nos interfaces.

Le choix d’une webapp
sur les bières belges.

Nous sommes partis d’un constat assez simple : la Belgique est un pays qui compte la bière comme un fleuron de sa culture et de son tourisme.
Pas moins de 2.000 bières sont disponibles et seules les bières produites par les grands producteurs sont connues du grand public et facilement accessibles.

Mais que faire lorsque l’on veut sortir des sentiers battus et savourer quelque chose de différent ? Où trouver l’information si ce n’est chez le producteur lui-même ?

Ainsi commence notre piste de réflexion.

Définir notre public cible.

“Nous voulions le public cible le plus large possible.”

Concevoir une application, c’est “facile” en revanche concevoir une bonne application qui répond à une problématique pour un utilisateur, c’est autre chose.

Nous avons donc défini notre public cible d’entrée de jeu, un élément important puisqu’il détermine en grande partie notre contenu.

Dans le cas précis de .BEbeer, nous avons fait le choix d’un public cible assez vaste ; allant du novice au connaisseur.
Nous avons également veillé à ce que l’application puisse avoir un futur qui puisse dépasser le cadre du workshop, ce qui nous a amenés à intégrer un public cible touristique qui serait en quête de bières locales après une visite dans la région.

Définir un objectif et des fonctionnalités.

“Les tests utilisateurs et la technique de card sorting nous ont permis
de définir correctement nos fonctionnalités”

Dans le cas qui nous occupe, nous souhaitons faire de .BEbeer une application utile qui puisse fournir des informations rapidement et efficacement sur une bière recherchée.

Partant de là, nous avons commencé à réfléchir aux fonctionnalités qui permettent d’arriver à un tel objectif.
Pour se faire nous avons commencé par faire un card sorting (tri à cartes) de manière individuelle, pour ensuite mettre en commun sous forme de brainstorming.

L’organisation du workshop nous permettait ensuite de réaliser d’autres card sorting mais avec des membres extérieurs au groupe de départ. Nous avons donc été chercher des membre d’autres groupe participant également au workshop et ayant chacun un profil différent ainsi qu’une connaissance différente sur les bières.

Les résultats nous ont permis de nous conforter dans nos choix initiaux et même d’en ajouter certains.
Ainsi nous terminons cette première phase de recherche par les fonctionnalités suivantes :

• Un principe de compte (inscription, connexion, déconnexion)
• La possibilité de consulter une fiche liée à la bière recherchée
• Exécuter une recherche à propos d’une bière
• Consulter un lexique sur le monde brassicole.

Les fonctionnalités définies, il est maintenant temps de réfléchir aux prototyping et aux contenus de chaque fonctionnalité.

Réaliser des prototypings.

Très vite, nous nous exécutons et réfléchissons à l’architecture globale de notre webapp. Nous élaborons les liens entre les différents contenus et la hiérarchie des interfaces.
Nous définissons des priorités et commençons les premiers tests utilisateurs.

Définir le contenu des fiches sur .BEbeer.

Bien que la fonction principale de notre webapp repose sur la recherche d’une bière, il n’en demeure pas moins que les fiches, doivent être à la hauteur de ce que l’utilisateur s’attend à trouver.

Nous avons donc commencé par aller voir sur d’autres sites web et sur d’autres applications le type d’informations qui était mis en avant.

Nous avons relevé :

La présence d’un visuel, la présence d’informations clefs ainsi qu’une description globale de la bière.

En poussant notre recherche plus loin et cette fois-ci, en allant voir sur les sites de producteurs,

Nous avons remarqué les informations suivantes :

Toujours la présence d’un visuel, un résumé de la bière avec diverses informations, une description de la bière et de son histoire, des conseils sur les plats qui peuvent l’accompagner, des conseils sur le verre et sur la manière de servir la bière.

Nous avons donc recoupé les différentes sources pour définir le contenu type de nos fiches. Et nous nous sommes arrêtés sur le résultat suivant :

Un visuel de la bière, le nom de la bière, un résumé par mot-clef des informations suivantes : degré d’alcool — son goût — et enfin sa couleur.
Une description de la bière en général, des conseils sur les plats qu’elle peut accompagner, la forme du verre et un conseil sur comment la servir.

Nous avons décidé de proposer en bas de la fiche, deux bières qui seraient semblables à la bière consultée pour proposer à l’utilisateur de poursuivre sa lecture.

Définir la fiche type de BEbeer nous aura permis d’en apprendre beaucoup sur la classification des bières.

Enfin nous avons également pris la décision de proposer 3 call to action à l’utilisateur qui sont en lien direct avec la fiche :

• ajouter la fiche à une liste de bières aimées.
• ajouter la fiche à une liste de bières bues.
• partager la fiche de la bière sur les réseaux sociaux.

Définir la recherche sur notre webapp.

.BEbeer comporte 3 moyens de recherche :

la recherche classique avec un simple champ de recherche, une recherche à l’aide de filtres, et enfin une recherche par comparaison de photos.

Nous nous sommes donc penchés sur la recherche par filtres.
Pour ce faire, nous avons entrepris des recherches sur les bières informations pertinente et qui seraient susceptibles de convenir à un filtre.

Notre recherche nous aura également menés à pousser la porte d’un commerce local de bières du nom de “Au plaisir du 604” pour obtenir des informations et avoir des conseils sur les bières.

Cette visite très intéressante nous aura encore permis de dégager de nouvelles pistes et également de nous mettre d’accord de manière définitive sur nos critères de recherche.

Notre recherche filtrée se compose des 3 filtres suivants :

1. Les degrés d’alcool eux-mêmes catégorisés en 3 catégories (faible, moyen et fort) que nous avons pu déterminer grâce aux précieux conseils du “Au plaisir du 604”.
2. Les couleurs des bières, nous avons décidé de reprendre les plus emblématiques, car là encore, chaque producteur aime valoriser sa bière en lui donnant une couleur qui ne se retrouve pas ailleurs.
3. Les provinces belges, nous avons décidé de choisir ce type de filtre pour répondre à un besoin utilisateur qui serait celui d’un touriste. Nous trouvions plus pertinent de trouver une bière selon
   une zone géographique plutôt que de la trouver grâce à un filtre basé sur les goûts par exemple.

“Nous avons eu la chance de rencontrer un magasin local qui a bien voulu prendre de son temps pour nous éclairer dans nos recherches et nous conseiller.”

Afficher le résultat de la recherche.

Une action entraînant une réaction, il nous fallait répondre à cette question :

Comment nous allions afficher le résultat de notre recherche ?

Nous avons exploré différentes pistes :

• la simple liste.
• un ensemble de visuels associé au nom de la bière.
• la simple liste avec un visuel.

Après de multiples itérations, nous avons fini par choisir la simple liste, sur laquelle on ne verrait que le nom de la bière, son degré d’alcool, sa couleur et enfin la présence ou non d’un indicateur visuel précisant si la bière figure déjà dans une des listes.

Note : Certaines bières disposent d’un nom plutôt long, de ce fait nous avons décidé d’opter pour une abréaviation des mots comme Abbaye en “Abe” et de n’autoriser qu’un certain nombre de caractères pour laisser respirer les autres informations présentes.