PUP’s — Notre nouvelle application ❤
Etude de cas (design process)
⇨ 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.
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.
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 :
- Pinterest (ressources graphiques)
- Unsplash (photos haute résolution)
- Dribble (ressources graphiques)
- Site Inspire (ressources graphiques)
- Hover State (ressources graphiques)
Une fois nos idées globales en place, nous avons commencer à imaginer des prototypes papier à main levée.
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 :
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.
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 :
- Google Fonts (bibliothèque typographique)
- Type Scale (rapports de proportions des typos)
- Adobe color (palette de couleurs)
- Coloors (palette de couleurs)
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 :
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.
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 :
Voici un aperçu de notre grille sur le site internet:
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
SITE INTERNET
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 :
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.
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
ESPACE LIENS ↓
⇨ Si vous voulez visiter notre application ou consulter notre site internet, c’est par ici que ça se passe :
Site web :
Application (fictif pour le moment) :
Behance :
https://www.behance.net/gallery/50956939/PUPs-UX-DESIGN-School-project
NOTRE GROUPE
⇨ N’hésitez pas à consulter les profils des membres de notre team et de les follow pour être au courant de tous les travaux !
Socials ↓
