PAPEROWL™, ou comment rendre sa bibliothèque un peu plus chouette!

Alperen Aslan
Apr 26, 2018 · 9 min read

INTRODUCTION AU SUJET

Dans le cadre du workshop REBOOT FACTORY de la Haute-École Albert Jacquard, qui semble revenir chaque année pour titiller un peu plus les capacités des étudiants, l’objectif principal est de designer et rendre fonctionnelle une application répondant à une problématique. Le but ici est donc de pousser les étudiants à sortir de leur zone de confort et, par équipe de 4 (ou cinq), proposer une solution qui tiendrait dans le creux de notre proche. Nous avons travaillé sur un projet nommé PaperOwl™, une bibliothèque numérique aux fonctionnalités diverses et variées.


PROBLÉMATIQUE & SOLUTION

Durant des siècles et des siècles, l’être humain s’est vu obligé de ranger ses livres entre plusieurs planches en bois et de retenir, dans sa petite tête, un nombre incalculable d’ouvrages. Cela l’a mené à plusieurs situations embarrassantes comme acheter deux fois le même écrit, prendre un tome alors qu’il n’avait pas lu le précédent ou encore se tromper d’édition et ainsi posséder une collection uniforme.

Mais ça, c’était avant l’arrivée de la “smart era” : smartphones, smart TV, smartwatch et même smart toilet, la technologie tend aujourd’hui à être aussi — si pas plus — intelligente que son homologue humain, ce qui a mené à de nombreuses applications visant à aider et faciliter la vie de l’Homme.

C’est ainsi qu’est né PaperOwl™, la première bibliothèque numérique entièrement gratuite (à la différence de sa concurrence). Nous sommes partis sur cette idée car étant créateurs, nous sommes aussi consommateurs. Notre décision s’est donc portée sur une application qui serait utilisable par tous types d’utilisateurs aimant la lecture et possédant un smartphone, la tranche d’âge allant donc d’environ 12 à 60 ans et plus. Notre second objectif était de réaliser une application avec un suivi plus ou moins régulier et non pas à usage “unique”, le tout aux fonctionnalités variées.


Architecture d’Information

L’architecture d’information, ou AI, est une science qui permet d’organiser et structurer les sites web, les applications mobiles et réseaux sociaux. La première tâche qui nous a été demandée de réaliser est l’AI de ce qui sera notre future application.

Ces différents écrans nous auront permis de donner une succession logique aux différentes pages qui composeront l’application mais aussi, en parallèle, de mettre en avant les fonctionnalités les plus importantes que proposera PaperOwl™. L’architecture se divise en 2 parties :

  1. La première propose un aperçu de l’une de nos fonctionnalités en sélectionnant , encourageant ainsi l’utilisateur à découvrir un peu plus ce qu’est PaperOwl™. Il choisit ses catégories de livres préférés et, parmi une sélection de livres, décide lesquels sont ces préférés. À partir du moment où il confirme ses choix, il passe vers la deuxième partie de l’architecture.
  2. L’application propose alors de s’inscrire (ou se connecter) à l’aide de son adresse mail, son Facebook, son Twitter ou encore son compte Google pour permettre l’ajout des différents livres dans sa bibliothèque. Toutes les fonctionnalités se débloquent dès la création du compte.

FONCTIONNALITÉS

Avec PaperOwl™, notre but est de proposer des fonctionnalités simples d’utilisation pour nos utilisateurs. Nous nous sommes concentrés sur cinq d’entre elles, que nous avons classées par ordre d’importance.

  1. Ajouter un livre à sa bibliothèque : Le but principal de l’application est de pouvoir lister tous les livres que l’on possède dans la vie réelle de manière numérique. Nous proposons donc plusieurs manières d’encoder les livres dans sa bibliothèque : soit en scannant le code barre à l’aide de l’appareil photo du téléphone, soit en écrivant le numéro ISBN ou bien tout simplement en encodant le nom de l’ouvrage. Grâce au site de l’ISBNDB, nous avons recueilli une base de données de 18.000.000 de livres qu’il a été possible de lier à l’application grâce à l’API.
  2. Les recommandations : En fonction des livres ajoutés dans la bibliothèque, l’application propose des titres similaires qui pourraient plaire à l’utilisateur. Cela lui permet de découvrir ou redécouvrir des écrits qui pourraient lui plaire et le pousser à lire encore plus.
  3. Recherche de livres : L’application permet la recherche de livres en fonction du nom de l’ouvrage, du nom de l’auteur, en photographiant le code barre ou encore du numéro ISBN.
  4. Suivre des personnes : La fonctionnalité “nouvelle” vis à vis de la concurrence est la création d’un compte personnel et l’occasion de suivre d’autres lecteurs qui partagent les mêmes centres d’intérêts. Ainsi, vous pouvez partager votre bibliothèque et vos lectures avec d’autres utilisateurs et suivre des gens que vous connaissez. Imaginez un peu suivre un.e ami.e à vous et, ne sachant pas quel livre il/elle possède, fouiller sur son profil pour lui acheter le tome manquant de sa collection préférée!
  5. Laisser un avis : Évidemment, il est toujours bon de donner la parole aux utilisateurs. En créant son compte, ce dernier a la possibilité de donner une note aux livres qu’il a/qu’il n’a pas aimé, pouvant même laisser un commentaire pour les prochains lecteurs.

