Etude de cas (design process)

Sébastien Seghers
Mar 28, 2017 · 9 min read

⇨ Comme chaque année, le fameux workshop REBOOT fait son apparition ! L’objectif principal ? Mettre au point une application native (qui ne fonctionne pas vraiment) sur base d’une problématique. Le but de cet atelier est donc de se former, de travailler en groupe et bien évidemment mettre au point une idée géniale, si possible.

Nous allons vous expliquer ci-dessous toutes les étapes qui nous ont conduit vers la réalisation de ce projet.


Phase de recherche

Penser à tous types d’utilisateurs

⇨ Une fois l’atelier commencé, nous nous sommes mis par groupe de 4 étudiants afin de traiter sur une problématique de notre quotidien. Le tâche n’était pas facile parce qu’il existe bon nombre de problèmes utilisateurs mais également beaucoup d’idées innovantes déjà en place sur le marché.

Le plus important est de se glisser dans la peau d’un utilisateur du quotidien. Cela permet de comprendre quelles sont ses habitudes et comment il réagit sur une interface dans la vie de tous les jours. Nous avons donc bien réfléchit à toutes les problématiques possibles et qui nous intéressaient.

Finalement, nous nous somme mis d’accord pour travailler sur la problématique des animaux et en particulier des animaux perdus.

Mais pourquoi s’intéresser à cette thématique ?

⇨ Beaucoup de propriétaires perdent leur animaux. C’est malheureusement un cas fréquent qui touche aussi bien les chats, les chiens ainsi que les oiseaux et autres. Actuellement, aucun moyen fiable n’est mis en place pour pallier à ce problème utilisateur. C’est pour cela que nous nous sommes intéressé à ce sujet et que nous avons voulu le développer.


Phase d’inspiration

Chercher, s’inspirer, élaborer

TROUVER DES INSPIRATIONS VISUELLES

⇨ Une fois notre problématique trouvée, nous avons commencé à chercher des inspirations pour notre futur belle application. Les recherches ont débutées entre nous et ensuite nous avons prit appui sur des sites de ressources tierces. En voici une liste non-exhaustive :

Une fois nos idées globales en place, nous avons commencer à imaginer des prototypes papier à main levée.


Phase de dessin

Composer une structure

ELABORER DES WIREFRAMES

⇨ Nous avons ensuite dessiné pleins de visuels papier. Cette méthode porte le nom de wireframes. En effet, grâce aux esquisses crayon, cela permet de mieux comprendre à quoi ressemblera notre futur projet sur mobile. On peut ainsi prévoir les éventuels problèmes liés au développement ou au visuel. Cette étape est donc très importante pour pouvoir avancer vers la finalité du projet.

Voici en photo quelques wireframes que nous avons produit :

Wireframes papier

L’importance du UX dans notre futur design

⇨ Pour bien concevoir un prototype, il faut se mettre à la place de celui qui va l’utiliser. C’est là la base du processus de création. Nous avons donc discuter de longs moments entre nous afin de déterminer les étapes et les fonctionnalités importantes de notre application.

Nous traitons sur les animaux perdus, ce qui signifie qu’on doit comprendre quels sont les éléments plus important que les autres. Il faut se poser sans cesse des questions.

Ex: L’élément est-il correctement placé ?, L’élément est-il pertinent pour l’utilisateur? etc.

Pouvoir avoir un fil d’actualité avec tout les animaux égarés est dans le cas présent une fonctionnalité plus que importante pour l’utilisateur, sinon il ne peut rien faire du tout.

Introduction au modular design

⇨ Que signifie modular design ? Plus souvent nommé “Atomic design”, ce processus désigne des ensembles atomiques. En gros, quand on crée un projet, il faut pouvoir créer des blocs d’informations réutilisables par la suite. De cette manière, on gagne beaucoup de temps sur la réalisation et les résultats sont plus que surprenant.

Prenons en exemple Facebook. On remarque sur le fil d’actualité que les style des publications ne changent jamais, peu importe la page sur laquelle on se trouve. Ceci désigne l’atomic design. On prend des “atomes” individuel pour les assembler entre eux afin de créer une structure cohérente.

Test Prototyping

⇨ Une fois tout les wireframes dessinés, nous avons procédé au prototyping. Il s’agit de la démo IRL des visuels papier. Il s’agit d’un vrai test utilisateur ou celui-ci simule qu’il se trouve sur une vrai application. Chaque wireframe est découpé pour en garder sa fonctionnalité principal de manière à s’assembler avec les autres. Nous avons donc fait tester notre embryo application à divers personnes afin de voir les éléments qui clochent.


Phase visuelle

Concevoir une expérience visuelle

TROUVER UNE IDENTITE GRAPHIQUE

⇨ Une fois la phase de dessins et de tests terminés, nous nous sommes penché sur la partie visuelle du projet. Nous avons les bases mais il faut encore trouver notre patte graphique. Pour ce faire, nous avons également consulté des ressources tierces de manière à trouver nos couleurs, notre typographie ainsi que l’aspect colorimétrique global du projet.

Voici une liste des ressources utilisées :

Notre palette colorimétrique

Nous nous sommes ensuite concerté pour trouver les couleurs de notre projet. Après de longues réflexions, nous nous sommes mis d’accord sur une palette de 4 couleurs. Voici à quoi elles ressemblent :

Palette colorimétrique

Pourquoi ces couleurs en particulier ?

Orange : Nous avons choisi l’orange comme couleur secondaire pour distinguer certains éléments des autres, en particulier les détails. C’est une couleur qui viens soutenir notre couleur principale.

Vert foncé : Le vert foncé est notre couleur de dégradé. Car oui nous avons choisi de faire des dégradés, c’est tendance. Il nous permet de créer un fondu qui se veux indispensable dans la conception de notre logo.

Vert clair : Le vert clair est notre couleur principale ! Nous l’avons choisie pour le côté “Naturelle” de notre projet. Les animaux étant perdu dans la nature, le vert se veut représentatif de notre design.

Blanc : Le blanc est synonyme de clarté, de pureté. On a pas voulu en faire de trop dans l’élaboration de notre design et c’est pour cela que nous avons respecté un visuel simple, sans trop d’éléments, de manière à ne pas créer une surcharge cognitive. Cette couleur était donc particulièrement importante à nos yeux.

Notre choix typographique

Une fois nos couleurs validées, nous nous sommes penchés sur la typo. La typo est très importante car elle représente 90% de notre design. On a donc cherché sur plein de sites pour visualiser notre futur font.

Nous avons finalement choisi l’Open Sans.

Pourquoi ce choix ? : L’open Sans correspond parfaitement à notre design. La typo possède plusieurs graisses pour marquer les importances de certains éléments. Elle présente également plusieurs particularités aussi bien en petite taille qu’en grande taille.

Nous avons choisi de faire toute l’appli et le site dans une seul typographie. En ce qui concerne les rapports de proportions, nous avons choisi 1,414 (perfect fifth). En voici un aperçu sur les grandeurs.

Rapport de proportion : 1,414

On retrouve également la valeur en EM puisque notre développement s’est fait en pourcentage. Ces valeurs de proportions permettent de garder une cohérence entre les titres et les textes. C’est super important pour donner envie de vouloir lire, car nos utilisateurs le sentiront aussi.

Notre grille

Une fois notre typographie trouvée, nous nous sommes penchés sur la grille. La grille est indispensable à la bonne création d’un site ou d’une application. Elle permet de pouvoir placer ses éléments de façon ordonnée et claire. Grâce à cela, le site peut être construit comme un plan.

Pour le site : On a choisi une grille de 1200px, avec 12 colonnes de 63px et 37px de gouttière.

Pour l’app : On a choisi une grille de 375px (pour mobile évidemment), avec 6 colonnes de 52px et 10px de gouttière.

Voici un aperçu de notre grille sur l’application :

Grille sur mobile

Voici un aperçu de notre grille sur le site internet:

Grille sur ordinateur

Phase de conception

Construire pour l’utilisateur

CONCEPTION DE VISUELS

⇨ Une fois toute notre charte graphique mise en place et validée, nous avons commencé à créer des visuels finaux. Cette étape est révélatrice de notre application puisqu’à partir de maintenant on aura une vision clair de ce à quoi tout notre projet va ressembler.

Une fois de plus, il nous a fallut garder l’utilisateur au centre du processus de création pour concevoir des interfaces facile d’accès et utilisable.

Nous avons placé nos couleurs et notre typo et nous avons mis nos wireframes au propre. En voici un aperçu :

APPLICATION

Visuels de l’app PUP’s

SITE INTERNET

Visuel du site internet PUP’s

Création d’un set d’icônes

⇨ Une fois nos visuels mis en place, nous avons dû créer des icônes pour créer une affordance sur certaines fonctionnalités. Une affordance désigne le fait qu’un élément parle de lui même, on ne doit pas le comprendre.

Les icônes sont très importante et permettent de gagner de la place sur certaines zones parfois petite comme sur mobile.

Voici notre set d’icônes :

Set d’icônes
Phase de développement

INTÉGRER ET VISUALISER

CODER NOS VISUELS

⇨ Place à l’intégration désormais ! Tout nos visuels étant crée, nous avons concentré nos forces sur la partie la plus difficile de ce travail, le code. on a intégré la partie mobile parce que notre app ne fonctionne que sur mobile et notre site internet qui représente notre projet.

Code de l’app + site

On a également codé le site en responsive pour qu’il soit consultable sur tous les plateformes.

Le mot de la fin

⇨ Notre workshop s’est merveilleusement bien passé ! Notre équipe était au top et on a prit beaucoup de plaisir à concevoir ce projet. On aura eu en tout deux semaines à quatre pour en réaliser l’ensemble. Chacun d’entre nous était méga impliqué dans son travail. C’est toujours un plaisir d’avoir des coéquipiers tous motivé. Du bon job donc !

We love animals ❤

Team PUP’s


Sébastien Seghers

Written by

UX/UI Design Student at @dwmHEAJ #DWM. Talking about digital stuff to create beautiful crafting experiences. Science thinker. Twitter : @S_Seghers

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