Une fois les fonctionnalités et l’architecture prêtes, il a fallu s’attaquer à deux points en simultané : les inspirations graphiques et les wireframes.


INSPIRATIONS

Nous avons travaillé sur les inspirations graphiques et les wireframes en simultané. Nous avons collaboré en équipe en nous basant sur plusieurs sites pour nos recherches graphique, comme :


PROPOSITION GRAPHIQUE (WIREFRAMES)

Nous avons directement réalisés nos propositions graphiques sur Sketch car, suite à un souci de fichier, celui reprenant les wireframes a été corrompu et était donc inutilisable. Ces visuels nous permettent de nous représenter l’identité finale de l’application et illustrent la “presque-finalité” du projet. Nous avons fait attention aux besoins de l’utilisateur et, à plusieurs reprises, avons dû modifier les wireframes. Ce point est détaillé en profondeur dans l’onglet “prototyzing”.


PROTOTYPING

Après avoir réalisé nos wireframes (et, dans notre cas, nos compositions graphiques), nous avons fait tester, via InVision, les différents écrans qui cheminent notre application. Le prototyping est un échantillon du résultat final et permet, par la même occasion, de déceler les problèmes que peuvent rencontrer les différents types d’utilisateurs. Cela nous a permis de rectifier quelques points importants pour faciliter l’expérience utilisateur.


INTERFACE VISUELLE & DESIGN

Comme expliqué ci-dessus, nous avons collaboré en équipe pour créer le design de l’application. Point par point, nous avons choisi les éléments nécessaires à créer l’identité graphique de notre application.

Notre logo représente une chouette, cette dernière étant en thème avec le nom de l’application. De plus, la chouette était l’animal fétiche de la déesse Athéna, déesse du savoir et de la sagesse. Tournée à ¾, la disposition de ses ailes rappelle le marque-page classique que l’on utilise pour se souvenir de l’endroit où nous avons arrêté notre lecture.

La couleur dominante dans notre application est l’orange. D’un commun accord, nous avons choisi cette couleur car elle symbolise, selon plusieurs sources, la créativité, la joie, l’enthousiasme et l’amusement. C’est un mélange du “rouge énergique” et du “jaune joyeux”. Notre palette colorimétrique se compose de 3 couleurs :

Les illustrations ont toutes été réalisées par nos soins. Utilisées dans la partie « découverte de l’évaluation », elles servent à illustrer les différents genres de livres proposés dans notre application ainsi que leurs sous-catégories.

Nous avons opté pour un effet pétillant et coloré, la représentation étant entourée d’un contour blanc sur un fond orange. Pour une identité plus prononcée, nous avons appliqué un paramètre « fusion » sur une image de points, ce qui donne cet effet pop art sur les illustrations.

En ce qui concerne la typographie, deux polices d’écritures ont été utilisées pour le logo : Champagne & Limousines et Rochester. Le contraste entre les deux permettait de consolider la prononciation du logo. Il y a le « paper », il y a l’ « owl », et ensemble, il y a PaperOwl™ !

Pour ce qui est des illustrations de l’application, nous avons choisi la font Anton, qui est plus épaisse, plus grasse et qui ressort parfaitement sur le côté léger que possèdent les différentes représentations. Dans l’application, elle a été aussi utilisée dans certains titres.

Pour terminer, c’est la police d’écriture Quicksand qui a l’honneur de figurer dans l’entièreté de l’application. Déclinable sous plusieurs graisses et espacée de 1.333em (ce qui correspond à un Perfect Fourth), c’est une police d’écriture qui est décrite comme « facile de lecture », ce que nous cherchions pour notre application. Lorsque votre application comporte un bon nombre de textes, il est préférable de prendre une font simple de lecture et pas trop serrée entre les caractères.


SITE WEB & APPLICATION

Les wireframes et processus de créations réalisés, l’identité graphique prête, il ne restait plus qu’à se mettre au travail ! Nous avons donc réparti le travail et tout le monde s’est appliqué pour rester un maximum les tâches réalisées la semaine précédant la création du site web et de l’application.

Un aperçu du haut de notre page d’accueil ainsi que son code.

Notre site web respecte la charte graphique établie pour l’application et explique en quelques lignes le but et les fonctionnalités de notre application, le tout illustrant quelques passages importants de l’application. Un bouton est placé en tête et au bas du site pour pousser les gens à la tester. Quant à l’application, elle respecte au maximum ce que nous avons créé durant ce workshop.


EN CONCLUSION…

… Ce workshop n’aura pas été de tout repos! Étant habitué à coder uniquement un site web avec son code HTML, son CSS et quelques notions de JavaScript & JSON, cela aura été un véritable challenge de devoir créer une application entière et la rendre utilisable. Néanmoins, grâce à l’aide de nos professeurs et de notre grand ami Internet, cette épreuve aura pu être réalisable et nous ne regrettons pas d’avoir sué sang et eau, car le résultat final est au-delà de nos attentes.


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade